How to Add a Modal Popup to Your Form

May 14, 2022

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.
form-builder-paragraph-source-code-icon-min.png
  1. 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.

  1. Next, open the Form Designer Tool.
  2. Go to the Styles tab.
  3. Scroll down to the Inject Custom CSS section.
form-builder-inject-custom-css-min.png
  1. 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;
}
  1. 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.

iframe-embed-code-src-open-min.png

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. 

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.

Comments: