JotForm User Guide / Advanced Features /

How to Add a Pop-Up Modal on your Form

How to Add a Pop-Up Modal on your Form

Hey there!

If you are wondering on how you can implement a pop-up modal on your form, then this is the right place for you. Usually, pop-up modals are used if you want to show some ads, additional information or other messages that are not part of the main body of your form. 

Note that we will be using JotForm 4.0 on this guide. Here are sample links that I made to demo what and how the pop-up modal works:

Form:  - by default needs to click buttons to open and close modal.

Embedded on an HTML web page:  - by default automatically opens the modal on page load. 

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

1. First, we need to a "Text" field on our form. Then the content of it will be this HTML code:

<p><a class="button" href="#open">Open Pop-Up</a></p>

<div id="open" class="modalBox">

<div><a class="close" title="Close" href="#close">X</a>

<h2>Hey there!</h2>

<p>Here's a pop-up modal.</p>

<p>You can customize this with your own message.</p>



The ones highlighted in bold are the text content that you can edit. If you are familiar with web development, then you can easily structure your own HTML markup. 

Here's a screencast to better guide you:

(Tip: Click the images to open it on a new tab in full size)


2. Now after that, find the Form Designer Tool icon and click it:


3. Now you need to paste this custom CSS code in your CSS area.

Below is the 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;


  -webkit-transition: opacity 400ms ease-in;

-moz-transition: opacity 400ms ease-in;

transition: opacity 400ms ease-in;

pointer-events: none;


/*When the href are clicked*/

.modalBox:target {




/*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 pop-up 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;



Here's where you need to paste it:

You can see that I have inserted comments on each part of the code block, it should help or guide you as to what that specific CSS code block is styling or doing.  


4.  Scroll down and you should see the "Save" button:


To learn more about adding CSS code on your form, you can also check this guide: How to Inject Custom CSS Codes


How to automatically open the modal?

How do I trigger opening and closing the modal manually? You can do that by appending #open or #close on your form link or embed code. These are the IDs we setup on our anchor tags in the HTML markup.




If you are embedding the form on your website and you want to open automatically the modal on page load, then you can append #open on the src attribute. Below is an example, I used the iFrame embed code, you can see I appended the #open at the end of the link in the src attribute.

<iframe id="JotFormIFrame-70331350848958" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="" frameborder="0" style="width:100%; height:915px; border:none;" scrolling="no"> </iframe>

Done! You now have a pop-up modal on your form.

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

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:
Contact JotForm Support:

Send Comment


  • dollar4dollar

    hey, i just switched to the new form design and my modal popup no longer works... how can i fix this

  • pgajrleague

    Jaymix asked the question on 4/23/2020 but I can't access the answer. It says unauthorized access. 1) I am trying to add multiple buttons with different text content on the same page. Is that possible?
    2) If not on the same page, can there be different pop-up modals on different pages with different text content?

  • FitzgeraldMD

    How to add a close button the feedback form link that sits on the side of the page?

  • Jaymix

    Hello. I'm not familiar with coding but I was able to understand the steps well. Can you give me an assitance as to the css code if I would like to have 2 pop-up in a page. What should I edit on the codes? Thank you.

  • HuttonSafetyGroup

    Is it possible for this pop up to occur automatically when someone opens the form (and then they must click close) on the JotForm Mobile Forms app?

  • cxc4u

    Never Mind!!
    With application of recently acquired knowledge I solved the issue... So I also needed to change the href link to a unique name and the div ID to the name chosen. Its that simple. There's so much I can do with this now

  • cxc4u

    This modal box idea is great... I have very little knowledge of coding but it was easy to follow the directions given. What I'd like is to add a couple of these on my form on different pages with different information. I tried to play around a but with the codes by changing the div ID (HTML) of the second modalBox and copy the codes below the original one with the adjustments to the ID. However when I test it it goes back to the first box. What can I do to fix this?

  • cxc4u

    I tried however, in the form designer I'm not allowed to paste the CSS code in the designated that because I'm using a mobile device?.

    Also, what if I need several of these pop ups on one form?

  • synk_admin

    This really ought to be turned into a native widget of jotform that can easily be applied and is not so poorly limited on the outcome. The way it is, it is super unfriendly and useless basically by 2018 standards. Especially for a longer form and one with conditions where this needs to be applied lower in the view of the form on an embedded page or on mobile devices with scrolling issues.

    please turn this into a functional widget with localized pop up modal.

  • pradnya


  • Beslutsexperiment

    This works perfectly for me when I have one pop-up image in my form. However, as I have conditional logic, I want the same pop-up to show on another page too but the button is unclickable on this second page. Does anybody know how to fix this?

  • txforesttrail

    I Love this. Is there a way to have the pop-up function based on radio button selection of a product in a payment form?

  • clubvolaria

    Hi, The text I used is much longer of the length of the mobile screen. How can allow the text to be scrolled?

  • juliacarere

    How can I make the pop-up the right size to fit on a Mobile Screen?

  • chafeitz

    How can i make the modal pop up when clicking on the next button?

  • MaidCrew

    Will this work even if the modal includes form elements OTHER THAN a text? Will it work with name, email & address elements? And if Yes, then are the modal element field values able to be included within the base form's submission data?