WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Create a Popup Feedback Form in WordPress

by Shahzad Saeed on Jul 13, 2017

Do you want to increase the visibility of your feedback form and encourage more form submissions? You can increase the visibility of your form by integrating your feedback form with a popup.

In this tutorial, we’ll show you how to create a popup feedback form in WordPress.

Why Create a Popup Feedback Form?

A few benefits of creating a popup feedback form are:

  • It encourages more form submissions: Using a popup is one of the best ways to boost form submissions because unlike other WordPress forms, popups can easily grab the attention of your visitors.
  • Your visitors don’t need to navigate away: Unlike other forms, visitors don’t need to navigate away to submit your popup forms. They can submit it on the same page.
  • Collect feedback entries in your dashboard: With the right setup, you can collect and organize all the feedback entries right in your WordPress dashboard.

WPForms lets you easily create any kind of form right in your WordPress dashboard, while OptinMonster is the best popup builder tool on the market. When a WordPress form is integrated with OptinMonster, you can create multiple types of popups such as lightbox popup, floating bars, slide-ins, etc. that are optimized for conversions.

Install WPForms and OptinMonster

Before we get started, you’ll need to install and activate two plugins: WPForms and OptinMonster.

After installing and activating WPForms plugin, you need to subscribe to OptinMonster’s Pro license. Upon subscription, install and activate the free WordPress plugin and then connect it with your OptinMonster account. For more details, you can learn how to install the OptinMonster WordPress plugin.

Create a Feedback Form With WPForms

Then, go to your WordPress dashboard and create a feedback form with WPForms.

In this form, we’ll be using the following fields.

  • Name
  • Email
  • How likely are you to recommend this product/company to a friend?
  • Feedback

See the screenshot below.

feedback popup form

For more details, you can see our tutorial on creating a simple contact form in WPForms.

Once you are done, you need to click on the Save button to store your changes.

Now that we have a feedback form ready, let’s move on to the next step and create a lightbox popup in WordPress.

Create a Popup Using OptinMonster

Now, log into your OptinMonster account and click Create Campaign.

click create campaign

Now you’ll be asked to select your campaign type. Choose Lightbox Popup.

choose lightbox popup

Now choose a campaign template. As we want to integrate WPForms with OptinMonster, let’s choose Canvas. The canvas template allows you to add WordPress shortcodes, HTML, CSS or JavaScript to your optin so you can integrate any type of forms with your popup.

use canvas template

If you want to know more about using canvas popup, read 9 unique canvas popups you can create with OptinMonster.

Now you’ll be prompted to name your popup. Let’s name it as Feedback Popup.

name lightbox campaign

Make sure to choose the right website for your optin campaign.

Also, set both Optin Cookie Duration and Optin Success Cookie Duration to 0. This will stop OptinMonster from setting duration cookies so that your form will remain visible to every visitor every time they click the link.

feedback popup setup

Now you’ll be directed to optin form builder. In the left taskbar, click on Optin and then choose the height and width of your canvas. By default, it is set to 700 x 350 px. Let’s set the height to 520 at least.

In the Canvas custom HTML box, you can enter your feedback form shortcode along with any other custom HTML you may want to add.

canvas custom html

Here is a sample HTML we used to create the modal popup for this tutorial. Make sure to replace the shortcode with your own form’s embed code.

<h3>Please Tell Us Your Feedback?</h3>
<p class="tagline">Simply fill out this form and let us know your comments. </p> [wpforms id="593"] 

To obtain the embed code for the feedback form you just created, go back to your WPForms builder, click on the Embed button at the top right corner. You’ll now see your embed code. Just copy it and replace the embed code placed in the above HTML.

embed code

Now we want to make sure that our popup is triggered only when a visitor clicked on a particular link or a button. To do this, go to Display Rules » MonsterLink and change the status to Active.

turn on monsterlink

If you want to set up your popup feedback form to appear with other triggers (such as after a certain number of seconds, or only on certain pages, or on exit intent when a visitor is about to leave your site), you can set that up here as well.

Now click Save on top right hand corner.

Publish the Popup on Your Site

Now return to your WordPress dashboard and click the OptinMonster menu. You’ll see a list of campaigns you created on your OptinMonster account. If you can’t see any, make sure to click Refresh Optins.

refresh optins

Click on the Edit Output Settings link below your optin. This will bring you to output settings for the popup.

click edit outuput settings

Now enable the optin by clicking the checkbox below Enable optin on site?

output settings for feedback popup form

Then, click Save Settings.

Add a Link to Trigger Feedback Form Popup

Now go back to the OptinMonster menu to copy your OptinMonster optin’s slug.

select optin slug

Create a new page in WordPress or edit a post or page where you want to add the contact form popup link or button. Add the following code, replacing the data-optin-slug with your own optin slug.

<a href="#" class="manual-optin-trigger" data-optin-slug="txgaducbrgdshyd9gljo">Feedback</a>

In the post editor, switch to text editor and add your popup link like this:

feedback popup form in text editor

Now publish the post or page.

That’s it! You’ve just published a feedback form popup on your WordPress site.

Want to learn even more from your website visitors? Check out these clever web form hacks to uncover hidden data.

What are you waiting for? Get started with the most powerful WordPress forms plugin today.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Comments

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.