Comment personnaliser le style du formulaire de contact 7 en fonction de votre site Web

Avec plus d'un million d'installations actives, Contact Form 7 est de loin l'un des plugins WordPress les plus populaires de tous les temps. Sa popularité a probablement beaucoup à voir avec la vérité derrière sa description : « Simple mais flexible.

Contact Form 7 vous permet de créer plusieurs formulaires de contact en utilisant uniquement un simple balisage HTML (qu'il génère pour vous). Une fois créé, chaque formulaire peut être rapidement déployé en plaçant son shortcode correspondant à l'endroit où vous souhaitez que le formulaire apparaisse ; dans la page, la publication ou la zone de widget. Les messages soumis via les formulaires sont envoyés à l'adresse e-mail fournie dans les paramètres du plugin et le spam est combattu via le support pour CAPTCHA et Akismet.

Le formulaire de contact 7 est si simple qu'il semble que tout le monde puisse l'utiliser efficacement. Le style aussi se veut simple. Mais peut-être trop simple pour certains. Par défaut, le plugin Contact Form 7 ne stylise pas ses formulaires. Tout style qu'ils ont est le résultat des styles par défaut présents dans la feuille de style d'un thème WordPress.

Cela donne généralement quelque chose d'assez basique, comme ceci :

Malheureusement, ce type de formulaire, bien que simple et flexible, peut ne pas être aussi joliment conçu que les autres éléments d'un site Web. Laissant de nombreux utilisateurs par ailleurs satisfaits à la recherche d'alternatives au formulaire de contact 7 avec plus d'options de style. Heureusement, avec juste un peu de CSS, aucune alternative de plugin n'est nécessaire.

Dans le post d'aujourd'hui, je vais partager une série de conseils qui ouvriront une grande variété de possibilités de style Contact Form 7 pour tout le monde, en utilisant n'importe quel thème.

Comment personnaliser le style du formulaire de contact 7 en fonction de votre site Web

Abonnez-vous à notre chaîne Youtube

Où éditer votre formulaire de contact 7 CSS (et pourquoi)

Il est important que lors de l'ajout de CSS personnalisé, vous ne l'ajoutiez pas à la feuille de style de Contact Form 7 ou de votre thème parent. Tous les changements ou ajouts que vous y apporterez seront écrasés dès que le thème et/ou le plugin seront mis à jour.

Au lieu de cela, vous voudrez ajouter le CSS ci-dessous au CSS de votre thème enfant. Vous pouvez également utiliser la fonctionnalité CSS personnalisée sur Jetpack, ou si votre thème fournit une section dans son panneau d'administration pour le CSS personnalisé, vous pouvez également l'utiliser.

Ok, maintenant que nous savons où placer les styles que nous allons voir ci-dessous, commençons !

Comment créer des styles de formulaire à l'échelle du site

Commençons par effectuer quelques modifications générales qui s'appliqueront à l'ensemble du formulaire. Nous pouvons le faire en utilisant le sélecteur de classe .wpcf7 , puis en ajoutant des styles en dessous.

(Je voudrais également vous suggérer fortement de placer le titre commenté que j'ai écrit ci-dessous dans votre feuille de style pour indiquer où commencent vos styles de formulaire de contact 7.)

/* Contact Form 7 Styles
---------------------------------*/

.wpcf7 {

background-color: #F0F0F0;

border: 5px solid #666666;

}

Après avoir ajouté le code ci-dessus à votre feuille de style, chaque formulaire que vous créez avec Contact Form 7 aura les styles d'arrière-plan et de bordure que vous venez de définir. Ci-dessous un exemple.

Comme vous pouvez le voir, il y a des problèmes d'espacement. Pour résoudre ce problème, vous devrez ajuster les marges entre la bordure et les éléments de formulaire internes. Vous pouvez le faire avec le code ci-dessous.

.wpcf7-form {

margin-left: 25px;

margin-right: 25px;

margin-top: 25px;

Sur mon site de test, cela a donné les résultats suivants :

Remarque : ces styles peuvent affecter vos formulaires de manière légèrement différente, car nous travaillons probablement avec des thèmes différents. Cela ne signifie pas que ce code ne fonctionnera pas pour vous, seulement que vous devrez peut-être modifier un peu les chiffres pour que les choses soient parfaitement adaptées à votre site.

Comment créer des styles de champ de formulaire à l'échelle du site

L'une des demandes les plus courantes des personnes lorsqu'il s'agit de styliser le formulaire de contact 7 est de savoir comment ajuster la largeur des champs. En particulier la zone de message qui ne s'étend pas très loin.

Le code ci-dessous étendra la zone de message à la largeur souhaitée (lorsqu'elle est ajustée). J'ai défini le mien dans l'exemple à 95% car c'est ce qui semblait le mieux dans mon cas d'utilisation imaginaire. Vous pouvez également le régler en fonction de vos besoins, en utilisant un pourcentage ou un nombre de pixels fixe.

.wpcf7-textarea {

width: 85%;

}

Vous pouvez également ajuster la largeur des autres champs en ajustant le sélecteur de classe d' entrée .

.wpcf7 input {

width: 50%;

}

Si vous ne souhaitez pas ajuster tous vos champs de saisie avec les mêmes critères, vous pouvez creuser un peu en sélectionnant uniquement ceux qui vous intéressent. Dans l'exemple ci-dessous, j'ai choisi de simplement modifier mes champs de texte afin que mon bouton de soumission n'est pas non plus affecté.

.wpcf7-text {
width: 50%;
}

Après tous les changements ci-dessus, j'ai pu styliser le formulaire que vous voyez ci-dessous.

Personnellement, je ne voulais pas changer la couleur de mes boutons, mais je pense que c'est probablement un autre désir commun. Donc, si vous souhaitez modifier la couleur de votre bouton, vous pouvez utiliser le CSS ci-dessous pour expérimenter.

.wpcf7-submit {

background: #555555;

color: #ffffff;

}

Avec ces morceaux de CSS en place, chaque formulaire créé avec Contact Form 7 ressemblera à l'image finale ci-dessus. Mais que se passe-t-il lorsque vous voulez qu'une forme en particulier soit différente de toutes les autres ?

Comment styliser une forme spécifique

Obtenir l'ID CSS spécifique requis pour apporter des modifications de style à un formulaire spécifique peut être un peu gênant, mais c'est possible avec un peu de bricolage.

La première chose que vous voudrez faire est d'ajouter le shortcode du formulaire dans votre site et de le prévisualiser. (Vous remarquerez que dans ce shortcode, il y a un numéro pour l'ID, mais ce n'est pas en fait l'ID complet dont vous aurez besoin.)

Ensuite, à l'aide de la fonction d'inspection des éléments de Google Chrome ou de quelque chose de similaire dans un autre navigateur, examinez le code du formulaire. En utilisant cela, vous trouverez l'ID complet du formulaire.

Dans mon cas, le numéro d'identification dans mon shortcode était 4407 . L'ID complet s'est avéré être wpcf7-f4407-p4405-o1 . Ce qui signifiait que je pouvais apporter d'autres modifications, uniquement à ce formulaire spécifique, en utilisant le code ci-dessous avec divers critères qui différaient des paramètres de mon site.

#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}

Comment styliser des champs spécifiques

Vous pouvez faire la même chose avec des champs spécifiques. Au lieu de rechercher une classe CSS ou un identifiant spécifique dans votre navigateur, il vous suffit de l'ajouter dans le générateur de formulaires.

Lorsque vous générez une balise à placer dans le générateur de formulaires, vous remarquerez qu'il existe deux options pour créer un ID, une classe ou les deux.

Dans cet exemple, j'ai choisi de créer une classe appelée custom-field . Si vous faites la même chose (ou quelque chose de similaire), vous pourrez alors styliser uniquement ce champ en utilisant votre nouvel identifiant (ou classe) comme je l'ai ci-dessous.

#customized-field {

color: #ffffff;

border: 2px solid #333333;

}

Comment créer des mises en page de formulaire personnalisées pour les cases à cocher et les boutons radiaux

Par défaut, les cases à cocher et les rayons s'affichent de gauche à droite.

Mais en raison de vos préférences personnelles ou d'un cas d'utilisation spécifique dans lequel les afficher de haut en bas peut être préférable, vous pouvez utiliser l'une des deux options ci-dessous.

Pour afficher vos cases à cocher ou boutons radiaux de haut en bas et à gauche, utilisez ceci.

.wpcf7-list-item {
display: block;
}

Pour afficher vos cases à cocher et boutons radiaux de haut en bas et à droite, utilisez ceci. Assurez-vous également que lorsque vous générez le tag pour cette option, vous cochez la case « label first ».

.wpcf7-list-item {
display: table-row;
}

.wpcf7-list-item * {
display: table-cell;
}

Astuce bonus : Comment supprimer les titres de champ et utiliser le texte d'espace réservé à la place

Cette astuce ne nécessite pas l'utilisation de CSS comme les autres ci-dessus, mais plutôt un simple ajustement du balisage utilisé dans le générateur de formulaire Contact Form 7.

Parfois, il n'est pas nécessaire d'avoir des titres de champ, en particulier lorsque vous pouvez placer un texte d'espace réservé dans les champs eux-mêmes qui expliquent quelles informations y appartiennent.

Si c'est le cas sur votre site, tout ce que vous avez à faire est de supprimer les titres dans le générateur de formulaires et d'ajouter du texte d'espace réservé comme je l'ai fait dans l'exemple ci-dessous.

<p></p>

<p>[email* your-email placeholder "Email Address"]</p>

<p></p>

<p>[textarea your-message placeholder "Talk to me"]</p>

Le résultat est une forme plus propre avec moins d'encombrement.

En conclusion

J'espère avoir montré dans les exemples ci-dessus que le plugin Contact Form 7 est hautement personnalisable. Certes, cela nécessite un peu de bricolage, mais pour un plugin gratuit, on pourrait s'y attendre.

Je pense que le manque d'options de style par défaut explique en grande partie pourquoi le plugin fonctionne si bien pour tant de personnes. Il est donc juste que quiconque en tire beaucoup de valeur et qui souhaite plus de style s'engage quelques minutes à déposer une version de l'un des exemples de code ci-dessus.

Avez-vous vos propres astuces de style Contact Form 7? Des favoris que vous avez utilisés et que vous aimeriez partager ? Écrivez-nous dans les commentaires ci-dessous!

Vignette de l'article via Dmitry Lemon5ky // shutterstock.com