How to adjust form height and width?

  • Profile Image
    jabedoya60
    Asked 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
    John_Benson
    Answered 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
    jabedoya60
    Answered 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
    jonathan
    Answered 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
    jabedoya60
    Answered 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
    Welvin
    Answered 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
    jabedoya60
    Answered 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
    Mike
    Answered 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
    jabedoya60
    Answered 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
    Mike
    Answered 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
    jabedoya60
    Answered on July 22, 2017 at 11:05 AM

    Thank you is perfect now.