How to Connect OptinMonster with WPForms

Do you want to manage your campaign form and submissions within WordPress? With a plugin like WPForms and OptinMonster’s Custom HTML integration, it’s easy! This walkthrough will show you how you can connect OptinMonster with WPForms – the Drag and Drop WordPress Builder.

wpforms-logo

Note: WPForms is a paid service however they do offer a 14-day refund policy for you to try their service.
Important: This guide is for WordPress websites only. If your website doesn’t run on WordPress, then you should consider other 3rd-Party Integrations.
This guide will utilize much of the knowledge one should already know after reading OptinMonster’s Shortcode Documentation. Please review that guide before proceeding any further.
  1. Create Your WPForms Form For Your Campaign
  2. Add OptinMonster Conversion Class to WPForms Submit Button
  3. Create Your OptinMonster Campaign
  4. Insert WPForms Shortcode
  5. See WPForms Campaign Live On Site
  6. [Optional] Styling Your WPForm Appearance

Step 1 – Create Your WPForms Form For Your Campaign

Before you create your campaign, the first thing you need to do is create your WPForms form. WPForms provides documentation on creating a form if you need assistance.

create-newsletter-form

Step 2 – Add OptinMonster Conversion Class to WPForms Submit Button

After you create your form, to ensure that you can track conversions, you need to add the om-trigger-conversion class to the Submit Button. In WPForms, this is easy.

Go to the Settings tab for your form. Scroll down to the field that says Submit Button CSS Class. Add the class om-trigger-conversion there.

add-om-trigger-conversion_to_wpforms

Save your form. You will return for the shortcode in a couple minutes so leave this window open for now.

Step 3 – Create Your OptinMonster Campaign

If this is the first time you’re creating an campaign, check out the Creating Your First Campaign guide before you go any further.

build-optin-in-optinmonster

After you design the look of your campaign, you need to add your shortcode from WPForms. Keep this window open for now and return to your WPForms window.

Step 4 – Insert WPForms Shortcode

To find your shortcode for your form, make sure you are currently editing the form you want to integrate with OptinMonster. On the top-right of the screen, beside the Save button, click the button titled Embed.

A modal window will popup that contains a shortcode. Copy that shortcode.

get-wpforms-shortcode

Next, go back to your OptinMonster Campaign window, go to the Integrations tab, choose the Custom HTML option, and then paste your WPForms shortcode in the text area that says Custom HTML Form Code.

add-wpforms-shortcode-to-optinmonster-optin

Click Save at the top right.

Step 5 – See Your Campaign Live On Your site

To test your campaign, you need:

  1. To know How to use WordPress Shortcodes with OptinMonster
  2. To have the latest version of OptinMonster API plugin
  3. Your OptinMonster Plugin to be both installed and activated
  4. To go to the plugin and click Refresh List. This is critically important to do every time you create or edit an campaign containing a shortcode.

If your campaign is Live in the OptinMonster plugin, you should now see your campaign appear on your site.

wpform-in-optinmonster-popup

Step 6 – Styling Your WPForm’s Appearance in OptinMonster (Optional)

As with any campaign using the Custom HTML integration option, you may wish to add CSS to control the appearance of the campaign’s contents.

You can easily add CSS to your campaign in the Campaign panel’s Custom CSS field.

Save any changes before returning to the front-end of your site to view the updated campaign.

That’s it, you’ve successfully added a shortcode to your campaign!

Looking for ways to increase your conversion rates? See our post on how to persuade people to subscribe to your list.