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

  • Profile Image
    hipharp
    Asked 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?

     

     

  • Profile Image
    jonathan
    Answered 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.