Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


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».

Formulaire de contact 7 Cette option vous permet de créer plusieurs formulaires de contact avec juste un simple balisage HTML (qui sera généré pour vous). Une fois créé, n’importe quel formulaire peut être rapidement déployé en plaçant le shortcode approprié à l’endroit où vous souhaitez que le formulaire apparaisse. dans la zone de page, de publication ou de widget. Les messages envoyés via les formulaires sont envoyés à l’adresse e-mail spécifiée dans les paramètres du plugin et le spam est combattu avec le soutien de CAPTCHA et Akismet.

Le formulaire de contact 7 est si simple que tout le monde peut l’utiliser efficacement. Le style doit également être facile. Mais peut-être trop facile pour certains. Par défaut, le plug-in Contact Form 7 ne met pas en forme ses formulaires. Leur style est le résultat de styles standard inclus dans la feuille de style d’un thème WordPress.

Habituellement, quelque chose de très basique émerge comme ceci:

Formulaire de contact 7 styles standard

Malheureusement, bien que ce type de forme soit simple et flexible, il peut ne pas être aussi bien conçu que les autres éléments de votre propre site Web. De nombreux utilisateurs autrement satisfaits recherchent des 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 requise.

Dans l’article d’aujourd’hui, je vais partager un certain nombre de conseils qui ouvriront une grande variété d’options de style de Contact Form 7 pour toute personne utilisant n’importe quel thème.

C’est ainsi que vous adaptez le style du formulaire de contact 7 à votre site Web

Abonnez-vous à notre chaîne Youtube

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

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

Au lieu de cela, vous souhaitez ajouter le CSS suivant au CSS de votre thème enfant. Vous pouvez également utiliser la fonctionnalité CSS personnalisée dans Jetpack. Si votre conception a une section CSS personnalisée dans l’administrateur, vous pouvez également l’utiliser.

Ok, maintenant que nous savons où placer les styles, commençons!

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

Commençons par quelques modifications générales qui affecteront l’ensemble du formulaire. Nous pouvons le faire en utilisant le sélecteur de classe .wpcf7 puis ajoutez des styles en dessous.

(Je tiens également à vous recommander fortement d’inclure l’en-tête écrit que j’ai écrit ci-dessous dans votre feuille de style pour indiquer où vos styles commencent pour le 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. Voici un exemple.

Formulaire-de-contact-7-style-personnalisé-forme-entière-1

Comme vous pouvez le voir, il y a des problèmes de dédouanement. Pour résoudre ce problème, vous devez ajuster les marges entre la marge et les éléments internes du formulaire. Vous pouvez le faire avec le code suivant.


.wpcf7-form {

margin-left: 25px;

margin-right: 25px;

margin-top: 25px;


Sur ma page de test, cela a abouti à ce qui suit:

Formulaire-de-contact-7-styling-personnalisé-forme-entière-2

Remarque: ces styles peuvent affecter vos formulaires de manière légèrement différente, car nous traiterons probablement de sujets différents. Cela ne signifie pas que ce code ne fonctionnera pas pour vous, mais que vous devrez peut-être modifier un peu les chiffres pour obtenir les bons résultats pour votre site Web.

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

L’une des exigences les plus courantes lors de la conception du formulaire de contact 7 est de savoir comment ajuster la largeur des champs. Surtout la section actualités, qui ne s’étend pas très loin.

Le code suivant étend la zone de message à la largeur souhaitée (si personnalisée). J’ai mis le mien à 95% dans l’exemple car cela semblait le mieux dans mon cas d’utilisation imaginaire. Vous pouvez également l’ajuster à vos besoins – avec un pourcentage ou un nombre fixe de pixels.


.wpcf7-textarea {

width: 85%;

}


Vous pouvez également ajuster la largeur des autres champs en utilisant le entrée Sélecteur de classe.


.wpcf7 input {

width: 50%;

}


Si vous ne souhaitez pas personnaliser tous les champs de saisie avec les mêmes critères, vous pouvez explorer en avant en sélectionnant uniquement ceux qui vous intéressent. Dans l’exemple ci-dessous, j’ai choisi de modifier simplement mes champs de texte pour montrer que mon bouton Soumettre n’est pas affecté non plus.


.wpcf7-text {
width: 50%;
}


Après toutes les modifications ci-dessus, j’ai pu formater le formulaire ci-dessous.

Contact-form-7-Custom-Styling

Personnellement, je ne voulais pas changer la couleur de ma clé, mais je pense que c’est probablement une autre demande courante. Donc, si vous souhaitez changer la couleur de votre bouton, vous pouvez expérimenter le CSS ci-dessous.


.wpcf7-submit {

background: #555555;

color: #ffffff;

}


Avec ces éléments CSS, tout formulaire créé à l’aide du formulaire de contact 7 ressemblera à l’image finale ci-dessus. Mais que faire si vous voulez qu’une forme soit différente de toutes les autres?

Comment concevoir un formulaire spécifique

Obtenir l’ID CSS spécifique nécessaire pour apporter des modifications de style à un formulaire donné peut être un peu compliqué, mais cela peut être fait avec un peu de bricolage.

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

Ensuite, regardez le code du formulaire en utilisant la fonction Inspect Element de Google Chrome ou quelque chose de similaire dans un autre navigateur. Cela vous donnera l’identifiant complet du formulaire.

Dans mon cas, le numéro d’identification était dans mon shortcode 4407. L’ID complet s’est avéré wpcf7-f4407-p4405-o1. Cela signifiait que je pouvais apporter d’autres modifications à ce formulaire en particulier en utilisant le code ci-dessous avec des critères différents de mes paramètres pour l’ensemble du site Web.


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


Comment concevoir certains champs

Vous pouvez faire de même avec certains champs. Au lieu de rechercher une classe ou un ID CSS spécifique dans votre navigateur, tout ce que vous avez à faire est de l’ajouter dans le générateur de formulaire.

Lors de la génération d’une balise à placer dans le générateur de formulaires, vous constaterez qu’il existe deux options pour créer un ID, une classe ou les deux.

Champ personnalisé

Dans cet exemple, j’ai créé une classe appelée champ personnalisé. Si vous faites la même chose (ou quelque chose de similaire), vous pouvez formater ce champ exact avec votre nouvel identifiant (ou classe) comme décrit 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 sont affichés de gauche à droite.

Contact-form-7-custom-styling-list-elements-0

En fonction de vos préférences personnelles ou d’un cas d’utilisation spécifique où une visualisation de haut en bas peut être préférable, vous pouvez utiliser l’une des deux options suivantes.

Utilisez cette option pour afficher vos cases à cocher ou boutons radiaux de haut en bas et à gauche.


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


Contact-Form-7-Custom-Styling-List-Items-1

Utilisez cette option pour afficher vos cases à cocher et boutons radiaux de haut en bas et à droite. Veillez également à cocher la case Label First pour cette option lors de la génération de la balise.


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

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


Contact-form-7-Custom-Styling-List-Items-2

Astuce bonus: voici 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, juste une simple modification du balisage utilisé dans le générateur de formulaire pour Contact Form 7.

Parfois, il n’est pas nécessaire d’avoir des titres de champ, en particulier lorsque vous pouvez placer du texte d’espace réservé dans les champs eux-mêmes pour expliquer les informations qui s’y trouvent.

Si tel est le cas sur votre site, tout ce que vous avez à faire est d’effacer les titres dans le générateur de formulaire 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.

Contact-form-7-Custom-Styling-Remove-Title

Enfin

J’espère avoir montré dans les exemples ci-dessus que le plugin Contact Form 7 est hautement personnalisable. Certes, il faut un peu de bricolage, mais pour un plugin gratuit, il faut 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 souhaite plus de style passe quelques minutes à coller une version de l’un des exemples de code ci-dessus.

Avez-vous vos propres astuces de type Formulaire de contact 7? Avez-vous utilisé des favoris que vous souhaitez partager? Écrivez-nous dans les commentaires ci-dessous!

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





Source link

Recent Posts