How to Add a Pop-Up Modal on your Form

Last Update: March 16, 2017

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: https://form.jotform.com/70331350848958  - by default needs to click buttons to open and close modal.

Embedded on an HTML web page: https://shots.jotform.com/charlie/pop-up-modal-form.html  - 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>

</div>

 </div> 

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;

opacity:0;

  -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 {

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 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.

Close: https://form.jotform.com/70331350848958#close

Open: https://form.jotform.com/70331350848958#open

 

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="https://form.jotform.com/70331350848958#open" 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. 



Send Comment