How to Add a Modal Popup to Your Form

If you are wondering how you can implement a modal popup window on your form, then this is the right place for you. Modal windows can be used to show ads, messages, or additional information.

Here’s a demo form to demonstrate the modal window: https://www.jotform.com/221332168199458

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

1. Add a Paragraph element to your form.
2. Click the Source Code icon.

3. Paste the following 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>

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

4. Next, open the Form Designer Tool.
5. Go to the Styles tab.
6. Scroll down to the Inject Custom CSS section.

7. Paste the following 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;
}

8. Scroll down and click the Save button.

To learn more about adding CSS code to your form, check this guide on “How to Inject Custom CSS Codes”.

How to Automatically Open the Modal Window

Appending #open to the 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.

Done! You now have a modal window on your form.

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