Adjusting the spacing in the form

  • Profile Image
    Laine
    Asked on March 07, 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.

  • Profile Image
    Welvin
    Answered on March 07, 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

  • Profile Image
    ronprosky
    Answered on March 07, 2017 at 12:48 PM

    the form is at the bottom of this page

    https://illuminaterecovery.com/

     

  • Profile Image
    Jan
    Answered on March 07, 2017 at 03:39 PM

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

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

    Here's an example code:

    <iframe id="JotFormIFrame-70613794331152" onload="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.

  • Profile Image
    ronprosky
    Answered on March 07, 2017 at 03:46 PM

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

  • Profile Image
    ronprosky
    Answered on March 07, 2017 at 03:49 PM

    works on computer, cuts off submit button on iphone

  • Profile Image
    Jan
    Answered on March 07, 2017 at 05: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:

    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.

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

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

    4. After that, please save the changes.

    Hope that helps. Thank you.

  • Profile Image
    ronprosky
    Answered on March 07, 2017 at 07: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!

  • Profile Image
    Chriistian
    Answered on March 07, 2017 at 09:37 PM

    Hi,

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

    Hope this helps.

    Regards

  • Profile Image
    ronprosky
    Answered on March 07, 2017 at 09:59 PM

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

  • Profile Image
    Ian
    Answered on March 07, 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

  • Profile Image
     
    Answered on March 08, 2017 at 09:56 AM

    thanks for your help. 325px works.

    jotform cannot be considered responsive which is so odd in today's marketplace...