Collapse Form Resizing

I am using SquareSpace to build my site and wanted to implement collapse form widget in my FAQ but I see that I have no control on formatting the size or font or other variables of the collapse form widget.  How can I modify such items?

Hi xagolab, 

Thanks for contacting us.

You can change the design of the Form Collapse tool by adding/injecting a custom CSS code. Please provide to us the link or name of the form in question and give us more information regarding this so we can help you change the design of your Form Collapse tool .  

Do let us know if you need further assistance.

Regards.

I do not have a link or name of the form but I noticed on a blank form when I dragged the Form Collapse field that there was no option to customize it.  So I didn't know if I can customize it to fit the look and feel on my website.

Hi xagolab, 

I see. You can customize the look of your Form Collapse tool by injecting custom CSS code. Like for example, if you want to change the background color of the Form Collapse tool and change the font-size, you can try injecting the custom CSS Code below.

.form-collapse-table{

  background-color: blue !important;

  background-image: none;

  border-color: blue!

}

.form-collapse-mid{

  font-size: 14px;

  color: #FFFFFF;

  text-shadow: none;

}

To inject custom CSS code in your form, you can check the instructions provided in this article.

When the custom CSS code is applied to your form, the Form Collapse tool would look like this (see screenshot below).

If you are having problems with your Form Collapse tool design, do let us know. We will be happy to assist you further.

Regards.

That helps but I was more interested in the height and width of the Form Collapse bar.  What codes would I be able to use to control such items?

Thanks

Hi xagolab,

You can add the custom CSS below to change the width and height of the Form Collapse tool.

.form-collapse-table{

  width: 300px; //You can adjust this to set the width of the tool as needed.

  height: 40px; //You can adjust this to set the height of the tool as needed.

}

.form-collapse-mid{

  height: 40px;

  margin-top: 10px;

}

.form-collapse-right form-collapse-right-show{

  height: 40px;

}

Do let us know if you need further assistance.

Regards.

That's perfect.  That helps although it would be nice if these were readily available as part of the form design rather than injecting CSS code especially the width and height. 

But all is well.  Thanks Chriistian

Hi xagolab, 

You are welcome. Glad to hear that the CSS code works. 

If you have any further questions, please feel free to contact us again.

Regards.