How to Add a Modal Popup to Your Form

Modal windows can be used to show ads, messages, or additional information. This guide shows how you can implement a modal popup window on your form.

View this demo form to see what it looks like.

To create a modal window

1. In the Form Builder, add a Paragraph element to your form.
2. In the Paragraph’s editor, select Source Code (“>_”) at the top.

3. Paste the following HTML code into the Source code editor:

<p><a class="button" href="#open" rel="nofollow">Click Here!</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 modal window.</p>
        <p>You can customize this with your own message.</p>
    </div>
</div>

4. Edit the highlighted texts to your liking.
5. For the CSS, select the paint roller icon in the upper-right corner to open the Form Designer.
6. In the right pane, go to Styles at the top.
7. Scroll down to the Inject Custom CSS section.

8. Paste the following 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;
}
/* Style for target elements */
.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 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;
}

9. Once you’re done, select Save at the bottom.

To learn more about adding CSS code to your form, see How to Inject Custom CSS Codes.

You now have a modal window on your form. Appending #open to your form URL will open the modal window automatically when the form loads: https://www.jotform.com/221332168199458#open

For embedded forms, append #open to the iframe’s SRC attribute to automatically open the modal window when the page loads.