What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Thank You Pop Up message, bottom cut off

    Asked by m7ickey on September 07, 2016 at 10:07 PM

    I created 5 forms and each has a Thank You Message pop up after a form is filled out. However, when I placed the forms on our website, the bottom part of the message does not appear. I did add our company Logo above the default thank you message which is causing the problem. I think I need to add the code to adjust the iframe height but don't know how or what code. Again, just using the default message plus a picture I added which adds approx 100px of height. Thanks for any help

    Here's a screenshot, depending on which form or page on my website, the bottom line of text always gets cut off and in at least one case even "Thank You" gets cut off. So it looks good here, why won't it look the same on my website :-(

    message bottom cut thank cut
  • Profile Image
    JotForm Support

    Answered by Kevin_G on September 08, 2016 at 12:10 AM

    I would suggest you to inject this CSS code to your form: 

    .thankyou {

        height: 600px!important;

    }

    #stage {

        height: 550px!important;

    }

     

    It will help you to customize the height of your Thank You page, please change the current given values to the needed values for your Thank You page. 

    This guide will help you to inject the CSS code to your form: How-to-Inject-Custom-CSS-Codes

    Hope this helps. 

  • Profile Image

    Answered by m7ickey on September 08, 2016 at 10:39 AM

    Thanks for the reply. Followup question. I know how to inject the code but not where? First, last, somewhere else? Here's a screenshot, can you tell me exactly where to put the code. Thanks!

  • Profile Image
    JotForm Support

    Answered by Jan on September 08, 2016 at 12:22 PM

    You need to inject the CSS code in the Preferences. Here's a guide:

    1. Click the "Preferences" button in the toolbar.

    2. Click the "Form Styles" text link at the bottom part of the Preferences wizard.

    3. Go to the "Inject CSS" tab and paste the code in the text area.

    4. Click the Save Changes button when you're done.

    Hope that helps. Thank you.

  • Profile Image

    Answered by m7ickey on September 08, 2016 at 12:43 PM

    OK, almost there. Found where to put it but again, do I put it at the beginning, end or somewhere else. Already a lot of code there? I'll test it while I wait but I hope I don't wreck the form

     

  • Profile Image

    Answered by m7ickey on September 08, 2016 at 12:53 PM

    Some Success. Apparently, I put the code in the right place but I need to adjust the numbers and there are two different ones, thank you & stage. Can someone explain the difference. Now the pop up is to tall, just want to shorten it. See here:

  • Profile Image
    JotForm Support

    Answered by Kevin_G on September 08, 2016 at 02:21 PM

    Glad to know the code worked for you. 

    The class ".thankyou" is the entire HTML body where the Thank You message displays, it means that if you increase the height for this class you will be increasing the height for all the thank you message. 

    Here is a screenshot that will help you to understand what the ".thankyou" class is: 

    The shadowed area is the ".thankyou" and I have set up on my sample a height of 1000px. 

    Now the "#stage" element is the Thank You message itself, here I have set up a height of 500px and an orange background color to show you what the "#stage" code affects. 

    So if the message is not showing completely on your embedded form you should only increase the height for the ".thankyou" class and the other "#stage" should stay the same. 

    Hope this helps; however, if you still have questions, please let us know. 

  • Profile Image

    Answered by m7ickey on September 08, 2016 at 05:03 PM

    NEW PROBLEM! Yikes, this is crazy but true. I injected your code on 2 forms, it did solve the problem on the website but this is what happened to the jot forms build page and I can't get rid of it. I have 5 forms, this happened to both that I used that code on. Any ideas? where the words are I can no longer click to edit anything. Deleting your code didn't help. Very odd, somehow that screen got irreversibly corrupted? My other forms are fine. This may need to be sent to Jot Forms tech's

  • Profile Image
    JotForm Support

    Answered by Kevin_G on September 08, 2016 at 08:06 PM

    @m7ickey, 

    As this is not related anymore to the original thread about the Thank You page, I have moved this to another thread, it can be found here: https://www.jotform.com/answers/927778 

    We will assist you there as soon as possible.