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 déclenche la campagne, mais aussi qu'il pré-remplisse les champs tels que le nom et l'adresse e-mail du formulaire dans la campagne pour vous faire gagner du temps. Dans ce tutoriel, nous vous montrerons comment y parvenir à l'aide d'un extrait de code.

Création du formulaire

Pour commencer, nous allons créer un nouveau formulaire et y ajouter nos champs. Dans le cadre de ce tutoriel, notre formulaire ne contiendra que les champs Nom et Adresse e-mail.

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

Configuration 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 ces étapes.

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 le constructeur de campagne, ajoutez MonsterLink comme Règle d'affichage pour afficher la campagne uniquement au clic.

3) Publication de la campagne

Si vous utilisez le plugin WordPress OptinMonster pour gérer vos campagnes, assurez-vous de Publier la campagne depuis Admin WordPress » 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 aucune page pour cet affichage. Cependant, pour plus d'informations sur ce sujet, veuillez consulter leur documentation.

Ajout du snippet

Il est maintenant temps d'ajouter l'extrait de code à votre site. Si vous avez besoin d'aide sur où et comment ajouter des extraits de code à 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 que vous devrez apporter pour que cet extrait de code fonctionne sur votre site.

• $form_id = 519; – C'est l'ID du formulaire de WPForms que nous ciblons. Cela signifie que cet extrait de code ne s'exécutera que sur le formulaire portant l'ID 519. Pour trouver l'ID de votre formulaire, veuillez consulter ce tutoriel.
• $campaign_slug = 'kofeog6veaiogw1gefbb'; – C'est le slug de la campagne OptinMonster.
• $name_field = 0; – C'est l'ID du champ pour le champ Nom que nous avons ajouté à notre formulaire. Cela signifie que cet extrait de code prendra ce que l'utilisateur a saisi dans le formulaire pour le nom et le transmettra automatiquement à la campagne OptinMonster. Pour trouver l'ID de ce champ, veuillez consulter ce tutoriel.
• $email_field = 1; – Ceci est l’ID du champ pour le champ Email que nous avons ajouté à notre formulaire. Cela signifie que cet extrait prendra ce que l’utilisateur a saisi dans le formulaire pour l’e-mail et le transmettra automatiquement à la campagne OptinMonster. Pour trouver l’ID de votre champ pour ce champ, veuillez consulter ce tutoriel.

Une fois que vous avez mis à jour les lignes nécessaires dans l’extrait et que vous l’avez enregistré sur votre site, chaque fois que le formulaire sera complété, il déclenchera automatiquement la campagne OptinMonster et pré-remplira les champs Nom et Email.

Et c’est tout ce dont vous avez besoin pour déclencher une campagne OptinMonster à partir d’une soumission de formulaire ! Souhaitez-vous ajouter un lien d’impression afin que vos visiteurs puissent imprimer le formulaire pour le remplir manuellement ? Consultez notre tutoriel sur Comment ajouter un lien d’impression à vos formulaires.

Articles associés

Référence d’action : wp_footer