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

    Remove extra spacing

    Asked by tracyalexander on April 24, 2017 at 01:10 AM

    I would like to reduce the spacing above and below the fields shown.

    If it is possible I would like to reduce the spacing above and below every configurable list I have in my form without going into each one and changing settings?

    If not please just tell me how to do the fields I have included in the screen shot

    Thank you for your help

    Page URL:
    https://eu.jotform.com/build/70951790799373

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Charlie on April 24, 2017 at 02:54 AM

    If you want to change the overall spacing of the fields, then you can do that using the Form Designer Tool. Here's a guide that might help: https://www.jotform.com/help/62-How-Can-I-Change-Spacing-Between-Questions

    Below is a quick tutorial about it.

    1. First click the "Form Designer" button.

    2. Under the "Styles" tab, you should be able to see the "Question Spacing" option. 

     

     

    If you only want to change the padding or vertical spacing of the text field in your "Fleece" section collapse, then you can use this custom CSS code:

    /*Change padding of text under Fleece */

    #id_198 {

    padding-top: 0 !important;

    padding-bottom: 0 !important;

    }

     

    Now for the widgets, there's no general class selector that we can use to change all of the Configurable List widget's vertical spacing, so you need to select them all. Here's how: 

    1. First, select the widget you want to adjust the spacing. Then click the "Properties" icon. 

     

    2. Now navigate to the "Advanced" tab.

     

    3. Click "Field Details" if you see one and find the "Field IDs" section. Copy it. In my example, it's #input_239. 

     

    4, Collect all the field IDs of the Configurable List widget you want to change the spacing. Change the word "input" to "id" instead. Below is an example, which refers to the first 3 Configurable list widgets that you have:

    #input_239, #input_240, #input_241

    and change them to:

    #id_239, #id_240, #id_241

     

    5. Now create a custom CSS code using those IDs, which should look like this:

    #id_239, #id_240, #id_241 {

    padding-top: 0 !important;

    padding-bottom: 0 !important;

    }

    Make sure to separate each id with a comma (,). 

     

    To inject your custom CSS code in your form, you can do that by following this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    Let us know if that works.