Personnaliser le design des e-mails Contact Form 7


<p>Nous allons voir comment personnaliser le design des e-mails Contact Form 7, pour que vos utilisateurs se sentent comme à la maison à la place du design inexistant par défaut disponible dans Contact Form 7.</p>



<p>L&#8217;idée va être de construire la structure HTML de notre design d&#8217;e-mail dans le code source. Et ainsi, permettre à nos administrateurs du site de gérer uniquement le contenu de l&#8217;e-mail.</p>



<p>Grâce à cette méthode, on évite à l&#8217;administrateur de passer 15 minutes à trouver dans le contenu de l&#8217;e-mail.</p>



<p>Vous avez la possibilité de l’implémenter sous forme de plugin ou directement dans le thème. Personnellement, je choisis généralement l&#8217;usage du thème pour personnaliser les e-mails de mes clients. Car souvent, on essaye de respecter au mieux, la charte graphique du site.</p>



<p>Je vais prendre le cas d&#8217;un de mes clients qui souhaitait mettre en place un design personnalisé sur ses demandes de rendez-vous.</p>



<h2>Composer le design des e-mails pour Contact Form avec topol.io</h2>



<p>Si vous avez déjà essayé de construire en HTML vos designs d&#8217;e-mails, vous savez qu&#8217;il est très compliqué d&#8217;utiliser un HTML / CSS d&#8217;aujourd&#8217;hui. </p>



<p>C&#8217;est pourquoi je vous préconise d&#8217;utiliser le formidable outil <a aria-label="undefined (s’ouvre dans un nouvel onglet)" href="https://topol.io/" target="_blank" rel="noreferrer noopener">topol.io</a> qui se chargera pour vous de la mise en page côté code. Et donc, vous permettra de vous concentrer sur la mise en page avec un éditeur Drag &amp; Drop.</p>



<p>Il vous limitera ainsi sur les possibles incompatibilités avec les différents outils de messagerie; au niveau du CSS et vous permettra de rendre vos e-mails responsive pour mobile plus simplement.</p>



<p>Ha ! J&#8217;allais oublier, il est gratuit ! 😉</p>



<figure class="wp-block-image alignwide size-large"><img decoding="async" width="1024" height="820" src="https://i0.wp.com/backend.inrage.fr/wp-content/uploads/2020/07/e-mail-template.png?resize=1024%2C820&#038;ssl=1" alt="Template e-mail Topol" class="wp-image-1202" srcset="https://i0.wp.com/backend.inrage.fr/wp-content/uploads/2020/07/e-mail-template.png?resize=1024%2C820&amp;ssl=1 1024w, https://i0.wp.com/backend.inrage.fr/wp-content/uploads/2020/07/e-mail-template.png?resize=300%2C240&amp;ssl=1 300w, https://i0.wp.com/backend.inrage.fr/wp-content/uploads/2020/07/e-mail-template.png?resize=768%2C615&amp;ssl=1 768w, https://i0.wp.com/backend.inrage.fr/wp-content/uploads/2020/07/e-mail-template.png?resize=1536%2C1231&amp;ssl=1 1536w, https://i0.wp.com/backend.inrage.fr/wp-content/uploads/2020/07/e-mail-template.png?w=2048&amp;ssl=1 2048w" sizes="(max-width: 1000px) 100vw, 1000px" data-recalc-dims="1" /><figcaption>Exemple de création d&#8217;un e-mail transactionnel avec topol.io</figcaption></figure>



<h2>Appliquer le design à vos e-mails personnalisés Contact Form</h2>



<p>Maintenant que nous savons comment créer notre joli e-mail, nous allons voir comment les intégrer à notre site WordPress et particulièrement avec Contact Form 7.</p>



<p>Dès que nous allons expédier un e-mail, nous allons capturer le contenu du message via le hook <code>wpcf7_before_send_mail</code> nous permettant d&#8217;injecter le début et la fin de notre design HTML d&#8217;e-mail.</p>



<h3>Décomposer notre design HTML</h3>



<p> Comme évoqué un peu plus haut, nous allons laisser la possibilité aux administrateurs de personnaliser le contenu de l&#8217;e-mail. Pour cela, on va créer deux fichiers dans notre thème pour récupérer le haut et le bas de l&#8217;e-mail.</p>



<p>Personnellement dans mon thème, j’ai un répertoire dédié pour les e-mails dans /wp-<code>content/themes/montheme/templates/emails</code>. Avec deux fichiers <code>mail_header.php</code> et <code>mail_footer.php</code></p>



<p>Dans l&#8217;image ci-dessus, on peut voir que toute la partie &#8220;Vos souhaits, Vos informations, &#8230;&#8221;, c&#8217;est le contenu administrable dans le backoffice. </p>



<p>Je vais donc récupérer tout ce qui se trouve avant &#8220;Vos souhaits&#8221; dans le HTML et le mettre dans <code>mail_header.php</code> et tout ce qui se trouve après dans <code>mail_footer.php</code>.</p>



<h3>Injection de notre design avant l&#8217;expédition</h3>



<p>On va devoir utiliser le hook wpcf7_before_send_mail pour nous permettre de récupérer le contenu de l&#8217;e-mail pour le modifier avec notre design.</p>



<p>On va rajouter une nouvelle action tout en bas de notre fichier <code>functions.php</code> de notre thème :</p>



<pre class="wp-block-code language-php"><code>add_action('wpcf7_before_send_mail', function($cf7) {
  $mail = $cf7->prop('mail');
  $mailHeaderTmpl = file_get_contents(dirname(__FILE__) . '/templates/emails/mail_header.php');
  $mailFooterTmpl = file_get_contents(dirname(__FILE__) . '/templates/emails/mail_footer.php');

  // Replace the email body with the designed one
  $mail&#91;'body'] = $mailHeaderTmpl . $mail&#91;'body'] . $mailFooterTmpl;
  
  // Save our new body content
  $cf7->set_properties(array('mail' => $mail));
});</code></pre>



<p>Nous venons de modifier le contenu de l&#8217;e-mail avec notre design personnalisé. Il s&#8217;applique à tous les formulaires du site et uniquement sur l&#8217;e-mail principal. Nous allons voir un peu plus bas comment le modifier spécifiquement sur un formulaire ou sur l&#8217;e-mail secondaire.</p>



<h3>Appliquer le design des e-mails sur un formulaire Contact Form spécifique</h3>



<p>Si vous ne désirez pas personnaliser tous les e-mails sortant, mais uniquement certains d&#8217;entre eux. On peut vérifier lors de l&#8217;appel du hook avec un <code>switch/case</code>, sur quel formulaire on se trouve : </p>



<pre class="wp-block-code language-php"><code>add_action('wpcf7_before_send_mail', function($cf7) {

  switch($cf7->name()) {
    case 'prenez-rendez-vous':
      $mail = $cf7->prop('mail');
      $mailHeaderTmpl = file_get_contents(dirname(__FILE__) . '/templates/emails/mail_header.php');
      $mailFooterTmpl = file_get_contents(dirname(__FILE__) . '/templates/emails/mail_footer.php');

      // Replace the email body with the designed one
      $mail&#91;'body'] = $mailHeaderTmpl . $mail&#91;'body'] . $mailFooterTmpl;
  
      // Save our new body content
      $cf7->set_properties(array('mail' => $mail));
      break;
  } 
});</code></pre>



<h3>Design de l&#8217;e-mail secondaire Contact Form</h3>



<p>Contact Form 7 vous permet d&#8217;envoyer un second e-mail dans vos formulaires. Très souvent utilisé pour des réponses automatisées pour vos visiteurs.</p>



<p>Il peut être important de personnaliser l&#8217;e-mail que vos utilisateurs vont recevoir pour la confirmation d&#8217;un rendez-vous ou tout autre message transactionnel par e-mail.</p>



<p>Dans l&#8217;exemple un peu plus haut, on se concentrait uniquement sur l&#8217;expédition des e-mails principaux, nous allons voir comment modifier l&#8217;e-mail secondaire.</p>



<p>Tout se joue lors de la récupération et la sauvegarde des propriétés du formulaire. En effet, plus haut on récupérait <code>$cf7-&gt;prop('mail')</code> et on sauvegardait avec <code>$cf7-&gt;set_properties(array('mail' =&gt; $mail))</code></p>



<p>Pour interagir avec le second e-mail, il faut récupérer <code>mail_2</code> au lieu de <code>mail</code> comme ci-dessous :</p>



<pre class="wp-block-code language-php"><code>add_action('wpcf7_before_send_mail', function($cf7) {
  $mail = $cf7->prop('mail_2');
  $mailHeaderTmpl = file_get_contents(dirname(__FILE__) . '/templates/emails/mail_header.php');
  $mailFooterTmpl = file_get_contents(dirname(__FILE__) . '/templates/emails/mail_footer.php');

  // Replace the email body with the designed one
  $mail&#91;'body'] = $mailHeaderTmpl . $mail&#91;'body'] . $mailFooterTmpl;
  
  // Save our new body content
  $cf7->set_properties(array('mail_2' => $mail));
});</code></pre>



<h3>Utilisation via des shortcodes et le hook wpcf7_before_send_mail</h3>



<p>Vous avez la possibilité de le faire sous forme de &#8220;shortcode&#8221;. Soit, via les <a aria-label="undefined (s’ouvre dans un nouvel onglet)" href="https://codex.wordpress.org/fr:Shortcode" target="_blank" rel="noreferrer noopener">fonctions natives</a> de WordPress ou par <code>str_replace</code> dans le hook <code>wpcf7_before_send_mail</code>: </p>



<pre class="wp-block-code language-php"><code>add_action('wpcf7_before_send_mail', function($cf7) {
  switch($cf7->name()) {
    case 'prenez-rendez-vous':
      $mail = $cf7->prop('mail');

      $mail&#91;'body'] = str_replace('&#91;mail_layout_header]', file_get_contents(dirname(__FILE__) . '/../templates/emails/mail_header.php'), $mail&#91;'body']);
      $mail&#91;'body'] = str_replace('&#91;mail_layout_footer]', file_get_contents(dirname(__FILE__) . '/../templates/emails/mail_footer.php'), $mail&#91;'body']);

      $cf7->set_properties(array('mail' => $mail));
      break;
  }
});</code></pre>



<p>À vous de voir la méthode que vous préférez !</p>



<p>Vous êtes maintenant capable de personnaliser le contenu des e-mails pour vos utilisateurs !</p>



<p></p>


Personnaliser le design des e-mails Contact Form 7

Articles reliés

Contact Form 7 : Utiliser l’URL pour définir la valeur d’un select ou radio

Créer un serveur MySQL de réplication (slave) des données existantes