Creating Popup Forms With OptinMonster

Would you like to add a WordPress form to a popup on your site? Displaying a form in a popup can be a great way to generate more leads and drive more sales for your business.

In this tutorial, we’ll show you how to create a popup form with WPForms and OptinMonster.

  1. Installing OptinMonster
  2. Creating a Form
  3. Creating a Popup in OptinMonster
  4. Embedding the WPForms Block
  5. Publishing Your Popup Form
  6. Frequently Asked Questions

Before getting started, ensure WPForms is installed and activated on your WordPress site.

1. Installing OptinMonster

To begin, install OptinMonster, a powerful WordPress plugin for creating popups and other marketing solutions.

Go to Plugins » Add New, then search for the OptinMonster plugin in the search bar.

Search for the OptinMonster plugin

Next, click the Install Now button to install the plugin.

Click install now OptinMonster

Once you’ve installed the OptinMonster plugin, click Activate to enable the plugin.

Activate OptinMonster

Note: For extra help, be sure to check out WPBeginner’s guide to installing WordPress plugins.

Connecting Your Site to OptinMonster

When you activate the OptinMonster plugin, you’ll be prompted to connect your site to OptinMonster via the setup wizard. If you have an OptinMonster account, click Connect Your Existing Account to continue.

The OptinMonster setup wizard

Note: If you don’t have an existing account, click New? Claim Your Free Account to set up a new account. For more information about OptinMonster and its available features, check out the OptinMonster pricing page.

In the new dialog that appears, click Connect To WordPress.

Connect OptinMonster to WordPress

OptinMonster will automatically connect to your site as soon as you log in.

OptinMonster connected

2. Creating a Form

Now that you’ve got OptinMonster installed, it’s time to set up your popup form. To get started, go ahead and create a new form.

For this example, we’ll create our form with the simple contact form template. To do this, go to WPForms » Add New. Then, select the simple contact form template by clicking the Use Template button.

Simple contact form template

This will take you to the form builder, where you can add additional fields by dragging and dropping them into the form preview area.

Drag and drop fields

To remove a field from your form, hover over it and click the red trash icon.

Delete field in form builder

Once you’re done editing your form, be sure to click the Save button to save any changes.

Save form changes

After you’ve saved your form, further customizations are available in the Settings tab.

Form settings tab

If you’d like to receive an email when your form is submitted, check out our guide to setting up form notifications. You can also set up confirmation settings for your form if you’d like.

Note: Some WPForms fields are incompatible with OptinMonster popups. We recommend previewing and testing your form in your popup before releasing it live on your site.

3. Creating a Popup in OptinMonster

Now that your form is ready, you’re ready to start creating a popup. To get started, go to OptinMonster » Campaigns and click Add New.

Add a new campaign in OptinMonster

This will bring you to the Templates screen. By default, OptinMonster will select Popup as the Campaign Type.

The Campaign Type selected as PopupChoose a popup template from any of the available categories, or enter the search term that most closely matches your intended style.

Select a popup template in OptinMonster

Select the template you want to use, then click the Use Template button.

Click the Use Template button

Then, choose a name for your campaign in the Create Campaign dialog, and click the Start Building button to move on to customizing your popup.

Add popup campaign name and start building

Next, your popup will open in the OptinMonster app, where you can customize your campaign as you like.

Editing a campaign in the OptinMonster app

Note: For more information on working with campaigns in OptinMonster, check out their documentation on designing campaigns.

4. Embedding the WPForms Block

To add a form to your OptinMonster popup, find the WPForms block in the sidebar on the left. You can also search for WPForms in the search box.

The WPForms block in OptinMonster

Now, click and drag the WPForms block to the area of your popup where you’d like it to appear. Then, select the form you previously created in the Form Selection dropdown list.

Selecting a form

Note: If you don’t see your forms in the dropdown list, be sure to check that you’ve connected your site to OptinMonster.

When you’re done setting up your popup, click the Save button to apply your changes.

Click the OptinMonster save button

5. Publishing Your Popup Form

Now that your popup is all set up, it’s time to publish it. To do this, you’ll first need to click the Publish tab.

Click on the Publish tab

Then, click on the Publish button under Publish Status.

Click Publish in Publish Status

Now your popup will be live on your site.

Previewing Your Popup Form

If your popup hasn’t been published, follow the steps to publish your form, then click the Preview button.

Click preview to view the popup

Note: Previews are only available after your popup has been published at least once.

This will load your site in a new tab and show your popup with the embedded form.

Previewing the form

If you’re not ready for this popup to be live, be sure to reset its Publish Status to Draft once you’ve finished previewing.

Note: If you attempt to preview your OptinMonster campaign in draft mode, you’ll see the WPForms shortcode instead of the entire form. This is normal and expected behavior. You’ll need to publish your campaign to see the whole form.

6. Frequently Asked Questions

Below, we’ve answered some of the top questions about creating a popup form in WPForms.

I’ve changed which form is used in my popup, and now I only get a shortcode. What do I do?

If you’ve changed which form your popup displays, you’ll notice that the preview method above no longer appears to work. Instead, when you preview your popup, you’ll only get the shortcode for your form.

The popup only displaying the shortcode for the form

To fix this, you’ll need to temporarily change your Campaign’s Publish Status. For example, if your Publish Status is set to Draft, change it to Publish.

Click Publish in OptinMonster

Your form will be refreshed and loaded correctly within your OptinMonster popup. If you’re not ready for your popup to be live, be sure to check that your Publish Status is set to Draft when you’re done previewing.

That’s it! Now you know how to create a popup form with WPForms.

Next, would you like to test out your forms before you publish them? Our complete form testing checklist will walk you through the process step by step.