Comment déclencher une campagne OptinMonster à partir de la soumission d'un formulaire ?

Introduction

Souhaitez-vous déclencher automatiquement une campagne OptinMonster à partir de la soumission d'un formulaire ? Vous pouvez facilement créer votre formulaire et faire en sorte qu'il ne déclenche pas seulement la campagne mais qu'il pré-remplisse les champs tels que le nom et l'adresse email du formulaire vers la campagne pour vous faire gagner du temps. Dans ce tutoriel, nous allons vous montrer comment vous pouvez réaliser cela en utilisant un snippet.

Création du formulaire

Pour commencer, nous allons créer un nouveau formulaire et y ajouter nos champs. Pour les besoins de ce tutoriel, notre formulaire ne contiendra que les champs Nom et Adresse électronique.

Si vous avez besoin d'aide pour créer votre formulaire, consultez cette documentation.

Mise en place de la campagne OptinMonster

Il est maintenant temps de créer une campagne OptinMonster. Pour créer votre campagne spécifiquement pour ce tutoriel, veuillez suivre les étapes suivantes.

1) Création de la campagne

Si c'est la première fois que vous créez une campagne, vous pouvez commencer en suivant ce guide.

2) Ajout du MonsterLink

Ensuite, dans l'outil de création de campagne, ajoutez MonsterLink en tant que Règle d'affichage pour afficher la campagne uniquement en cas de clic.

3) Publication de la campagne

Si vous utilisez le OptinMonster WordPress pour gérer vos campagnes, veillez à Publier la campagne de la WordPress admin " OptinMonster " Campagnes.

(Facultatif) Configuration des paramètres de sortie

Vous pouvez configurer les paramètres de sortie dans le plugin OptinMonster pour intégrer cette campagne uniquement sur la ou les pages où votre formulaire WPForms apparaîtra.

Dans le cadre de ce tutoriel, nous ne limiterons pas l'affichage des pages. Cependant, pour plus d'informations sur ce sujet, veuillez consulter leur documentation.

Ajout du snippet

Il est maintenant temps d'ajouter l'extrait à votre site. Si vous avez besoin d'aide pour savoir où et comment ajouter des snippets à votre site, veuillez consulter ce tutoriel.

/*
 * 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' );

Il y a quatre modifications à apporter pour que cet extrait fonctionne sur votre site.

• $form_id = 519; - Il s'agit de l'ID du formulaire de WPForms que nous ciblons. Cela signifie que ce snippet seulement s'exécute sur le formulaire avec l'ID de 519. Pour trouver l'identifiant de votre formulaire, voir ce tutoriel.
• $campaign_slug = 'kofeog6veaiogw1gefbb'; - Il s'agit de la L'étiquette de la campagne OptinMonster.
• $name_field = 0; - Il s'agit de l'identifiant du champ pour le Nom que nous avons ajouté à notre formulaire. Cela signifie que ce snippet prendra ce que l'utilisateur a saisi dans le formulaire pour le nom et le transmettra automatiquement au champ OptinMonster campagne. Pour trouver l'identifiant de ce champ, voir ce tutoriel.
• $email_field = 1; - Il s'agit de l'identifiant du champ pour le Courriel que nous avons ajouté à notre formulaire. Cela signifie que ce snippet prendra ce que l'utilisateur a saisi dans le formulaire pour l'email et le transmettra automatiquement au champ OptinMonster campagne. Pour trouver l'identifiant de ce champ, voir ce tutoriel.

Une fois que vous avez mis à jour les lignes nécessaires dans le snippet et que vous l'avez enregistré sur votre site, chaque fois que le formulaire est rempli, il déclenche automatiquement la campagne OptinMonster et pré-remplit les champs Nom et Email.

Et c'est tout ce dont vous avez besoin pour déclencher une campagne OptinMonster à partir de la soumission d'un formulaire ! Vous souhaitez ajouter un lien d'impression pour que vos visiteurs puissent imprimer le formulaire et le compléter manuellement ? Consultez notre tutoriel sur Comment ajouter un lien d'impression à vos formulaires.

En rapport

Référence de l'action : wp_footer