How to Connect OptinMonster with WPForms

Are you wanting to easily create forms in WordPress and connect them to OptinMonster? Do you have WPForms and want to learn how you can use OptinMonster to target and convert your web visitors into customers? This walkthrough will show you how you can connect OptinMonster with WPForms – the Drag and Drop WordPress Builder.

wpforms-logo

IMPORTANT NOTE: This guide is for WordPress websites only. If your website doesn’t run on WordPress, then this guide will not be helpful for you and you should consider other 3rd-Party Integrations.

Before we get started, 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 Optin
  2. Add OptinMonster Conversion Class to WPForms Submit Button
  3. Create Your OptinMonster Optin
  4. Insert WPForms Shortcode
  5. See WPForms Optin Live On Site
  6. [Optional] Styling Your WPForm Appearance

Step 1 – Create Your WPForms Form For Your Optin

Before you create your optin, 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 Optin

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

build-optin-in-optinmonster

After you design the look of your optin, 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, you will see a button titled Embed. Click that button.

A modal window will popup. It will contain a shortcode. Copy that shortcode.

get-wpforms-shortcode

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

add-wpforms-shortcode-to-optinmonster-optin

All done, click Save at the top right.

Step 5 – See Your Optin Live On Your site

To test your optin, 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 optin containing a shortcode).

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

wpform-in-optinmonster-popup

[Optional] Step 6 – Styling Your WPForm’s Appearance in OptinMonster

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

You can easily add CSS to your optin in the Optin panel’s Custom CSS field.

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

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