Le blog.

Intercepter les données des formulaires Contact Form 7.

Vous développez sous WordPress ? Vous appréciez Contact Form 7 pour sa simplicité d’utilisation et sa flexibilité ? Mais vous souhaitez également pouvoir récupérer les données d’un formulaire envoyé par CF7, d’une manière ou d’une autre, pour en faire quelque chose qui sort du cadre de cette extension ? Parfait, vous êtes au bon endroit !

Le code complet de ce tutoriel est disponible en libre téléchargement ici.

Les formulaires WordPress, ça nous connait : nous avons déjà abordé ici-même la création d’un formulaire WordPress sur-mesure ou encore l’utilisation de Gravity Forms pour créer des formulaires WordPress du tonnerre. Cette fois, analysons un peu le moteur du célèbre — et très bon — plugin Contact Form 7 et essayons d’étendre ses fonctionnalités de base afin d’intercepter les données lors de la soumission d’un formulaire.

Notre plugin Contact Form en Posts WordPress est disponible gratuitement. Il vous permet d’enregistrer vos messages de formulaires CF7 dans votre base de données WordPress : créez ainsi une boite de réception dans votre back-office WordPress. Téléchargez-le gratuitement !

Un peu de développement WordPress Contact Form 7

Enregistrer un message de formulaire Contact Form 7 dans un post WordPress
Aperçu du fonctionnement de notre outil

Créer un formulaire de contact avec Contact Form 7

Dans un premier temps, il est nécessaire de mettre en place un formulaire de contact avec l’extension Contact Form 7. Si ce plugin vous est encore inconnu, voire insurmontable, je vous incite à vous diriger vers l’excellent article de WP Marmite qui passe au crible les fonctionnalités de ce célèbre plugin.

Formulaire Contact Form 7 de WordPress
Nous utilisons ici le formulaire livré par défaut

Notez tout de même que les valeurs name de vos champs sont à retenir : ils nous serviront un peu plus tard dans ce tutoriel pour récupérer les données des champs remplis par l’utilisateur. J’utilise ici le formulaire livré par défaut avec l’extension, je dispose donc de 4 champs :

  1. un champ « Votre nom » dont l’attribut name a la valeur your-name
  2. un champ « Votre email » dont l’attribut name a la valeur your-email
  3. un champ « Sujet » dont l’attribut name a la valeur your-subject
  4. et enfin un champ « Votre message » dont l’attribut name a la valeur your-message

Créer un type de contenu pour stocker nos messages de formulaire


function msk_create_message_post_type() {
	register_post_type( 'form_msg',
		array(
			'labels' => array(
				'name' => __( 'Messages', 'twentyfifteen'),
				'singular_name' => __( 'Message', 'twentyfifteen'),
				'add_new' => __( 'Add New', 'twentyfifteen' ),
				'add_new_item' => __( 'Add new message', 'twentyfifteen'),
				'edit' => __( 'Edit', 'twentyfifteen' ),
			),
			'menu_position' => 86,
			'show_ui' => true,
			'show_in_menu' => true,
			'public' => false,
			'supports' => array(
				'title',
				'editor',
			),
		)
	);
}
add_action('init', 'msk_create_message_post_type');

A chaque envoi de formulaire, Contact Form 7 envoie un e-mail à ou aux adresse(s) que vous avez configurée(s) dans les paramètres du formulaire. En parallèle, nous souhaiterions enregistrer un post de type « Message » contenant les données du formulaire.

On enregistre donc un nouveau type de contenu avec la fonction register_post_type qui s’appellera form_msg. N’hésitez pas à découvrir nos tutoriels sur les types de contenu personnalisé et les champs custom meta de WordPress si vous ne comprenez pas bien l’intérêt de cette fonction !

Hooker à l’envoi d’email de Contact Form 7


function msk_create_message_after_wpcf7_submission() {
	$submission = WPCF7_Submission::get_instance();

	if ($submission) {

		// On récupère les données du formulaire
		$posted_data = $submission->get_posted_data();

	}
}
add_action('wpcf7_mail_sent', 'msk_create_message_after_wpcf7_submission');

CF7 dispose de nombreux hooks pour nous permettre de filtrer des valeurs ou d’exécuter notre propre code à divers moments dans le plugin. L’action wpcf7_mail_sent est exécutée lorsque l’email a bien été envoyé.

On insère donc dans cette action une fonction maison qui va nous permettre d’exécuter la logique que l’on cherche. L’intérêt étant d’avoir accès aux données du formulaire, il nous faut :

  1. obtenir l’instance de l’objet formulaire WPCF7_Submission via WPCF7_Submission::get_instance()
  2. et récupérer les données envoyées de ce formulaire via la méthode get_posted_data()

Créer un post pour stocker le message


function msk_create_message_after_wpcf7_submission() {
	$submission = WPCF7_Submission::get_instance();

	if ($submission) {

		// On récupère les données du formulaire
		$posted_data = $submission->get_posted_data();

		// On stocke ce qu'on veut dans des variables, tout en assanissant les données
		$name = sanitize_text_field($posted_data['your-name']);
		$email = sanitize_email($posted_data['your-email']);
		$subject = sanitize_text_field($posted_data['your-subject']);
		$message = implode("n", array_map('sanitize_text_field', explode("n", $posted_data['your-message'])));

		// On rédige le contenu de notre post ...
		$post_body = sprintf(__('<h6>Message from %1$s <%2$s></h6>', 'twentyfifteen'), $name, $email);
		$post_body .= '<hr>';
		$post_body .= $message;

		// ... puis on insère un post de type 'form_msg' dans WordPress
		wp_insert_post(
		   array(
				'post_type' => 'form_msg',
				'post_title' => $subject,
				'post_content' => $post_body
			)
		);

	}
}
add_action('wpcf7_mail_sent', 'msk_create_message_after_wpcf7_submission');

Une fois nos données stockées dans une variable tableau $posted_data, il ne nous reste plus qu’à accéder aux informations que l’on souhaite, les traiter et les insérer dans un custom post de type form_msg.

Vous remarquerez ici les noms des clefs du tableau $post_data : ce sont les valeurs name que nous mentionnons plus haut lors de la création du formulaire CF7.

Pour les champs de type « checkbox », la valeur est vide si la checkbox n’est pas cochée. Autrement dit, vous pouvez récupérer 0 ou 1 de la manière suivante : $mailchimp = ($posted_data[‘mailchimp’][0] == ‘ » ») ? 0 : 1;

On utilise donc les fonctions d’assainissement de formulaire fournies par WordPress pour traiter proprement le nom, l’email, le sujet et le message du formulaire. Les fonctions de la variable $message permettent de nettoyer le contenu du message sans perdre les sauts de ligne (cf StackOverflow).

Ensuite, on génère une variable $post_body qui formera le contenu du post que nous allons insérer dans notre WordPress.

Et enfin, on enregistre un nouveau post de type form_msg au format brouillon (par défaut), ayant pour titre le champ « Votre sujet » du formulaire et pour contenu la variable $post_body que nous venons de créer.

Bonus : afficher une infobulle dans le menu d’administration WordPress


function msk_add_menu_msgform_bubble($menu) {
    $pending_count = wp_count_posts('form_msg')->draft;

    foreach($menu as $menu_key => $menu_data) {
        if ('edit.php?post_type=form_msg' != $menu_data[2])
    		continue;

        $menu[$menu_key][0] .= " <span class='update-plugins count-$pending_count'><span class='plugin-count'>" . number_format_i18n($pending_count) . '</span></span>';
    }

    return $menu;
}
add_filter( 'add_menu_classes', 'msk_add_menu_msgform_bubble');

wordpress_menu_infobulle_bubble_admin En bonus extra, ce code va nous permettre d’afficher une infobulle dans le menu d’administration « Messages » du type de contenu que nous avons créé. Ainsi, une petite notification numérique nous indique le nombre de nouveaux messages au format « brouillon » directement dans le menu.

Après lecture d’un message, il suffit de passer le post créé en statut « publié » afin de faire disparaître cette notification.

C’est ainsi que ce termine notre article de développement WordPress sur l’extension du comportement du plugin Contact Form 7 : vous pouvez désormais très facilement intercepter les données utilisateurs de vos formulaires afin de les traiter à votre goût.

N’hésitez pas à nous faire part en commentaire des utilisations que vous avez pu faire de cette action wpcf7_mail_sent !

27 commentaires ont été rédigés, ajoutez le votre.

  1. Thibault Répondre

    Bonjour,

    Merci pour le code, il est clair et facile à comprendre :)

    Mais dans quelle partie du code doit-on le mettre ? Dans le submission.php ?

    Merci

    • Pierre Saïkali Répondre

      Bonjour Thibault,

      Dans votre thème, dans le fichier functions.php par exemple.

      Merci pour ces compliments :)

  2. Thibault Répondre

    Merci bien,

    Les données ne s’envoient pas toutes, mais je vais trouver une solution !

  3. Natinho68 Répondre

    Hello,

    Super ton travail, mais j’ai une question.
    Si je veux vérifier une action (dans mon cas un paiement Paypal) avant que cf7 envoie le mail, quel fonction me conseilles-tu d’utiliser?

    • Pierre Saïkali Répondre

      Oui apparemment il existe l’action « wpcf7_before_send_mail » qui permet de faire des choses avant l’envoi d’e-mail…
      Regardez le fichier source submission.php pour essayer de comprendre comment s’interfacer :) (http://img.saika.li/bmtE)

      Bon courage !

  4. fabby66 Répondre

    Bonjour

    superbe tuto.
    Grâce à lui j’ai intégré une fonctionnalité d’envoi de sms depuis l’envoi d’un formulaire par un internaute.

    Un problème cependant, car je cherche dans tous les fichiers du plugin CF7 sans trouver la soluce.

    J’ai créé la fonction « send_sms_after_wpcf7_submission ».

    Cependant une fois le formulaire envoyé grâce à « add_action(‘wpcf7_mail_sent’, ‘send_sms_after_wpcf7_submission’); » :
    – le formulaire qui se trouve dans une pop-up n’affiche aucun commentaire de bon envoi du formulaire ou du SMS
    – A coté du bouton Envoyer j’ai un petit gif qui tourne à l’infini,
    alors que toutes les actions se sont bien déroulées.

    Comment faire pour indiquer à l’internaute que le SMS est bien parti ? et mettre fin à la fonction en cas de succès ?

    Cordialement

    • Pierre Saïkali Répondre

      Bonjour,

      Merci pour tes encouragements !
      D’après mon expérience, si les messages habituels de CF7 ne s’affichent pas après l’envoi, c’est que le PHP créée une erreur et casse le déroulement habituel.

      Du coup, regarde https://codex.wordpress.org/Debugging_in_WordPress pour activer le debugging dans le fichier debug.log. Ainsi, tu pourras voir si des erreurs apparaissent et essayer de régler ça.

      Dis-moi si ça marche !

  5. fabby66 Répondre

    Bonjour Pierre,

    forte de tes encouragements j’ai repris le code ligne par ligne.
    Ce n’était pas vraiment une erreur de code (c’est pourquoi le debugging ne m’a pas aidé dans ce cas précis) mais plutôt des tests effectués dans l’API d’envoi de SMS qui bloquaient mon propre code (si le SMS n’est pas envoyé l’API génère un message d’erreur et c’est cela qui provoque un conflit et arrète le script).

    Donc tu as vu juste : c’est bien le PHP qui cassait le déroulement habituel.
    J’ai supprimé les tests optionnels de l’API d’envoi de mail et du coup tout roule : mail bien envoyé (comme ça on garde en double les données du SMS au cas ou), SMS bien envoyé et message de confirmation de Contact Form 7.

    Connaissant peu Contact Form 7, je crois que sans ta page je n’y serais pas arrivée, ou en tout cas jamais aussi vite !
    Alors un grand merci pour ces astuces, et pour ta réactivité !

    Cordialement.

  6. olnd Répondre

    Bonjour,
    J’aurais deux rapides questions à poser: est-ce que le plugin fonctionnerait dans une version multisite de wordpress, et peut-on récupérer les fichiers envoyés par l’intermédiaire également?
    Merci pour ces précisions.

    • Pierre Saïkali Répondre

      Bonjour,

      En multisite pas de souci, je l’utilise sur ce site et c’est un réseau WP.
      Pour les fichiers, je crois qu’on peut récupérer l’URL via le shortcode WPCF7 non ? A essayer !

  7. Etienne Répondre

    Merci pour tous ces tutos très utiles.
    Pour celui-ci, malheureusement, aucun message ne remonte chez moi. 2 questions :
    – mes variables sont nom, prenom, email, sujet et message. j’ai donc ajouté au même titre que $name un $firstname et modifier les variables en conséquence dans le code fourni. Erreur ?
    – j’ai 6 forms différents, dois je duppliquer la fonction de post pour chacun des forms ?

    Merci encore

  8. Chrystelle Répondre

    Bonjour,
    J’ai crée un petit formulaire avec contact form 7 ( juste « date arrivée » et « envoyer »).
    Je voudrais que la date qui a été rentré dans le formulaire s’affiche dans un autre formulaire sur une autre page.
    Comment faire ?
    Merci

    • Pierre Saïkali Répondre

      Bonjour Chrystelle,

      Il faut pour cela nécessairement stocker la donnée quelque part, soit dans la base de données, ou peut-être plutôt dans une session PHP si elle est propre à l’utilisateur.
      Un peu complexe à expliquer ici !

      Bon courage

  9. Yves Répondre

    Bonjour,

    Bravo pour votre plug-in. Par contre avec la version 4.3.1 de contact form 7, l’option « Enregister chaque entée de formulaire dans un post » ne s’affiche pas. Un idée pour résoudre ce problème?

    Merci

  10. Rétrolien: jeremygurdal on "Plugin Contact Form 7 - Enregistrement message" * Best Wordpress Themes - Reviews

  11. JacK Kite Répondre

    Salut et merci pour ce super tuto !
    Petite question : Comment faire pour récupérer l’id du post des datas qui sont stockées côté bdd (flamingo).
    En fait après saisie des données et envoi du mail, je souhaite envoyer un autre mail à l’admin avec l’id du post qui porte les datas enregistrées ?!
    Possiblo ?
    Merci d’avance ;)

    • Pierre Répondre

      Hello,

      Je n’utilise pas Flamingo donc ne pourrai pas t’aider, désolé ;)

  12. Noe Répondre

    Bonjour merci pour ce tuto !
    Le lien : « Le code complet de ce tutoriel est disponible en libre téléchargement ici. » est mort.
    Serait-il possible de le réactiver ? Il me serait très utile.

  13. liwinios Répondre

    Salut, vraiment excellent tuto !! :-) J’ai créé pleins de formulaires, et j’en avais un peut rat le bol de traiter les données reçu par mail….. Une petite question, on stock les messages de formulaires dans l’onglet « Messages », et on peut à partir de celui-ci, créer directement des posts. Serait-il possible d’enregistrer un post de type « Article » ? afin que tous les messages deviennent des articles, merci d’avance pour votre réponse.

    • Pierre Répondre

      Oui bien sûr, il suffit de modifier l’action pour que l’argument « ‘post_type' » soit défini sur « post » et non « form_msg » :)

Laisser un commentaire