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

    Is there any way to remove padding between elements/modules? Can I change the background color of specific modules?

    Asked by hipharp on April 19, 2017 at 03:40 PM

    I'm trying to create a Leadpages-type opt-in form and the vertical spacing in my Jotform version is 'clunky' around the opt-in fields (too much space between form elements).  For example, the small-print disclaimer is soooooo far below the button in the example below.

    ==> Is there a way to remove top and bottom padding from specific modules in a form?

    ==> Alternately, is there any way to insert text-entry fields and submit buttons into a 'text' module so I could try to build this more effectively in a text module?

    ==> I'd also love to be able to change the background color of some of the modules so I could clarify to my viewers where the 'opt-in section' begins and ends.

    I just need to be able to make the form more visually appealing and make the opt-in section more concise and clear physically.

    How can I do these things?

     

     

    Page URL:
    https://form.jotform.com/71065824724962

    Screenshot
  • Profile Image
    JotForm Support

    Answered by jonathan on April 19, 2017 at 06:35 PM

    You can add this custom CSS codes on your form to decrease the space and paddings between the TEXT field and spacer widget.

     

     

    #id_18,#id_19 {

        margin-top : 0px !important;

        margin-bottom : 0px !important;

        padding : 0px 36px !important;

    }

     

    #id_14 {

        margin-top : 0px !important;

        margin-bottom : -30px !important;

        padding : 0px 36px !important;

    }

     

    #id_5 {

        background-color : #6DD0F2;

    }

     

    #id_6 {

        background-color : #6DD0F2;

    }

    #id_5{

    top:12px;

    }

    ---

     

    You can adjust the px number and background color to match your actual requirements.

    Let us know if you need further assistance.