Spacing form elements using custom css

  • jabedoya60
    Asked on October 21, 2017 at 9:55 AM

    Hi guys, I am having problems with my form, I have 3 check boxes, the first 2 should not add any value to the total amount only the 3rd one with a price.

    also, I have some spacing issues with fields and text, please take a look at the screenshot.

    Thank you.

    Jotform Thread 1279131 Screenshot
    Page URL: https://form.jotform.com/72933792484166
  • TREVON
    Replied on October 21, 2017 at 12:42 PM

    I have split the thread into two different threads as the issues raise were not related. You can access the other thread using the link: https://www.jotform.com/answers/1279167

    To manage spacing on you forms kindly inject the following css codes to your form. To increase the space between the text label and the text input element, kindly inject the following code in you form.

    .form-label.form-label-auto {
        display: inline-block;
        float: left;
        text-align: left;
        width: 180px;
    }
    #label_59 {
        width: 180px;
    }

    The css code below will increase the paragraph before the signature field to cover the whole form width.


    .form-label-left, .form-label-right {
        width: 180px;
    }

    The css code below will center the signature element in your form

    #customFieldFrame_55 {
        margin-left: 10%;
        width: 50%;
        display: inline-block;
    }

    To inject the above css kindly follow the guide below: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Below is a clone of your form with the above  CSS codes.

    https://form.jotform.com/72934617138967

    You can test and clone the form to your account. To clone the form follow the guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Hope the above solution resolves your issue. Kindly feel free to contact us in case you need further assistance.