How remove the extra space below my Thank you page?

  • RealtyPlans
    Asked on December 13, 2016 at 11:49 PM

    I have added my form in middle of another page. Isee that after than you message there is huge space below. I would want to remove it. Please let me know how it can be done.Thanks

  • Ian
    Replied on December 14, 2016 at 12:57 AM

    I noticed that the form you are using is http://www.jotform.co/form/63188341341857 which appears to be fine.

    Please provide the URL of the page where the form is integrated, so we can check further.

     

  • RealtyPlans
    Replied on December 14, 2016 at 1:30 AM

    The form is in the page https://www.realtyplans.com.au/pages/client-portal . Sorry there was a typo. After the Thank you message ie.after form submit I get huge white space below. I would want to remove it. Thanks

  • Chriistian Jotform Support
    Replied on December 14, 2016 at 1:58 AM

    Hi  RealtyPlans,

    In order to remove the extra space of your Thank You page, you need to adjust the width  and height of your form.How remove the extra space below my Thank you page? Image 1 Screenshot 20

     

    But if you don't want to change the size of your form, you can adjust the height using the iFrame embed code. Have you tried embedding your form using the iFrame code? If no, we would suggest you to please try embed your form using the iFrame embed code. Here's a guide: Getting the form iFrame code.

    Do let us know if you need further assistance.
    Regards

  • RealtyPlans
    Replied on December 14, 2016 at 2:14 AM

    No that did not work. When I embed an iframe it only increased the space further. I tried putting the form in div too even that did not help. Is there a way in CSS I can reduce the space ?Thanks

  • Chriistian Jotform Support
    Replied on December 14, 2016 at 3:06 AM

    Hi again,

    Can you please add this custom CSS on your form?

    div#stage {
        margin-bottom: 0px !important;
    }
     
    Here's a guide on How to Inject Custom CSS Codes.
     
    Let us know if this works.
    Regards
  • RealtyPlans
    Replied on December 14, 2016 at 4:59 AM

    No luck :( It still shows same amount of space.

  • RealtyPlans
    Replied on December 14, 2016 at 5:10 AM

    How remove the extra space below my Thank you page? Image 1 Screenshot 20

    As you could see that's the iframe height and width that's causing issue. What are the ways I can reduce it ?

    This answer here talks about editing Thank you page code. https://www.jotform.com/answers/836780-Remove-Space-padding-around-the-Thank-you-page

    I do not find those options now. Please provide a solution. Thanks

  • Nik_C
    Replied on December 14, 2016 at 6:26 AM

    You can access the code of Thank you page by going to Thank you page option and clicking this icon:

    How remove the extra space below my Thank you page? Image 1 Screenshot 30

    And then add, for example this code margin-bottom: -50px !important; here:

    How remove the extra space below my Thank you page? Image 2 Screenshot 41

    Please let us know how it works for you.

    Thank you!

     

     

     

  • RealtyPlans
    Replied on December 14, 2016 at 4:18 PM

    How remove the extra space below my Thank you page? Image 1 Screenshot 20

    hmm That did not help either. I could see the min-height of the iframe the form is built is 300px. Thats what is seen in Thank you page too and that causes extra space in the bottom.I tried to put a CSS

    .iframe{min-height: 100px !important;}

    but that did not help too. Can you pls suggest another way. Thanks

     

  • David JotForm Support Manager
    Replied on December 14, 2016 at 6:48 PM

    Please try with the following code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    iframe#63188341341857{

        min-height: 100px !important;

    }

    How remove the extra space below my Thank you page? Image 1 Screenshot 20

    Let us know if you need more help.

  • RealtyPlans
    Replied on December 14, 2016 at 7:08 PM

    No it still has height 300px :( Is there any other way ?

  • Chriistian Jotform Support
    Replied on December 14, 2016 at 8:44 PM

    Since the iFrame element is outside the form, you will need to insert the css in your website's css. Please apply the css below into your website css. Once applied, the css should work correctly with adjusting the min-height.

    iframe#63188341341857{

        min-height: 100px !important;

    }

    Please let us know if the issue still persists.
    Thank you.

  • RealtyPlans
    Replied on December 14, 2016 at 11:14 PM

    No i tried that too. I put the CSS code in website CSS.The issue persist ! Please provide a solution. The iframe is within jotform code only. 

  • RealtyPlans
    Replied on December 14, 2016 at 11:26 PM

    I just put an override for entire i frame in my website CSS and it worked on the form iframe too. But ideally i want to put an override for form iframe only. But got an solution atleast.

  • Chriistian Jotform Support
    Replied on December 15, 2016 at 12:55 AM

    I am glad to know that you were able to resolve the issue. The css for the specific iframe might not have the css applied to it because it was being generated by the script embed code.

    You can keep using the iframe override to reduce the min-height on the thank you page, but if you want, you can also try embedding the form using the iFrame code again. Then re-apply the css that we provided into your website. Using the iframe code directly should allow the css for the specific iframe to work.

    Please let us know how it goes.
    Regards.