Adjusting the spacing in the form

  • Laine
    Asked on March 7, 2017 at 12:20 PM

    i had a height limitation on the form frame that was too little.

    i have too much white space at the end of the footer section and the bottom bar.

  • Welvin Support Team Lead
    Replied on March 7, 2017 at 12:31 PM

    Are you referring to the form on this page: https://addictionwebmarketingpros.com/onboarding-form-treatment-centers/

    The form height is normal. I can see the whole form on the page. As for the white space, inject the following custom CSS codes in the form to fix it:

    .jotform-form {

        padding: 0 0 !important;

    }

    Follow our steps on this guide to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • ronprosky
    Replied on March 7, 2017 at 12:48 PM

    the form is at the bottom of this page

    https://illuminaterecovery.com/

     

  • Jan
    Replied on March 7, 2017 at 3:39 PM

    I was able to replicate issue when I opened your webpage. Here's a screenshot:

    Adjusting the spacing in the form Image 1 Screenshot 30

    Please try to remove the <script> element below the iFrame code. After that, please change the height of the iFrame to "300px".

    Adjusting the spacing in the form Image 2 Screenshot 41

    Here's an example code:

    <iframe id="JotFormIFrame-70613794331152" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/70613794331152" style="width:100%; height:300px; border:none;" scrolling="no" frameborder="0"> </iframe>

    Hope that helps. Thank you.

  • ronprosky
    Replied on March 7, 2017 at 3:46 PM

    that worked. i was told to publish my form with embed iframe method! why does this method have iframe and script???

  • ronprosky
    Replied on March 7, 2017 at 3:49 PM

    works on computer, cuts off submit button on iphone

  • Jan
    Replied on March 7, 2017 at 5:19 PM

    The purpose of the script element is to resize the iFrame automatically. It is part of the iFrame code. However, if there are any issues, we suggest our users to try removing it.

    Unfortunately, I wasn't able to replicate the issue on my Androind phone. I am using Google Chrome. Here's a screenshot:

    Adjusting the spacing in the form Image 1 Screenshot 50

    Please try to enable the "Make this form responsive" option in the Advance Form Designer. Here's how:

    1. In Form Builder V4, click the "Form Designer" icon.

    Adjusting the spacing in the form Image 2 Screenshot 61

    2. Scroll down and then click the "Advanced Designer" button.

    Adjusting the spacing in the form Image 3 Screenshot 72

    3. In the Advanced Designer, go to the "Design" tab. Under the Form Layout, please enable the "Make this form responsive" option.

    Adjusting the spacing in the form Image 4 Screenshot 83

    4. After that, please save the changes.

    Hope that helps. Thank you.

  • ronprosky
    Replied on March 7, 2017 at 7:38 PM

    i clicked made the form responsive as you suggested.

    i just don't even understand why it's an option when it should be automatically responsive!

    my button disappeared totally now!

  • Chriistian Jotform Support
    Replied on March 7, 2017 at 9:37 PM

    Hi,

    Can you please try to adjust the height of the iFrame? Use 500px instead. 

    Hope this helps.

    Regards

  • ronprosky
    Replied on March 7, 2017 at 9:59 PM

    changed height to 500px. form shows well except now there is too much extra space again below form on computer and iphone

  • Ian
    Replied on March 7, 2017 at 11:53 PM

    I am sorry for going back and forth, but I tested and setting Iframe to size 325px appears reasonable

    Can you please try that one more time? if there still minor adjustment required, try to increase/decrease size with increment of 10px ex 335 345 etc

    Hope this helps