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

    Setting Preview Before Submit widget to open as a pop-up

    Asked by shw528 on March 25, 2015 at 05:15 PM

    Is there any way I can use CSS to configure the Preview Before Submit widget to open as a pop-up window when I click the Preview Button Text?

    Page URL:
    http://form.jotform.us/form/50835190521147

    preview pop-up window preview before post
  • Profile Image

    Answered by Ben on March 25, 2015 at 06:36 PM

    You would not be able to achieve the same effect, but it might look like this:

    The gray part covers the entire form and only this is shown.

    If you like that and would like to use it, all you would need to do is to add the following CSS to your jotform:

    div#checkSubmission {
        background-color: gray;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        z-index: 4;
        overflow-y: auto;
    }
    div#previewContainer {
        background-color: white;
        border-radius: 20px;
        display: block;
        margin: 100px auto;
        opacity: 1;
        padding: 10px;
        width: 500px;
        box-shadow: 0 0 10px black;
    }
    #previewContainer li[class] > div {
        display: inline-block;
        text-align: center;
        width: 50%;
    }
    div#previewButtons {
        min-width: 500px;
        width: 100%;
    }

    You can see here how to add the CSS code to your jotform: Inject Custom CSS Codes

    Do let us know if you have any questions and we would be happy to answer them.

  • Profile Image

    Answered by shw528 on March 26, 2015 at 02:40 PM

    Okay - thank you, Ben.  I'll see if I can get this to work.

  • Profile Image

    Answered by Ben on March 26, 2015 at 03:51 PM

    You are welcome and do let us know if you want to re-tweek them a bit and we would be happy to assist :)

  • Profile Image

    Answered by shw528 on April 07, 2015 at 10:51 AM

    Hi Ben - I added the code but I do not see any changes.  Is there a specific place I have to insert it?

  • Profile Image

    Answered by Ben on April 07, 2015 at 11:46 AM

    I am looking at this form, but I can not see the Preview before submit button on it any more: http://form.jotform.us/form/50835190521147

    Is some other form being used for this?

    In regards to the CSS, the bottom of the custom CSS code is where it should be placed, but the widget must be on the form as well.

  • Profile Image

    Answered by shw528 on April 07, 2015 at 12:01 PM

    Yes, I had to remove it because it was confusing my customers.  This feature still remains on the cloned version I have in My Forms.

  • Profile Image

    Answered by Ben on April 07, 2015 at 12:29 PM

    I took a look at it, but I will need a bit time. Not sure why, but it does not seem to be working as it was before, but after I check it a bit further I will update you through this thread.

  • Profile Image

    Answered by Ben on April 07, 2015 at 12:56 PM

    Unfortunately after looking at it a bit further now, the only solution that would work would be to use the source code form instead and add the code for the change manually.

    If you are interested in that, we could help you with the javascript code that you would need to add.

    The only downside of this would be that your code will no longer be updated on your website as soon as you make the change on your website - instead you would need to grab the new source code, apply again the same custom code and then embed it on your website.