Astuces

Contact Form 7 : Afficher un Formulaire en Plusieurs Colonnes

Personnaliser un formulaire de contact form 7 en 2 colonnes ou plus

Plusieurs personnes ont du mal à afficher un formulaire de contact sur 2 ou 3 colonnes ou à disposer un formulaire de contact avec des champs côte à côte. L’idée principale est de savoir comment obtenir ces champs de texte comme nom ou adresse E-mail affichée sur la même ligne et pas un en dessous de l’autre.

Pour ce tutoriel, je vais prendre le formulaire de contact du plugin Contact form 7 en guise d’illustrations. J’ai travaillé avec le formulaire de contact form 7 depuis toujours, et c’est mon premier choix quand il s’agit d’utiliser un plugin formulaire de contact gratuit pour un site Web WordPress.

Le rendu de ces lignes de code ci-dessus, sera :

Certainement que vous voulez personnaliser un formulaire de contact, l’adapter à l’apparence de votre site Web. Pour cela, rejouissons-nous du fait que cette extension contact form 7 permet le balisage de HTML et nous l’utiliserons à notre avantage.

Alors comment Afficher les champs du formulaire de contact form7 côte à côte?

Utilisons deux extensions

1. Contact Form 7 shortcode Enabler

Par défaut, Contact Form 7 autorise uniquement le balisage HTML à l’intérieur de son éditeur, alors qu’il se pose la nécessite d’insérer quelques shortcodes. Pour utiliser les shortcodes, nous avons besoin de notifier à WordPress que nous voulons activer shortcodes pour Contact Form 7. Il y a un plugin pour le faire, appelé Contact Form 7 shortcode Enabler. Pour utiliser le plugin, allez dans plugins-> Ajouter nouveau, rechercher Contact Form 7 Shortcode Enabler, installer et activer le plugin.

2. Column shortcodes

Column shortcodes est un plugin qui ajoute shortcodes à votre fonctionnalité de site Web WordPress pour l’affichage du formulaire sur plusieurs colonnes. Vous pouvez l’utiliser non seulement pour fractionner des champs de formulaire de contact sur des colonnes uniques, mais pour tout autre contenu sur votre site Web.

Avant d’utiliser l’extension, veuillez l’installer d’abord en allant dans Extensions-> Ajouter nouveau, ensuite rechercher Column shortcodes, et enfin installer et activer l’extension.

Maintenant que l’installation de ces deux extensions a été fait, revenons au formulaire de contact form 7 du coté de l’éditeur (Tableau de bord > contact->click sur le formulaire)

Le balisage de mon formulaire de contact devient:

  • En 2 colonnes
<div class="content-column one_half"><div style="padding:"0;"><label> Votre nom (obligatoire)
    [text* your-name] </label></div></div>
 
<div class="content-column one_half last_column"><label> Votre Email (obligatoire)
    [email* your-email] </label></div><div class="clear_column"></div>
 
<label> Votre Message
    [textarea your-message] </label>
[submit "Envoyer"]
  • En 3 colonnes
<div class="content-column one_third"><div style="padding:"0;"><label> Votre nom (obligatoire)
    [text* your-name] </label></div></div>
<div class="content-column one_third"><div style="padding:"0;"><label> Votre Email (obligatoire)
    [email* your-email] </label></div></div>
<div class="content-column one_third last_column"><label> Sujet
     </label></div><div class="clear_column"></div>
<label> Votre Message
    [textarea your-message] </label>
[submit "Envoyer"]

Articles similaires

2 commentaires

  1. Bonjour,

    Je rebondis sur votre solution qui fonctionne à merveille de mon côté.
    Malheureusement, à cause de cela je n’ai plus le message de confirmation d’envoi ou d’erreur de contact form 7.
    Une idée ?

    Merci,

    1. Veuillez vérifier les configurations de votre formulaire de contact et assurez-vous de bien disposer votre formulaire

Laisser un commentaire

%d blogueurs aiment cette page :