What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Collapse Form Resizing

    Asked by xagolab on June 26, 2015 at 09:04 AM

    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?

    resizing size font variables FAQ
  • Profile Image
    JotForm Support

    Answered by Chriistian on June 26, 2015 at 12:29 PM

    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.

  • Profile Image

    Answered by xagolab on June 26, 2015 at 12:31 PM

    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.

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 26, 2015 at 01:03 PM

    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.

  • Profile Image

    Answered by xagolab on June 26, 2015 at 01:05 PM

    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

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 26, 2015 at 01:18 PM

    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.

  • Profile Image

    Answered by xagolab on June 26, 2015 at 01:21 PM

    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

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 26, 2015 at 01:40 PM

    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.