How remove the extra space below my Thank you page?

  • Profile Image
    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

  • Profile Image
    Ian
    Answered 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.

     

  • Profile Image
    RealtyPlans
    Answered on December 14, 2016 at 01: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

  • Profile Image
    Chriistian
    Answered on December 14, 2016 at 01: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.

     

    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

  • Profile Image
    RealtyPlans
    Answered on December 14, 2016 at 02: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

  • Profile Image
    Chriistian
    Answered on December 14, 2016 at 03: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
  • Profile Image
    RealtyPlans
    Answered on December 14, 2016 at 04:59 AM

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

  • Profile Image
    RealtyPlans
    Answered on December 14, 2016 at 05:10 AM

    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

  • Profile Image
    Nik_C
    Answered on December 14, 2016 at 06:26 AM

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

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

    Please let us know how it works for you.

    Thank you!

     

     

     

  • Profile Image
    RealtyPlans
    Answered on December 14, 2016 at 04:18 PM

    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

     

  • Profile Image
    BDAVID
    Answered on December 14, 2016 at 06: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;

    }

    Let us know if you need more help.

  • Profile Image
    RealtyPlans
    Answered on December 14, 2016 at 07:08 PM

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

  • Profile Image
    Chriistian
    Answered on December 14, 2016 at 08: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.

  • Profile Image
    RealtyPlans
    Answered 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. 

  • Profile Image
    RealtyPlans
    Answered 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.

  • Profile Image
    Chriistian
    Answered 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.