How to Create a Modal Popup Form With Gravity Forms

Do you want to add a modal popup form to your WordPress site easily?

Modal popups are the best solution if you want visitors to engage with the popup before getting back to their original browser.

In this article, we’ll show you the best way to create a modal popup form in WordPress that will increase engagement and conversions.

Should You Use a Modal Popup Form?

Popups help draw the attention of a visitor to prompt them to take action on your site. This could be creating an account, signing up for email alerts, purchasing a product, and other such actions.

Usually, popups have a close button or an ‘X’ icon that gives the visitor an option to exit the popup without taking any action.

However, sometimes you may want the user to interact with the popup, and only then let them exit the popup and proceed. This is where modal popup forms come in.

With a modal popup, you can show stunning offers as the background fades out in order to grab your visitors’ attention. The visitor will need to enter details after which the popup will close and they can get back to what they were doing.

Some of the things you can use the modal popup form for include:

  • Subscriptions – Collect email addresses to grow your email list.
  • Feedback and surveys – Gather feedback from your visitors to improve your user experience, product, or service.
  • Requests and complaints – Get details of what the customer needs or any complaints they need to be resolved.
  • Contact info – Collect details of your visitors so you can contact them later.

The possibilities are plenty but since the modal popup form can’t be closed without action from the visitor, it needs to be used at the right place and at the right time in order to be successful in serving its purpose.

Today, we’re going to show you how to create a well-designed and well-placed modal popup form that can help increase conversions and sales at incredible rates.

For the sake of this tutorial, let’s create a Gravity Forms popup that displays when someone clicks on a button or a link.

modal popup example

Creating a Modal Popup Form

There are many ways to create a modal popup form, but we’re covering the easiest way to get it done. To get started, you’ll need to install and activate two WordPress plugins:

    1. Gravity Forms

Gravity Forms homepage

Gravity Forms is one of the best WordPress form builders that you let you create all sorts of forms for your site. It has an easy drag and drop builder to design the form. You can also preview and test the form as you create it.

We’ll use this plugin to first create the form. If you’re using another form maker like WPForms, you can use that too.

    1. OptinMonster

OptinMonster homepage CTA

OptinMonster is hands down the best popup maker and lead generation tool. It lets you capture more leads and increase conversions through stunning modal popups, lightbox popups, slide ins, banners, and floating bars.

Plus, it comes with over 100+ templates that you can use to create a popup in 5 minutes without any technical knowledge needed.

Once the two plugins are activated on your site, we can get started.

Get Started With a Modal Popup Today!

Step 1: Create a Form With Gravity Forms

The first thing you need to do is create the form that you’ll add to the modal popup.

From your WordPress dashboard menu, visit Gravity forms by selecting Forms » New Form and you’ll see a popup that prompts you to enter a title and description for your form.

Create new form in Gravity Forms

Once you’ve filled in the details, hit the ‘Create Form’ button to open up the form editor page. Here, you can build your form by dragging and dropping fields from the menu on the right.

For this tutorial, we’ll create a simple contact form. From the ‘Advanced Fields’ menu, we’ll add name, email address, and phone fields.

create contact form in Gravity Forms

We’ll also add a comments section so the visitor can enter any extra details like what they are looking for.

To do this, from the ‘Standard Fields’ menu, drag and drop the Paragaph Text field into your form editor. This will open a field editor where you can add a title for the field such as ‘Comments’.

Add comments field gravity forms

If you want to add placeholder text inside the field such as ‘Enter your comments here’, switch over to the Appearance tab. Here, you can enter the placeholder text and also change the field size if you want to increase or decrease the box provided.

comments placeholder gravity forms

Like this, you can add and customize as many fields as you like to create your own form. And you can use the ‘Preview’ button from the top menu to see what the form will look like when it’s live.

preview update gravity forms

When you’re happy with your form, hit the ‘Update’ button to store your changes.

Change Confirmation of Form Submission

Since you’re creating a modal form, you’ll need to set what happens after the user submits the form.

Gravity Forms lets you display a text message, take the user to a new page, or redirect them to a specific URL once they submit the form.

To customize what happens after form submission, you’ll need to visit the Settings » Confirmations tab. Here, you can add a text message, select a page on your site, or enter a specific URL of your choice.

change confirmation gravity forms

When you’re ready, click on the ‘Save Confirmation’ button and then preview your form. You can test out your form by filling and submitting it to see if your settings work fine.

Change Notifications of Form Entries

While you’re on Gravity Forms, you can also change how you want to receive the form submissions. You’ll need to switch to the Notifications tab, and here, you can change the email address, as well as the subject name and message to be sent.

edit notifications gravity forms

This is especially helpful if you want the emails to go to a separate email address or a certain member of your team.

Copy Form ID

After you’ve updated the notifications, you need to fetch your form ID. While editing or previewing your form, the form ID is always displayed at the top of the page.

form id gravity forms edit page

You can also find the ID in the Forms » Forms tab. Here, you’ll see a list of the forms you’ve created using Gravity Forms. Next to the title of your form, you’ll see a column called ‘ID’ with the ID number.

form id gravity forms

Copy this ID and keep it ready as you’ll need it in the next step. Now, you’re ready to move on to OptinMonster to add the form to a modal popup.

Step 2: Create a Modal Popup With OptinMonster

OptinMonster has a drag and drop visual builder that makes it easy for anyone to create a modal popup.

To get started, open OptinMonster from your WordPress dashboard and create a new popup.

popup campaign optinmonster

You’ll see a list of all the templates available. Since we already have a form we want to embed, we’ll select the Canvas template which lets you start from scratch.

canvas template om

Next, you need to enter a name for your campaign, then select the ‘Start Building’ button and a popup editor will open.

In the popup edit screen, you’ll need to click on the ‘Add Blocks’ button to get a menu of blocks. From here, drag and drop the HTML block into your popup.

add html block OptinMonster

Now, you’ll need to use this shortcode with the form ID you noted down earlier from Gravity Forms.

[gravityforms id=”1″]

In the HTML editor on the left panel, delete the text ‘Add HTML here.’ and paste the shortcode in its place. Remember to replace the number 1 with your form ID.

edit html shortcode

You can also customize the shortcode further to include or exclude the title and description.

[gravityforms id=”1″ title=”true” description=”false”]

To translate the code, ‘true’ tells it to display while ‘false’ means do not display. So in the shortcode example above, the form title will appear while the description will be hidden.

After this, clean up the popup design by selecting the other default blocks in the popup and use the trashbin icon to delete them.

trashbin icon optinmonster

Now, you’ll need to convert this regular popup into a modal popup. To do so, exit the block settings menu by clicking on the Design tab and go back to the main menu.

close button in optinmonster

Now, select Optin Settings » Close button tab and use the toggle switch to hide the close button on the popup.

Once again, go back to the previous menu and select Popup Settings and turn off the ‘Close on background click’ option.

close background on click optinmonster

Once that’s done, we recommend using the Save button to store your changes. Now, the modal popup is set up and ready to be customized.

Step 3: Customize the Popup

If you’d like to make your modal popup form more interesting, you can add more blocks such as a title and an image.

Using the ‘Add Blocks’ option, you can drag and drop more blocks into your popup. First, we’ll add a text block to give our popup a title.

When you enter and select the text, you’ll see a text editor bar appear above the block that lets you customize the font size, color, and format.

text editor in om campaign

Next, we’ll also add a background image just to give it some color. Select the popup and it will open the ‘Optin Settings’ menu on the left panel. Here, you can add an image from your media library or upload a new one.

replace image optinmonster campaign

OptinMonster has a ton of customization options so you can build a stunning modal popup.

Once you’re happy with the popup design, you can move on to the next step where you’ll control when and where the popup is displayed.

Step 4: Set Display Rules for the Modal Popup

The timing and placement of your modal popup can make a huge difference in how well it performs.

By default, the popup you created will appear on any page if the visitor spends at least 5 seconds on the page.

To change this, go to the OptinMonster » Display Rules tab. Here, you can set new conditions for your popup by selecting the dropdown menu that says ‘time on page’.

time on page optinmonster

Now, you’ll get different options such as:

      • Exit Intent® – Displays the popup when a visitor is leaving your site.
      • New visitor – Displays the popup only to people visiting your site for the first time.
      • MonsterLink™ – Lets you open the popup when the visitor clicks on a link, button, or image.
      • Returning visitor – Shows the popup only if they are not new to your site.
      • Physical Location – Lets you show the popup to people from a specific area.
      • Page Targeting – Makes the popup appears only if the visitor lands on a specific page.
      • Referral Targeting – Shows the popup if a visitor is coming from a specific site.

There are other options that you can explore or you can use the default settings, but since modal popups usually appear on click, we’ll select the MonsterLink™ option.

display rules monsterlink on click

When you choose this option, a MonsterLink™ code will be generated for you. You need to copy it by clicking on the green ‘Copy MonsterLink™ Code’ button and keep this link ready for the next step.

Now your display rules are set and your popup is ready to be published.

Step 5: Publish the Modal Popup Form

To make your form live, on the OptinMonster dashboard, you’ll need to switch to the ‘Publish’ tab.

You’ll see three statuses available which are ‘draft’, ‘publish’, and ‘schedule’. You can change the status to ‘Publish’ and then save your changes.

publish campaign optinmonster

To make sure your campaign has been published, visit OptinMonster » Campaigns tab from your WordPress dashboard.

publish status optinmonster

The status should show that it’s ‘Published’ in green text. If you see that the status is in ‘Draft’ or ‘Pending’ mode, click on it to get a dropdown menu and then select ‘Publish’ to make the modal popup live.

Step 6: Add the Popup Form to Your Site

You can easily add the modal popup form to any text or button in WordPress. We’ll show you how to add it to a button, link, and WordPress menu.

Add MonsterLink™ to a Button and Link

If you want the popup to appear when a visitor clicks on a button or a link on your site, first, you need to edit the page or post where you want to add the popup.

In the block editor, you can choose the button and you’ll see a block settings menu bar appear above it. Here, click on the link icon to open up the URL field and you can paste the MonsterLink™ inside.

add monsterlink to button

In the same way, you can highlight any text in the page or post, and then use the link icon to open up the URL field where you can paste the MonsterLink™.

After you’ve done this, you can preview your post to see how the popup appears on click. Once you’re happy with it, publish or update your page or post to make it live.

Add MonsterLink™ to a WordPress Menu

Modal popups work well when added to WordPress menu bars. Since we created a contact form, we’ll add it to the ‘contact’ menu item.

First, you need to visit the Appearance » Menus tab. Then, select ‘Custom Links’ and a dropdown menu will appear where you can enter a URL and link text.

add monsterlink to menu

You’ll need to paste the MonsterLink™ inside here and add link text according to your popup campaign. We’ve added ‘Contact’ as that’s the purpose of our modal popup form.

Once you’ve filled out the fields, select the ‘Add to Menu’ button at the bottom of the editor, and then Save your menu.

Now, you can visit your homepage and click on the ‘Contact’ menu item and the modal popup form will appear.

modal popup example

View Your Modal Popup Form Submissions

Every form submission is recorded and stored as Monster Leads in your OptinMonster dashboard.

To view these entries, go to the OptinMonster » Subscribers tab. From here, you’ll be redirected to the Leads tab on the OptinMonster dashboard.

optinmonster leads

In this tab, you’ll get a list of the subscribers’ names, email addresses, and dates. If you want to view more details of each entry, you can use the Actions menu to access that.

Optimize Your Modal Popup Campaign

Modal popup forms can be tricky as there’s no option to exit without filling out the form. How do you know if the popup is performing well or not?

Since you’re using OptinMonster, you don’t have to run your campaign in the dark. It’s loaded with data analytics that shows you how your campaign is performing.

To view your campaign’s performance, first, go to OptinMonster » Campaigns tab and you’ll see a list of the campaigns you’ve created.

analytics in OptinMonster

Now, select the analytics icon under the Actions menu and you’ll see your campaign’s statistics.

It shows you how many people have interacted with your popup. You can also check which pages or links lead to the highest conversions.

This way, you can find out where the popup works and where visitors are not interested.

With that, you have everything you need for a successful modal popup form!

We hope this article showed you how to create and use a modal popup form on your site.

Get Started With a Modal Popup Today!

If you liked this post, then you may also be interested in learning more about

Melinda is a writer with 12+ years of experience in Digital Marketing and SEO. Over the years, she's contributed to and managed 15 different blogs and websites. When she's not writing, you'll find her working in animal rescue & welfare, and spending time with her dogs and her big fam!

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.