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
- In the Form Builder, add a Paragraph element to your form.
- In the Paragraph’s editor, select Source Code (“>_”) at the top.
- Paste the following HTML code into the Source code editor:
<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>
- Edit the highlighted texts to your liking.
- For the CSS, select the paint roller icon in the upper-right corner to open the Form Designer.
- In the right panel, go to Styles at the top.
- Scroll down to the Inject Custom CSS section.
- 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;
}
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 #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.
Send Comment:
10 Comments:
83 days ago
Hi, is there a way to change the colour and shape (ie. rounded corners) of the button?...
323 days ago
should be a drag and drop option to add a pop up message if a particular option is selected on the form.
339 days ago
I don't have a Styles tab in the Form Designer Tool - does this still exist?
359 days ago
Can you provide the code that I can add to this so that when the user clicks outside the modal, it closes it, instead of needing to click the X button at the upper right corner of the modal?
More than a year ago
Hi this is not working for me. Im trying to do this and without even modifying any text nothing appears in preview mode
More than a year ago
This doesn't work! When I copy and paste the text above into the paragraph field there is no Yes button at the bottom to click on to get rid of the pop up!
More than a year ago
Can you edit the code to make the modal popup in a new window?
More than a year ago
I am not able to scroll. The pop-up works but I have a lot of text but is not able to scroll down, is there a code for that?
More than a year ago
hello, does this work if I wanted multiple modal pop ups on my form? I tried having 3 different ones, but the text wouldn't change/make each button unique. It looks like I copied and pasted it to all 3.
Form: https://www.jotform.com/build/221717579030152
More than a year ago
Great advise... It was actually simple as I just copied code from No 1 into CSS for field and it works fine!!
Now wonder if each time the 'add' function is evoked if a todays Date field could be a constant beginning for the text field..
Date: 03/23/2022 space space. The note begins here...