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

    How to adjust form height and width?

    Asked by jabedoya60 on July 14, 2017 at 09:38 PM

    Hi guys, I have chosen a clean form template, we need for our school a very slim and small form on our home page here:

    http://amcca.ca/new/

    There is too much leading, the fields are too tall and the Capcha does not show the right side of it, can you help me fix it?

    Thank you very much,

    James

     

  • Profile Image
    JotForm Support

    Answered by John_Benson on July 15, 2017 at 04:37 AM

    To fix the issue, please add this Custom CSS Code to your form: 

    .form-sub-label-container {

        padding: 1px !important;

        margin: 0px !important;

    }

    To add a Custom CSS Code to your form, please follow this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Let us know if you have any questions. Thank you.

  • Profile Image

    Answered by jabedoya60 on July 15, 2017 at 08:09 AM

    Hi, thank you for the reply, the code above helped a bit but I still have major issues, first now the fields for First name and Last name do not match the spacing in between with City and State, the fields are too large and there is still a lot of space in between (leading) and last, cannot see the right part of the captha, here is the screenshot, thank you for your help.

  • Profile Image
    JotForm Support

    Answered by jonathan on July 15, 2017 at 04:49 PM

    Try using the Advance Designer to adjust the Line Layout >> Line spacing and padding of the form.

    Ex:

     

    You can test my version of the form here https://form.jotformpro.com/71956727122965

    You can also clone my form to better review it on your Form Builder.

    User guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Let us know how it goes.

     

     

  • Profile Image

    Answered by jabedoya60 on July 16, 2017 at 08:11 AM

    HI, thank you it helped a bit but  I really need the form to be half the vertical size that it is now, the fields are too big in height,the title is too big and also the captcha is missing part of a graphic to the right.

     

  • Profile Image
    JotForm Support

    Answered by Welvin on July 16, 2017 at 10:14 AM

    I have adjusted the custom CSS codes to your form in the following:

    Address field to look like the name field:

    .form-address-table td, .form-address-table th {

        padding : 0 !important;

    }

    .form-address-table td .form-sub-label-container {

        width : 100% !important;

    }

    [data-type="control_address"] input[name$="[city]"], [data-type="control_address"] input[name$="[postal]"] {

        width : 100% !important;

    }

    To adjust the padding of the header:

    div.form-header-group {

        padding : 5px !important;

    }

    Keep the heading color to white:

    .form-header-group .form-header, .form-header-group .form-subHeader {

        color: #ffffff !important;

    }

     

    To keep the form fields closed to each other:

    .form-line {

        margin-top: -5px !important;

    }

     

    As for the Google ReCaptcha, unfortunately, it's an iframe. Its width cannot be adjusted in the form, not even with CSS. A workaround would be to use the invisible captcha (https://widgets.jotform.com/widget/google_invisible_recaptcha).

     

    I hope that above codes help. Let us know if something goes off.

  • Profile Image

    Answered by jabedoya60 on July 17, 2017 at 06:11 PM

    Hi, a huge improvement, but still can the fields be a lot smaller in height? Like this other form I created:

    http://amcca.ca/new/my-amc/coupons/mont-tremblant/

    Also, can the title be smaller in size?

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Mike on July 17, 2017 at 07:18 PM

    I have updated the CSS on your form. Please re-check the form now.

    Also, I would like to recommend you to update the iFrame embed code a bit.

    Change from height:539px; to min-height:525px;

    < iframe id=" JotFormIFrame-71948504284160 " onload = " window.parent.scrollTo(0,0) " allowtransparency = " true " src= " https://form.jotform.us/71948504284160 " frameborder=" 0 " style="width:100%; height:539px; ...

    To:

    < iframe id=" JotFormIFrame-71948504284160 " onload = " window.parent.scrollTo(0,0) " allowtransparency = " true " src= " https://form.jotform.us/71948504284160 " frameborder=" 0 " style="width:100%; min-height:525px; ...

    It should fix the submit button which is not fully displayed on the first form load.

  • Profile Image

    Answered by jabedoya60 on July 19, 2017 at 08:31 PM

    Hi, yes the form looks now very good, thank you very much, just one thing, can the Submit button be smaller, it looks gigantic?

    Here is the screen shot of www.amcca.ca/new

  • Profile Image
    JotForm Support

    Answered by Mike on July 19, 2017 at 09:44 PM

    I have also added the next CSS to the form.

    .form-submit-button {
    width: 40%;
    margin: 0 auto;
    padding: 4px;
    font-size: 14px !important;
    margin-top: 5px;
    }

  • Profile Image

    Answered by jabedoya60 on July 22, 2017 at 11:05 AM

    Thank you is perfect now.