How to Add a Pop-up Modal On Your Form

November 26, 2021

Hey there!

If you are wondering how you can implement a pop-up modal on your form, then this is the right place for you. Usually, pop-up modals are used if you want to show some ads, additional information, or other messages that are not part of the main body of your form.

Note that we will be using Jotform 4.0 on this guide. Here are sample links that I made to demonstrate what and how the pop-up modal works:

  • Demo Form – by default need to click buttons to open and close the modal.
  • Embedded Form – by default automatically opens the modal on page load. 

Below are the steps on how you can do the same:

  1. First, we need to add a Paragraph element to our form. Then the content of it will be this HTML code:

    <p><a class="button" href="#open" rel="nofollow">Open Pop-Up</a></p>
    <div id="open" class="modalBox">
        <div>
            <p><a class="close" title="Close" href="#close" rel="nofollow">X</a></p>
            <h2>Hey there!</h2>
            <p>Here's a pop-up modal.</p>
            <p>You can customize this with your own message.</p>
        </div>
    </div>

    You can edit the highlighted texts. If you are familiar with web development, then you can easily structure your own HTML markup.

    Here’s a screencast to better guide you:

    Paragraph Element
  2. Now after that, find the Form Designer Tool icon and click it.
    Form Designer Icon
  3. Now you need to paste this custom CSS code in your CSS area. Below is the CSS code:

    /*Main Box Content*/
    .modalBox {
        position:fixed;
        font-family: Arial, Helvetica,sans-serif;
        top:0;
        right:0;
        bottom:0;
        left:0;
        background: rgba(0,0,0,0.8);
        color:black;
        z-index:99999;
        opacity :0;
        -webkit-transition:opacity 400ms ease-in;
        -moz-transition:opacity 400ms ease-in;
        transition:opacity 400ms ease-in;
        pointer-events:none;
    }
    /*When the href are clicked*/
    .modalBox:target {
        opacity: 1;
        pointer-events: auto;
    }
    /*Positioning of the child box*/
    .modalBox>div {
        width:400px;
        position:relative;
        margin:10% auto;
        padding:5px 20px 13px 20px;
        border-radius:0px;
        background:white;
    }
    /*Positioning and style of the close button*/
    .close {
        background:white;
        color:black;
        line-height:25px;
        position:absolute;
        right:1px;
        text-align:center;
        top:1px;
        width:35px;
        text-decoration:none;
        font-weight:bold;
        -webkit-border-radius:12px;
        -moz-border-radius:12px;
        border-radius:12px;
        -moz-box-shadow:1px 1px 3px #000;
        -webkit-box-shadow:1px 1px 3px #000;
        box-shadow:none;
        border:none;
    }
    /*Style when mouse hovers on the close button*/
    .close:hover {
        background:black;
        color:white;
    }
    /*Default style of the open pop-up button*/
    .button {
        background-color:black;
        border:none;
        color:white;
        padding:2px 10px;
        text-align:center;
        text-decoration:none;
        display:inline-block;
        font-size:16px;
        margin:4px 2px;
        cursor:pointer;
    }

    Here’s where you need to paste it:

    Inject Custom CSS

    You can see that I have inserted comments on each part of the code block, it should help or guide you as to what that specific CSS code block is styling or doing.

  4. Scroll down and you should see the Save button.

To learn more about adding CSS code to your form, you can also check this guide: How to Inject Custom CSS Codes

How to Automatically Open the Modal?

How do I trigger opening and closing the modal manually? You can do that by appending #open or #close to your form link or embed code. These are the IDs we set up on our anchor tags in the HTML markup.

If you are embedding the form on your website and you want to open automatically the modal on page load, then you can append #open to the iframe’s src attribute.

Iframe SRC Attribute

Iframe SRC Attribute

Done! You now have a pop-up modal on your form.

Feel free to comment below if you have any suggestions or concerns you have regarding this. 

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comment:

Podo CommentBe the first to comment.