How to Create a WordPress Popup Form

People are endlessly creative when it comes to website design, and that creativity even extends to pop-ups. If you’ve ever felt yourself getting jealous over someone else’s elegantly-styled pop-up form, you’re not alone.

Of course, pop-ups aren’t just for looks. They can be incredibly useful to you and your business. In fact, the average conversion rate for pop-ups is 3.09%. Once you know how to build and customize one (which is quite simple), you’ll be able to create pop-up forms for a variety of tasks.

Today, we’ll explain why you might want to have a pop-up form on your website, and discuss a few things to keep in mind before you start building one. Then we’ll show you how to create a contact form using the Popup Maker and WPForms plugins. Let’s get started!

Why You Might Need a Pop-Up Form on Your Website

A well-placed pop-up form can help encourage readers to sign up for your newsletter. You can even include your lead magnet in a pop-up for easy downloading.

You may also want to place your contact form in a pop-up. Visitors may be more likely to reach out to you with questions if they’re provided with a well-timed and convenient way to send an email.

If you run a membership site, pop-up forms also work well for required logins. Your members won’t have to search for a login field when they want to access your exclusive content.

What to Consider When Adding a Pop-Up Form

Pop-up forms sometimes get a bad reputation for being intrusive and annoying. Still, if they’re thoughtfully designed, they can be helpful to your users. It’s a good idea to match the styling of your pop-up to your theme. You’ll also want to target your campaigns at visitors who will welcome them.

Depending on what you want your pop-up to do, you may also need a form builder. Contact Form 7 and WPForms are both solid choices. You’ll need to make sure your form builder works with your chosen pop-up plugin.

The plugin we’ll use today, Popup Maker, integrates with a variety of form builder solutions. However, you’ll also want to be sure the plugin you choose is supported by your website’s theme. LyraThemes has multiple options that integrate with popular form builders, and can be easily styled to match your forms.

How to Create a Pop-Up Form on Your WordPress Website (In 6 Steps)

Before you get started with building your pop-up form, there are a few plugins you’ll need to install. You can use Popup Maker to create your pop-up, and then build your form using WPForms.

Step 1: Create a New Pop-Up

Your first step will be to create a fresh pop-up. From your admin dashboard, select Popup Maker > Add Popup:

Give your pop-up a name. This won’t be seen by your visitors, so don’t worry about being catchy or creative. Instead, it’s best to use a name that’s descriptive and will be meaningful to you.

Step 2: Set Your Display Triggers

You’ll find a Triggers tab under the pop-up settings. The pop-up’s triggers determine when it will display:

You have a few choices when it comes to what trigger you’d like to use:

Time delay/auto open: The pop-up displays after a specified length of time.
Click open: A visitor clicking on a link or button will cause the pop-up to open.
Form submission: This causes the pop-up to appear when a subscription form is submitted.

In the next step, you can make sure the pop-up only appears for the visitors you want to target.

Step 3: Choose Your Targets

By default, the pop-up will display on every page of your site, so long as the trigger condition is fulfilled. Since it’s unlikely you want to bombard your visitors that way, you can set targets to control who sees the pop-up and where.

You can base your targets on several parameters. For example, you can control who sees the pop-up based on content, such as by selecting particular tags or categories. If you’re building a very specific pop-up, you can set it to appear only on particular posts:

For example, if a post contains information about how valuable your email list is, you may want to include a pop-up on that page. You’ll have generated excitement with your article, and users can easily take the next step and sign up for your newsletter.

There are also times when you may want to prevent a pop-up from appearing. For example, a pop-up designed for desktops probably won’t look great on a mobile device. Therefore, you can set a target that prevents that element from opening on smaller screens.

Once you’re used to building forms, you may want to explore more advanced targeting options. These include showing pop-ups only to visitors who have viewed a certain number of pages, or those who are using a specific browser. A premium advanced targeting conditions plugin is available if you’d like to add this functionality to your pop-ups.

Once your new pop-up has its triggers and targets set, click on Publish. This will cause a Preview button to appear, so you’ll see what your pop-up looks like as you add content and styling:

At this point, your pop-up will look a bit underwhelming. In the next steps, however, we’ll show you how to build your form and add it to your pop-up.

Step 4: Create Your Form

First, you’ll need to create your form. WPForms includes plenty of templates to get you started. You can also upgrade to get access to more arrangements, or start from scratch by building your own:

Depending on what you want your form to do, you may need to add or remove some fields. To do this, you can use the drag-and-drop form builder. There are many fields to choose from, listed in the panel on the left:

There are also some additional settings that you can configure, based on what you want your form to do and your own personal preferences. For example, you can choose to receive an email each time the form is submitted. When you’re satisfied with your form, click on Save.

Step 5: Add Content to Your Pop-Up

Now we’ll show you how to embed your form into your pop-up. From the WPForms builder, click on the Embed button, and then select use a shortcode:

Navigate back to your pop-up form and paste your shortcode into the content box:

Click on Preview and check to ensure that the form is displaying correctly. It won’t look pretty yet, but you can add some styling in the final step.

Step 6: Adjust the Display Options

When designing your pop-up, you’ll start with several included presets, which you can then adjust to your liking. These presets can be found in the Display tab under the pop-up settings:

Once you have your preset picked out, there are a few parameters you can customize:

Appearance: Choose any of the preinstalled or custom themes for your pop-up.
Size: Select a size relative to the screen for the pop-up, or input a custom size.
Animation: Pick an animation and speed for when the pop-up closes.
Sounds: Choose a sound to play when your pop-up opens.
Position: Calibrate where on the screen you’d like the pop-up to appear, based on an anchor point.

It’s worth noting that our own themes not only support the most popular form-building plugins, they also make it simpler to match the style of the form to your theme.

You may want to set the pop-up to close once a user has submitted the form. You can do this from the Close tab:

Check the box next to Close on Form Submission. You can also add some alternate closing methods for your pop-up. Providing a few ways to clear this element away can ensure that your site stays user-friendly.

Conclusion

You don’t have to be a web designer to be able to create a pop-up form that converts effectively, and fits into your website’s style. By starting with a powerful theme and learning to use Popup Maker and WPForms, you should be well on your way to a perfect pop-up.

In this post, we guided you through six steps to building a pop-up form for your WordPress site: