This article was originally published on this site

Do you want to create a popup registration form on your WordPress website?
A popup registration form is one of the best ways to entice your visitors to register on your site. That way you can prompt them to complete the registration from the same page they’re without having them to navigate to another page.
But how do you create a popup registration form without coding or designing skills?
Today, we’ll show you how to easily create a popup registration form with two powerful tools:

  1. WPForms
  2. OptinMonster

First, let’s have a look at what a popup registration form is and why you need one on your WordPress site.
Create a Popup Registration Form Now
What is a Popup Registration Form?
A registration form requires your site visitors to create a profile with their username, email, and password to access certain parts of your site.
Now, there are a few reasons you might need to add a registration form to your WordPress site.
To allow people to:

  • Create profiles for an eCommerce store
  • Signup for an online course
  • Join a membership site

Unfortunately, on most websites, the registration process is not always easy.
Maybe it’s slow or confusing. And if people get stuck, they will leave your site. Not to mention, a poorly designed registration process will cost you revenue.
On the other hand, a positive user experience sets your business apart.
That’s where a popup registration form comes in.
A popup registration form allows your site visitors to quickly register on your site without interrupting their browsing pattern.
It’s the easiest way for your site visitors to register or log into your WordPress site.
Today, we’ll create this popup registration form:
WordPress Popup Registration
WordPress Popup Registration

How to Create a Popup Registration Form in WordPress
In today’s tutorial, we’ll create a popup registration form in WordPress using WPForms and OptinMonster.

  • WPForms is the best form plugin for WordPress. With WPForms, you can add fully functional forms to your site without writing any code. And you get to choose from around 100 templates.
  • OptinMonster is the best popup builder for WordPress. OptinMonster’s drag and builder makes it’s easy for you to embed the registration form within the popup.

Below, we’ll walk through each of the steps you need to set up your popup registration form.
Create a Registration Form Using WPForms
Before we begin, you’ll need to install and activate the WPForms plugin.
Check out this article for step by step instructions on installing a WordPress plugin.
Once you have activated the plugin, click WPForms » Addons.
WPForms Addon menu
WPForms Addon menu

On the next screen, you’ll see the available addons.
Search for User Registration Form.
Click Install Addon.
WPForms User Registration Addon Install
WPForms User Registration Addon Install

The User Registration template comes with all the fields you need for a popup registration form:

  • Username
  • Email
  • Password
  • Short bio

Next, click WPForms »Add New.
Add New WPForm
Add New WPForm

You’ll now be in the form builder.
Find and select the User Registration Form template.
WPForms Builder User Registration Select
WPForms Builder User Registration Select

Now, you can customize your form by adding fields from the left side of the screen.
WPForms edit User Registration Form
WPForms edit User Registration Form

Next, click on the Password field on the form. Again, you’ll see the field options on the left side.
Add the code below in the description box of the Password field:

Now, you can display options like forget password or user login if the visitor already has an account.
WordPress popup code in WPForms
WordPress popup code in WPForms

After that, click Save at the top of the editor.
Then, select Embed.
WPForms Save User Registration Form WordPress
WPForms Save User Registration Form WordPress

Copy the code. We’ll need this code when we set up our popup in the next step.
WPForms Embed Code Registration Form WordPress
WPForms Embed Code Registration Form WordPress

Next, it’s time to head to OptinMonster to create and display your popup registration form.
Create Your Popup Registration Form
Now, we’ll create our popup registration form in OptinMonster.

Step 1: Create a Popup Campaign
First, head over to your OptinMonster dashboard.
Click Create New Campaign.
Create new OptinMonster campaign button
Create new OptinMonster campaign button

Choose Popup.
Choose OptinMonster Campaign Type
Choose OptinMonster Campaign Type

OptinMonster has over 50 templates to choose from.
The templates let you create plenty of different types of campaigns, like offering:

  • Content upgrades to users based on the articles they’re reading
  • Discounts to online shoppers for the products they’re looking at

All OptinMonster’s pre-built campaigns work beautifully across desktop, mobile, and tablet.
OptinMonster Campaign Templates overview
OptinMonster Campaign Templates overview

Today, we’ll go with Canvas.
Canvas lets you build your own campaign from scratch.
Choose Canvas template_
Choose Canvas template_

Name your campaign and assign it to your WordPress site.
Name OptinMonster campaign
Name OptinMonster campaign

Click Start Building to edit your popup.
Step 2: Design Your Popup Registration Form
Now, you’ll be in the campaign editor.
Customizing your popup in OptinMonster is easy.
You’ll see all the editing tools and blocks on the left.
Canvas in builder
Canvas in builder

To delete an element, simply click on it, and select delete.
Delete Canvas image block
Delete Canvas image block

Let’s delete the rest of the text on our form, too.
Delete Canvas text
Delete Canvas text

At this stage, you’ll have a completely blank canvas.
Blank canvas
Blank canvas

Now, we’ll add our embed code from WPForms.
Choose Blocks.
Now, drag the HTML block over to your form.
Add HTML block to WordPress popup Canvas
Add HTML block to WordPress popup Canvas

In the left-hand side menu, insert your shortcode.
HTML box for WordPress popup
HTML box for WordPress popup

The OptinMonster editor will now show this shortcode, but once your campaign goes live the form will appear.
Canvas WPForms code in popup-min
Canvas WPForms code in popup-min

Next, we’ll add a heading to our form.
Click Add Blocks from the top of your editor.
Add blocks
Add blocks

Simply drag and drop the text block onto your form.
OptinMonster Blocks Text
OptinMonster Blocks Text

Now, you’ll be able to add copy to your form. Simply click on your text to edit the copy from within the builder.
Inline text editor registration form in WordPress
Inline text editor registration form in WordPress

Next, click on the shortcode. This will pull the Editing HTML Element tools on the left.
Select Block.
choose html block_
choose html block_

Set the padding to the values below. This will center your form fields.
WordPress Popup Padding in OptinMonster
WordPress Popup Padding in OptinMonster

Next, we’ll style our popup registration form.
Step 3: Adding CSS to Your Login Form
Now, we’re going to add custom CSS to your registration form.
If you’re new to CSS, don’t worry. All you’ll need to do is copy and paste a few lines of code in your campaign editor.
Head over to the Home panel and click Display Settings.
Home Display Settings
Home Display Settings

Copy the below CSS:

Paste it into the field box.
CSS field in editor
CSS field in editor

Step 4: Display Your Popup Registration Form
Today, we’ll be using one of OptinMonster’s most powerful campaign triggers, Monsterlinks ™.
Lead Guru converted 81% of their site visitors using MonsterLinks.
Head over to Display Rules.
display rules
display rules

Find and select Monsterlinks™ (On Click).
OptinMonster Monsterlinks Display Rule
OptinMonster Monsterlinks Display Rule

Next, click Copy Monsterlinks Code. You’ll be able to place this code anywhere on your WordPress site to add a clickable registration link.
Copy Monsterlinks Button
Copy Monsterlinks Button

Finally, it’s time to publish your campaign.
Select Publish from the top of your editor.
On the publish screen, make sure the campaign status is Live.
OptinMonster publish ribbon
OptinMonster publish ribbon

On the next screen, make sure the status of your campaign is Live.
OptinMonster Publish Screen
OptinMonster Publish Screen

Now, all that’s left is to add your popup form to your WordPress site.
Step 3: Add User Registration Form to WordPress
Head over to your WordPress dashboard.
Click OptinMonster from WordPress.
OptinMonster in WordPress-min
OptinMonster in WordPress-min

You might need to refresh your campaigns if you don’t see your campaign here.
Refresh OptinMonster Campaign in WordPress-min
Refresh OptinMonster Campaign in WordPress-min

Once you see your campaign, click Edit Output Settings.
Edit Popup Registration Form Settings WordPress
Edit Popup Registration Form Settings WordPress

Under Who should see this campaign, click Show campaign to all visitors and users.
Edit output settings for WordPress Registration Popup
Edit output settings for WordPress Registration Popup

Finally, add your Monsterlinks link to your site.
You’ll now create a clickable registration link you can place anywhere on your site.
Now, your site visitors will see this popup when they click on the registration link:
WordPress Popup Registration
WordPress Popup Registration

That’s it.
Now, you’ve set up a super simple registration process on your WordPress site.
Create a Popup Registration Form Now
Now that you know how to use popups for easy user registration, you might also want to check out how they can boost your email subscribers.
Check out these articles for techniques that will add more subscribers to your mailing list:
Ready to use popups to grow your business? Get OptinMonster today.

Published by Bronwynne Powell
Bronwynne Powell is a writer for the web. Her background is in journalism, PR, and tech startups.  When she’s not writing, she’s running after her two young children or listening to supernatural podcasts.