How to Add a Pop-up Modal On Your Form

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:

2. Now after that, find the Form Designer Tool icon and click it.
   

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:

   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.

• Close: https://www.jotform.com/70331350848958#close
• Open: https://www.jotform.com/70331350848958#open

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.

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.