Un formulaire de contact qui a de la gueule

Contact form 7 est une excellente extension pour les formulaires de contact. Et Divi est un excellent thème, auquel j’ai accès gratuitement via mon hébergerment web Infomaniak. Mais jusqu’à présent, je ne pouvais pas avoir un formulaire de contact qui sont fonctionnel ET beau. J’ai trouvé la solution, grâce à cet article, en anglais :  » How to Make Contact Form 7 Look Like Divi « .

étape 1 installer 2 extensions

  1. installer et activer contact form 7 de Takayuki Miyoshi ;
  2. installer et activer Contact Form 7 Styler for Divi de DiviPeople

étape 2 créer un formulaire de contact

créer un formulaire contact form 7 classique et noter le shortcode correspondant : [ [contact-form-7 404 "Not Found"] ]

Dans la page, utiliser l’éditeur visuel

Avec le constructeur Divi ou le Divi Builder, ajouter un nouveau module, et choisir « contact form 7 styler »

Choisir le formulaire à utiliser dans select form puis définir le style souhaité avec l’onglet style. je n’ai pas réglé grand-chose, simplement modifié les couleurs du « submit button », et la marge interne dans la partie dimensionnement. Et voici ce que cela donne :

J’ai également placé dans cette page d’exemple un module texte dans lequel j’ai collé le shortcode menant au formulaire : [contact-form-7 id="3133" title="formulaire d'essai"]. En l’absence de feuille de style (css) dédiée, voici à quoi ça ressemble :

c’est tout de même moins joli, non…

Et maintenant ?

Nous pouvons maintenant concilier la fonctionnalité de contact form 7 et l’esthétique de Divi. C’est chouette, non ?

Poster un Commentaire

avatar
  S’abonner  
Notifier de