Remove white space at bottom of Thank You response.

  • powersland
    Asked on December 10, 2016 at 4:59 PM

    There is so much white space below the thank you that the information falls off the top of the screen on iPhones and smalll screens.  

    <p><span style="font-size: 14pt; color: #000080;">Thank You!</span></p>

    <div>

    <p><span style="font-size: 18pt; color: #3366ff;"><a style="color: #3366ff;" href="http://powerslandbrokerage.com/images/uploads/WillowCreekBrochureWeb.pdf" target="_blank">Click Here to Download Brochure</a></span></p>

    <p><span style="color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #f7f9fc;">A copy of the brochure has also been emailed to you. If you have any problems or would prefer to have a copy of the brochure emailed or mailed to you please call 307-217-2777 or email at&nbsp;<a href="mailto:info@powerslandbrokerage.com">info@powerslandbrokerage.com</a></span></p>

    <p><span style="color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #f7f9fc;"><span style="background-color: rgba(255, 255, 255, 0);"><a style="font-family: 'Lucida Grande';" href="http://www.powerslandbrokerage.com" target="_blank"><img style="width: 187px;" src="//www.jotform.com/uploads/forum/powersland/1480464838Logo-twotone-transparent.png" alt="Remove white space at bottom of Thank You response. Image-0" height="107" /></a></span></span></p>

    </div>

  • Jan
    Replied on December 11, 2016 at 9:16 AM

    I was able to replicate the issue. I opened your webpage and I can already see a lot of white space below the form. I believe that you embedded the iFrame code in a modal.

    Remove white space at bottom of Thank You response Screenshot 50

    Please try the suggestions below in order to make your form mobile responsive

    1. Add the Mobile Responsive widget to your form. In the Form Builder, please click the "More Fields" section and then search form "Mobile Responsive". After that, please drag it to the form. Here's a screen capture:

    Remove white space at bottom of Thank You response Screenshot 61

    2. Please enable the "Make this form responsive" option in the Form Designer.
    2.1 Go to Form Designer by clicking the "Designer" button in the top toolbar.

    Remove white space at bottom of Thank You response Screenshot 72

    2.2 In the Form Designer, go to the "Design" tab. After that, go to the "Form Layout" section and you'll see the "Make this form responsive" option. Please enable it and save the changes.

    Remove white space at bottom of Thank You response Screenshot 83

     

    If the issue is still the same, please try to re-size the iFrame's height to 539px. Here's an example:

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

    If it is still the same, please try to remove the script element below the iFrame code.

    You might want to use our Lightbox Form instead. Here's a guide: https://www.jotform.com/help/220-How-to-Create-a-Lightbox-Form.

    Hope that helps. Thank you.

  • powersland
    Replied on December 11, 2016 at 12:48 PM

    I tried the first two and still not removing white space on the Thank You.  Question, when I change the design setting to responsive and add the mobile responsive widget does it modify the Thank You pop up window?  Still need a solution.

     

    Charlie Powers    

  • powersland
    Replied on December 11, 2016 at 1:44 PM
    I tried the first two and still not removing white space on the Thank You. Question, when I change the design setting to responsive and add the mobile responsive widget does it modify the Thank You pop up window? Still need a solution.
    Charlie Powers
    ...
  • David JotForm Support Manager
    Replied on December 11, 2016 at 4:48 PM

    I checked the form, and you have not removed the script part from the Iframe code, please delete your form's Iframe code, and only copy and paste the one my colleague provided:

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

    If the issue still persist, do not revert the change, let us know, so we can check further.

  • charlie powers
    Replied on December 11, 2016 at 5:03 PM

    I placed the code above in both the source code of the thankyou response and the css of the design tab.  Still no reduction of white space on the Thank you page.

  • charlie
    Replied on December 11, 2016 at 6:54 PM

    I did what you said on the Willow Creek Ranch Brochure and no luck.  If you could format one of the brochures, I'll just clone from there.  Just pick one of the brochures and fix it and tell me which one. 

  • Chriistian Jotform Support
    Replied on December 11, 2016 at 11:07 PM

    Please note that the code that my colleague provided is not for the source code of the Thank You page nor for the CSS of the design tab. There is no need to modify the css of your form, and as such your form has not been modified by the support team

    You will need to use the code provided to embed the form to your website's modal window (where the form appears on your website). I have displayed the code again below for your convenience. Please use that code to embed the form to your website. The embed code below has an adjusted height in order to reduce the white space that appears in the modal.

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

    Please let us know if the issue persists.
    Regards.