Change the appearance of only one section collapse header - not all of them

I am working with this form: https://form.jotform.com/240867287059166 and I'm on Page 1.

I have a collapse section header titled "A few notes about this form....." I want to change the formatting of only this header so it looks more like this:

These are the changes I'd like to make:

• White background instead of the green (the black border isn't necessary, but shows the outline of the shape for reference),
• Change the dropdown image to just a green arrow instead of an arrow inside a circle
• Make the font size smaller (9 pt)
• Change the size of the dropdown image so it's proportionate to the smaller font size
• Reduce the buffer between the text and the edge of the image - so it looks more streamlined

I don't want the heading to look like a header. I'd like it to blend in with the rest of the form except for the text and the dropdown image.

Can you help?

Hi Band_Homestead,

Thanks for reaching out to Jotform Support. I understand you wish to customize the first section collapse on your form, but I'll need a bit of time to look into this. I will be back shortly.

Thanks for your patience, we appreciate it.

Hi Band_Homestead,

You can inject the below CSS Code to your form to apply your custom changes to your first Section Collapse:

/* Customize first section collapse -#15965321 */

div#collapse_426 {

  padding-top: 0px ! important;

  padding-bottom: 0px ! important;

  min-height: 30px ! important;

  max-height: 30px ! important;

  background-color: white;

}

span#collapse-text_426 {

  font-size: 9pt ! important;

  font-weight: 700;

}

.form-collapse-table:after {

  height: 28px ! important;

}

/* Code ends here */

It's really easy to do, let me show you how:

1. In Form Builder, click on the paint roller icon.
2. Select the Styles tab.
3. Scroll down through Inject Custom CSS and enter your CSS code.

That's it. Here's a link to my demo form that you can clone, and below is what it looks like afterward:

As for changing the dropdown image, I'm afraid you need to host your image somewhere first, and then you can inject the below CSS Code below and apply your image URL:

.form-collapse-table:after {

  background-image: url(image URL here);

}

Let us know if you need any more help.

I got it to work and added code to make the border solid white. However, the bottom border still looks gray (see image).

Another thing I'd like is for the space between the bottom of the collapse section header to be closer to the divider below it when it's closed (see image).

Can you help me fix these?

Hi Band_Homestead,

Add the below CSS code in your form to change the border color of the collapse section and reduce the space between the collapse section and divider :

/* To change the broder color of collapas section*/

.form-collapse-table {

  box-shadow: 0 1px 0 white inset, 0 1px 0 white;

}

/* To reduce the space between section collapse and divider*/

li#id_366 {

  margin-top: -35px;

}

This is how it looks now :

I've introduced changes to the cloned form. Here is the link to the clone form. If needed, you can clone my form to check the CSS code and its placement. We also have a guide on How to Clone an Existing Form From a URL that you can check out.

Reach out again if you require any other help.