How to Create a Pop-up Form in WordPress

We often need to accomplish more when we only have room for a button in our design.

So, how do we make the most of it?

Easy. Pop-up forms. 

They offer the flexibility to fit in the necessary fields for lead capture and throw in a great copy or a heartfelt message when you only have space for a button.

What’s more, they’re even great for maximizing your conversion rates, sales, and ROI.

Use case

Creating beautiful and responsive pop-up forms in WordPress. 

Click the button below to see the amazing pop-up form template we’ll learn to create in the next few seconds.

How to Create a Pop-up Form in WordPress

In this blog, we’ll show you how to create a pop-up form in WordPress using Fluent Forms, the smartest WordPress form builder plugin.

Step 1

From your WordPress dashboard, go to Fluent Forms > New Form > Add New Form. Add the necessary fields and click Save Form.

This is the form we created using a two-column container, a name field, an email field, and a custom HTML field. You can go with your desired fields.

If you want to style your form, simply go to Preview & Design and customize it as you like.

Step 2

Copy the shortcode of the form.

Step 3

Go to the page where you want the pop-up form. Select a shortcode block. Paste the shortcode of the form. Slightly modify it to make it a pop-up form. 

Instead of fluentform id=”102″, write fluentform_modal form_id=”102″ inside square brackets.

Step 4

Now, we will show you how to change the button text and style of your primary button.

Paste this in your shortcode block.

Edit Join Us here to type your desired button text. Save the draft and publish/preview your page.

Step 5

Click View Page. Select Customize.

Select Additional CSS from the sidebar.

Apply CSS here to the previously defined class to customize the button background and text color, border weight, border radius, padding, alignment, and more!

Your pop-up form is now published to your liking!

Note the design best practices we implemented in this pop-up form:

1. We kept the form on the right side and the design elements on the left. This way, if your users are moving the cursor with their right hand, the form feels more accessible.
2. The complementary design elements point towards the form, further motivating your users to fill it out.
3. Readability is maintained throughout the form, increasing accessibility.
4. The fields are in perfect alignment, making the overall look of the form pleasant.
5. The fresh flowers will make your visitors feel welcome.

If you want to use this pop-up form, just leave a comment!

You can also use plain color in the background of your pop-up form. To change the background color, add this attribute at the end of your shortcode and edit red to insert your desired color or its Hex code. fluentform_modal form_id=”102″ btn_text=”Click Me” css_class=”myClass myClassAgain” bg_color=”red”. Remember to paste the code inside the square brackets.

Below is another pop-up form example for you.

If you want to use pop-up builders like Popup Maker or Elementor Popup, you just need to add the Fluent Forms shortcode inside the pop-up builder.

Related features

Advanced form styler

Easily customize the look and feel of your forms with Fluent Forms’ advanced form styler. Change the background color, text color, margin, border style, border radius, shadow, placeholders, labels, buttons, and more without any coding knowledge!

Conversational forms

Create forms that feel like a conversation with Fluent Forms’ conversational forms. Your customers can answer one question at a time, which offers them a fun and delightful form-filling experience.

Multi-step forms

Break down your long forms into multiple short steps using our multi-step forms. Filling out long forms can be exhausting. With step forms, users can easily fill out part of a form and save their progress. This way, they can easily pick up where they left off. Moreover, the multi-step form also shows a progress bar on top that shows users how close they are to completing the form.