How to Add a Modal Window to Your Form

June 3, 2024

A modal window is a design element that can temporarily disable interaction with the rest of your form until the user addresses the content within the modal. You can use it to show important messages, confirmations, or information to your form fillers.

Youtube Embed Poster: twwsRA87S38

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.
Steps to add a custom HTML in Jotform
  1. Paste the following HTML code into the Source code editor. Edit the highlighted texts to your liking:
<p><a class="button" href="#openModal" rel="nofollow">Click Here!</a></p>
<div id="openModal" class="modalBox">
<div>
<p><a class="close" title="Close" href="#closeModal" 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>
  1. For the CSS, open the Form Designer on the right.
Step to open the form designer in Jotform
  1. Go to Styles at the top, then enter the following code under Inject Custom CSS:
Steps to apply custom CSS in Jotform
/* 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;
}

See How to Inject Custom CSS Codes for more information.

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

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

The open modal tag in an iframe embed code
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:

  • Reanda Doornink - Profile picture
  • St. Mary's First Nation - Profile picture
  • Beverley Griffiths - Profile picture
  • Jalan Atirani - Profile picture
  • Myra Epp - Profile picture
  • officerescue - Profile picture
  • Cassandra Anzalone - Profile picture
  • Christ Church USA - Profile picture
  • Urban PopUp Shop - Profile picture
  • Frank Ploof - Profile picture