Comment modifier et personnaliser la mise en page de Contact Form 7

Comment modifier et personnaliser la mise en page de Contact Form 7

pour gérer les réservations et les rendez-vous populaires.
L’apparence du calendrier est personnalisable, et les utilisateurs peuvent envoyer des réservations de manière entièrement automatique.

Commençons par créer un formulaire de contact

Tout d’abord, jetons un coup d’œil à l’écran de création du formulaire de contact.
Comme vous pouvez le constater, le contenu du formulaire est configuré au moyen de codes HTML qui contiennent des balises pour les différents champs.

Pour ajouter un nouveau champ, il suffit de cliquer sur le type d’information que vous souhaitez demander à l’utilisateur et de remplir la case qui apparaît à l’écran.
Je vous donne un exemple : pour ajouter un champ où l’utilisateur peut saisir son numéro de téléphone, cliquez sur tel.
Ensuite, cochez le champ Obligatoire pour en faire un champ obligatoire et travaillez sur les autres options avancées.

Lorsque vous cliquez sur Insérer une balise, la balise apparaît dans les codes HTML. Évidemment, vous devez maintenant le formater.
Comme vous pouvez le voir dans l’exemple, toutes les balises déjà présentes sont enfermées dans les codes et , à l’intérieur desquels se trouve également du texte pour indiquer à quoi le champ fait référence.
Les codes sont utilisés pour afficher les balises et leurs champs respectifs dans des « blocs ».
La personnalisation du format de votre formulaire de contact sur cet écran nécessite des connaissances de base en HTML.
Évidemment, plus vous maîtrisez le langage HTML, plus vous pouvez personnaliser la mise en page de votre formulaire. Pour repositionner les champs dans le formulaire, il suffit de déplacer les balises. Sur la page, les champs auront le même ordre que dans le code HTML.
Avant de poursuivre, je tiens également à vous rappeler que si vous avez besoin d’une assistance de quelque nature que ce soit pour votre site web, vous pouvez contacter notre assistance WordPress. Nous vous répondrons rapidement et vous aiderons à résoudre tout problème que vous pourriez rencontrer.

Configurer les e-mails et les messages

Dans l’écran intitulé Email, vous pouvez configurer les emails de notification que vous recevrez lorsqu’un utilisateur soumet le formulaire. Dans cette section, il est important que vous insériez des balises relatives aux informations que vous souhaitez recevoir des utilisateurs.
Je m’explique : si vous voulez que le corps du message comprenne l’adresse électronique fournie par l’utilisateur, vous devrez insérer la balise [your-email].
Dans l’écran Messages, en revanche, vous pouvez saisir les messages qui apparaîtront dans les différents cas d’utilisation du formulaire. Par exemple, si un utilisateur ne saisit pas toutes les informations, s’il y a des problèmes techniques pour soumettre le formulaire, etc.

Paramètres supplémentaires

Enfin, sous Paramètres supplémentaires, vous pouvez ajouter des extraits de code pour personnaliser votre formulaire.
Voici quelques extraits que vous pouvez utiliser :
demo_mode : on
Ce code est utilisé pour activer le mode « Démo » de votre formulaire. Cela signifie que le formulaire sera visible et formaté comme vous l’avez configuré, mais qu’il ne sera qu’une démo – c’est-à-dire qu’il n’enverra pas de messages.
on_sent_ok : « alert(‘sent ok’) ; »
on_submit : « alert(‘submit’) ; »
Entre les guillemets, ajoutez vos codes Javascript pour qu’une action spécifique soit entreprise lorsque le formulaire est soumis avec succès (dans le premier cas), ou lorsque le formulaire est simplement soumis, quel que soit le résultat (dans le second cas).

Comment créer une boîte d’acceptation

Mais comment ajouter la case d’acceptation du traitement des données personnelles ?
Il est important d’être en conformité avec la réglementation sur la protection de la vie privée. Voici donc la solution proposée par . Il suffit de cliquer sur le bouton « Accepter » lorsque vous êtes sur l’écran « Formulaire ».
Contact Form 7 est déjà configuré pour que l’utilisateur ne puisse pas soumettre le formulaire sans cocher la case d’acceptation. Il existe également d’autres options intéressantes :
Pour que la case soit cochée par défaut, ajoutez default:on au code généré entre les crochets ; Si, en revanche, vous souhaitez que cette case ne soit pas obligatoire, activez l’option:Make this checkbox optional. .

Comment personnaliser l’apparence de votre formulaire de contact

Passons maintenant aux choses sérieuses et voyons comment personnaliser l’apparence de votre formulaire de contact.
En ce sens, Contact form 7 est un plugin assez « intelligent », car il utilise autant que possible les codes CSS de votre site afin de donner à vos formulaires un aspect cohérent avec vos pages.
Toutefois, si vous souhaitez personnaliser le formulaire, vous devrez créer vos propres règles CSS.
Où insérer les codes CSS ?
Vous avez plusieurs possibilités :
Vous pouvez les insérer directement dans le fichier style.css de votre thème ; Dans ce cas, faites très attention car, si vous mettez à jour votre thème, les modifications apportées au fichier style.css seront perdues et vous devrez aller les réinsérer ; Vous pouvez les insérer dans le champ « Custom CSS », si votre thème offre cette fonctionnalité ; De plus en plus de thèmes premium ont une section où l’utilisateur peut insérer ses propres codes CSS personnalisés. Peu de thèmes gratuits en sont dotés, mais cela devient de plus en plus courant ; Fichier Style.css de votre thème enfant Si vous souhaitez personnaliser votre site par le biais de codes CSS, c’est une excellente idée de créer un thème enfant, qui vous permet d’ajouter des CSS au style.Si toutes les autres options vous semblent un peu trop complexes, essayez le plugin Simple Custom CSS and JS ; Grâce à cet outil, vous pouvez insérer vos codes dans un éditeur de texte, sans avoir à travailler directement sur les fichiers de template.
Comme vous l’aurez compris, la personnalisation de l’apparence des formulaires de Contact Form 7 nécessite quelques connaissances en CSS. Si vous n’avez jamais utilisé ce langage de programmation, je vous recommande de lire d’abord ce guide sur les CSS.

Comment personnaliser l’ensemble du formulaire de contact

La classe de formulaire créée avec Contact Form 7 est .wpcf7
Pour personnaliser l’ensemble du formulaire (par exemple, en modifiant l’arrière-plan ou la police), il suffit de créer des règles .css incluant cette classe.
Voici un exemple :
.wpcf7 {
couleur de fond : #fff
police : 15px arial, sans-serif ;
}
Dans ce cas, l’ensemble du formulaire aurait un fond blanc et un lettrage en police Arial de 15 pixels.

Comment personnaliser les types de champs

Vous pouvez ensuite personnaliser des types de champs spécifiques.
En général, les champs de Contact Form 7 ont un sélecteur appelé input.
Chaque type de champ se distingue comme suit :
Le sélecteur input[type= »text »] fait référence au champ texte ; le sélecteur input[type= »email »] fait référence au champ email, et ainsi de suite.
Laissez-moi vous donner un autre exemple : si vous voulez arrondir les bords du champ de saisie de l’adresse électronique, vous utiliserez les codes suivants
input[type= »email »] {
border-radius : 7px ;
}

Comment personnaliser des champs spécifiques

Contact Form 7 a introduit une fonctionnalité très intéressante pour personnaliser les champs individuels dans le formulaire.
Lorsque vous ajoutez une balise au formulaire, vous pouvez y spécifier un ID ou une classe de votre choix en les saisissant dans les champs appropriés.

Le code généré comprend les valeurs id:myid class:myclass. .
Après avoir spécifié la classe ou l’ID, vous pouvez écrire vos règles CSS comme d’habitude.
Dans ce cas, si vous vouliez que l’arrière-plan du champ de l’e-mail soit vert, vous utiliseriez ce code :
#mioid {
couleur de fond : #FF0000
}
Comme vous pouvez le constater, les règles CSS sont spécifiques à chaque cas.
Si vous souhaitez apporter une modification spécifique à votre formulaire créé avec Contact Form 7, veuillez laisser un commentaire ci-dessous.
Nous ferons de notre mieux pour vous aider à l’intégrer correctement.
Conclusion
Nous sommes arrivés à la fin de ce post sur la façon de modifier et de personnaliser la mise en page de Contact Form 7.
Si vous utilisez ce plugin depuis un certain temps, vous avez sans doute remarqué que les pages de formulaire ont changé.
Le seul moyen de personnaliser l’apparence des formulaires créés avec Contact Form 7 est le CSS.
Cette fonctionnalité offre une flexibilité maximale, mais peut également poser des limites pour ceux qui n’ont pas de connaissances en programmation.
Dans tous les cas, je vous recommande d’apprendre au moins les bases du HTML et du CSS, car elles vous seront certainement utiles pour personnaliser l’ensemble de votre site – et pas seulement les formulaires de contact !
Comme d’habitude, si vous avez des questions ou des commentaires, n’hésitez pas à laisser un message ci-dessous.
Nous vous répondrons dans les plus brefs délais.