How to Trigger an OptinMonster Campaign From a Form Submission

Introduction

Would you like to automatically trigger an OptinMonster campaign from a form submission? You can easily create your form and have it not only trigger the campaign but also pre-fill in any fields such as name and email address from the form to the campaign to help save time. In this tutorial, we’ll show you how you can achieve this using a snippet.

Creating the form

To begin, we’ll create a new form and add our fields to it. For the purpose of this tutorial, our form will only contain the Name and Email Address fields.

If you need any assistance in creating your form, please check out this documentation.

Setting up the OptinMonster campaign

Now it’s time to create an OptinMonster campaign. To create your campaign specifically for this tutorial, please follow these steps.

1) Creating the campaign

If this is your first time creating a campaign you can get started following this guide.

2) Adding the MonsterLink

Next, in the campaign builder add MonsterLink as a Display Rule to show the campaign only on click.

3) Publishing the campaign

If you are using the OptinMonster WordPress plugin to manage your campaigns, be sure to Publish the campaign from the WordPress admin » OptinMonster » Campaigns.

(Optional) Configuring the Output Settings

You can configure the Output Settings in the OptinMonster plugin to embed this campaign only on the page(s) where your WPForms form will appear.

Foor the purpose of this tutorial, we won’t be limiting any page for this to display. However, for further information on this topic, please check out their documentation.

Adding the snippet

Now it’s time to add the snippet to your site. If you need any help in where and how to add snippets to your site, please review this tutorial.

/*
 * Trigger Optinmonster campaign from a WPForms submission
 * 
 * @link https://wpforms.com/developers/how-to-trigger-an-optinmonster-campaign-from-a-form-submission
 */

function trigger_om_campaign_from_wpf() {

	// The WP Form ID. 
	// Find the form ID by following this tutorial: https://wpforms.com/developers/how-to-locate-form-id-and-field-id/
	$form_id = 519;

	// The OptinMonster campaign slug.
	$campaign_slug = 'kofeog6veaiogw1gefbb';

	// The field ID for the name field.
	// Find the field ID by following this tutorial: https://wpforms.com/developers/how-to-locate-form-id-and-field-id/
	$name_field = 0;

	// The field ID for the email field.
	// Find the field ID by following this tutorial: https://wpforms.com/developers/how-to-locate-form-id-and-field-id/
	$email_field = 1;

	if ( empty( $_POST[ 'wpforms' ][ 'complete' ] ) ) {
		// Bail if a WP Form was not submitted.
		return;
	}

	if ( $form_id !== (int) $_POST[ 'wpforms' ][ 'id' ] ) {
		// Bail if not correct WP Form.
		return;
	}

	$entry = $_POST[ 'wpforms' ][ 'complete' ];
	$email = '';
	$name  = '';

	// WPF name field submitted value.
	if ( ! empty( $entry[ $name_field ][ 'value' ] ) ) {
		$name = sanitize_text_field( wp_unslash( trim( $entry[ $name_field ][ 'value' ] ) ) );
	}

	// WPF email field submitted value.
	if ( ! empty( $entry[ $email_field ][ 'value' ] ) ) {
		$email = sanitize_text_field( wp_unslash( trim( $entry[ $email_field ][ 'value' ] ) ) );
	}
	?>
	<script type="text/javascript">
		// Wait until OM campaign is ready.
		document.addEventListener( 'om.Campaign.init', evt => {

			// Make sure we are on the right campaign.
			if ( '<?php echo $campaign_slug; ?>' !== evt.detail.Campaign.id ) {
				return;
			}

			// Setup an event listener for
			document.addEventListener( 'om.Form.init', evt => {
				if ( '<?php echo $campaign_slug; ?>' !== evt.detail.Campaign.id ) {
					return;
				}

				document.getElementById(evt.detail.Campaign.ns + '-field-name').value = <?php echo json_encode( $name ); ?>;
				document.getElementById(evt.detail.Campaign.ns + '-field-email').value = <?php echo json_encode( $email ); ?>;
			} );

			evt.detail.Campaign.startShow();
		} );
	</script>
	<?php
}
add_action( 'wp_footer', 'trigger_om_campaign_from_wpf' );

There are four edits you’ll need to make to this snippet work on your site.

• $form_id = 519; – This is the form ID from WPForms that we’re targeting. This means that this snippet will only run on the form with the ID of 519. To find your form ID, please see this tutorial.
• $campaign_slug = 'kofeog6veaiogw1gefbb'; – This is the OptinMonster campaign slug.
• $name_field = 0; – This is the field ID for the Name field that we added to our form. This means that this snippet will take what the user entered on the form for name and automatically pass it through to the OptinMonster campaign. To find your field ID for this field, please see this tutorial.
• $email_field = 1; – This is the field ID for the Email field that we added to our form. This means that this snippet will take what the user entered on the form for email and automatically pass it through to the OptinMonster campaign. To find your field ID for this field, please see this tutorial.

Once you’ve updated the necessary lines in the snippet and saved it to your site, anytime the form is completed it will automatically trigger the OptinMonster campaign and pre-fill in the Name and Email fields.

And that’s all you need to trigger an OptinMonster campaign from a form submission! Would you like to add a print link so that your visitors can print the form to complete manually? Check out our tutorial on How to Add a Print Link to Your Forms.

Related

Action Reference: wp_footer