Contact Form 7 - Plugin WordPress

Ce qu'on va faire sur cette page

Contact Form 7 (CF7) est le plugin de formulaire WordPress gratuit le plus utilise. Il soumet en AJAX et declenche un event DOM wpcf7mailsent qu'on peut ecouter.

  1. Ouvrir GTM Preview
  2. Soumettre le formulaire CF7
  3. Observer le Custom Event dans le dataLayer
  4. Copier le listener wpcf7mailsent

Contact Form 7 (necessite le plugin WP installe)

Contact Form 7

Shortcode WordPress : [contact-form-7 id="1" title="Contact"]

Listener Contact Form 7 
// Listener pour Contact Form 7 (tag Custom HTML dans GTM) :

<script>
  document.addEventListener("wpcf7mailsent", function(event) {
    window.dataLayer.push({
      event: "cf7_form_submit",
      form_id: event.detail.contactFormId,
      form_name: event.detail.containerPostId || "Contact Form 7"
    });
  });
</script>

// CF7 declenche plusieurs events DOM :
// "wpcf7submit"     -> formulaire soumis (succes OU erreur)
// "wpcf7mailsent"   -> email envoye avec succes (CE QU'ON VEUT)
// "wpcf7mailfailed" -> echec d'envoi
// "wpcf7invalid"    -> validation echouee

// TOUJOURS utiliser "wpcf7mailsent" pour les conversions
// car "wpcf7submit" fire meme si le form a des erreurs.
Configuration GTM 
// Configuration GTM :
// Trigger : Custom Event -> "cf7_form_submit"
//
// Tag GA4 Event :
// Event name : generate_lead
// Parametres :
//   lead_source = "contact_form_7"
//   form_id = {{DLV - form_id}}

// Note : le trigger "Form Submission" de GTM ne fonctionne PAS
// avec CF7 car il soumet en AJAX par defaut.

CF7 : le plus courant en WP

Contact Form 7 est installe sur des millions de sites WordPress. Le listener wpcf7mailsent est LA methode standard pour le tracking. C'est souvent la premiere question qu'on pose en formation tracking WordPress.