{"id":372017,"date":"2023-04-17T18:41:00","date_gmt":"2023-04-17T15:41:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=372017"},"modified":"2023-04-17T18:41:08","modified_gmt":"2023-04-17T15:41:08","slug":"comment-personnaliser-le-style-de-votre-formulaire-de-contact-7","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-personnaliser-le-style-de-votre-formulaire-de-contact-7\/","title":{"rendered":"Comment personnaliser le style de votre formulaire de contact 7"},"content":{"rendered":"\n

Le formulaire de contact est un \u00e9l\u00e9ment tr\u00e8s important de chaque site Web. Nous les utilisons pour collecter et partager diff\u00e9rents types d’informations et devons donc veiller \u00e0 ce qu’ils soient aussi beaux que le reste de notre site Web<\/strong>. Un formulaire de contact trop simple, avec un style qui semble tout simplement ne pas appartenir \u00e0 la page ne peut pas inspirer le sentiment de confiance \u00e0 vos utilisateurs, et il serait dommage de perdre votre audience juste au moment o\u00f9 ils voulaient prendre aller plus loin et laisser certaines de leurs donn\u00e9es dans votre formulaire de contact.<\/p>\n

Un moyen tr\u00e8s populaire de cr\u00e9er un formulaire de contact est avec un plugin Contact Form 7<\/a>, un outil pratique et facile \u00e0 utiliser qui est souvent inclus gratuitement avec de nombreux th\u00e8mes WordPress qui vous permet de cr\u00e9er facilement toutes sortes de formulaires de contact<\/strong>. Ce plugin couvre tous les aspects techniques de la cr\u00e9ation d’un formulaire de contact – pour le styliser, vous aurez besoin de comp\u00e9tences suppl\u00e9mentaires ou d’un autre plugin.<\/p>\n

Dans cet article, nous vous montrerons avec quelle facilit\u00e9 vous pouvez styliser vos formulaires de contact pour qu’ils correspondent \u00e0 la conception de votre site Web avec un outil gratuit<\/strong>.<\/p>\n

Restez \u00e0 l’\u00e9coute pour en savoir plus sur\u00a0:<\/p>\n

Utiliser Qi Addons pour Elementor pour styliser vos formulaires de contact<\/h2>\n

Qi Addons for Elementor<\/a> est un plugin riche en fonctionnalit\u00e9s qui comprend 60 widgets gratuits et plus de 40 widgets premium et comprend un widget Contact Form 7<\/a><\/strong> sp\u00e9cialement cr\u00e9\u00e9 pour vous aider \u00e0 styliser vos formulaires et c’est gratuit. Le plugin ne n\u00e9cessite aucune connaissance en codage<\/strong> et litt\u00e9ralement, tout le monde peut l’utiliser confortablement. Il ne vous offre pas la possibilit\u00e9 de cr\u00e9er un formulaire de contact, mais si vous utilisez le plugin Contact Form 7, avec Qi, vous pourrez personnaliser et reconcevoir vos formulaires de mani\u00e8re \u00e0 ce qu’ils correspondent parfaitement au style de votre site Web.<\/p>\n

Qi Addons for Elementor est facile \u00e0 installer<\/a><\/strong> et \u00e0 configurer, et la proc\u00e9dure est \u00e0 peu pr\u00e8s la m\u00eame que pour tout autre plugin.<\/p>\n

Apr\u00e8s l’avoir install\u00e9, acc\u00e9dez \u00e0 la page o\u00f9 se trouve le formulaire de contact que vous souhaitez personnaliser et choisissez de le modifier dans Elementor.<\/p>\n

\"Comment<\/a><\/p>\n

Tapez ensuite Contact Form 7 dans le champ<\/strong> de recherche du menu de gauche pour trouver le widget Contact Form 7.<\/p>\n

\"Comment<\/a><\/p>\n

Maintenant, lorsque vous l’avez, cliquez dessus et survolez l’endroit o\u00f9 vous voulez que votre formulaire de contact soit<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Le formulaire que vous ajoutez de cette mani\u00e8re est le formulaire que vous avez cr\u00e9\u00e9 avec le plugin Contact Form 7, ce widget est con\u00e7u uniquement pour vous aider \u00e0 styliser le formulaire, vous ne pouvez pas cr\u00e9er de formulaire avec<\/strong>. Donc, maintenant, votre formulaire de contact est plac\u00e9 l\u00e0 o\u00f9 vous le vouliez, et vous pouvez voir les param\u00e8tres du widget Contact Form 7 dans le menu de gauche.<\/p>\n

\"Comment<\/a><\/p>\n

Le premier onglet du menu vous offre la possibilit\u00e9 de choisir le type de formulaire de contact que vous souhaitez avoir sur la page<\/strong>. Nous pouvons choisir entre trois options – Formulaire de contact 1, Newsletter et Contactez-nous, vous pouvez bien s\u00fbr choisir l’un des formulaires que vous avez pr\u00e9c\u00e9demment cr\u00e9\u00e9s pour votre site. Voyons maintenant comment nous avons personnalis\u00e9 le formulaire Contactez-nous sur notre site.<\/p>\n

\"Comment<\/a><\/p>\n

D\u00e9finir le style du formulaire de contact<\/h2>\n

Pour ouvrir les options de style du formulaire, cliquez sur l’ onglet Style<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

La premi\u00e8re option fait r\u00e9f\u00e9rence \u00e0 Label typography<\/strong>, o\u00f9 vous pouvez d\u00e9finir la police, la taille de la police, l’espacement entre les mots de l’\u00e9tiquette, le style de police, l’espacement entre les lettres dans les mots et la grande chose est que vous pouvez voir tous les changements vivez imm\u00e9diatement pour ne rien faire aveugl\u00e9ment<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Dans l’image ci-dessous, vous pouvez voir pr\u00e9cis\u00e9ment comment nos choix se sont refl\u00e9t\u00e9s sur la typographie de l’\u00e9tiquette.<\/p>\n

\"Comment<\/a><\/p>\n

L’option suivante fait r\u00e9f\u00e9rence \u00e0 la couleur de l’\u00e9tiquette<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Vous pouvez cr\u00e9er votre propre teinte, selon vos besoins. Nous choisissons le bleu fonc\u00e9 pour notre \u00e9tiquette car il s’accorde bien avec la couleur de fond de la page.<\/p>\n

\"Comment<\/a><\/p>\n

Maintenant, lorsque vous avez d\u00e9fini le style d’\u00e9tiquette, les param\u00e8tres suivants font r\u00e9f\u00e9rence au style d’entr\u00e9e<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Vous aurez \u00e9galement des options similaires ici – vous pouvez choisir le style, la taille et la couleur de la police de typographie d’entr\u00e9e<\/strong>. Vous pouvez \u00e9galement d\u00e9finir la couleur d’arri\u00e8re-plan du champ de saisie<\/strong> si vous ne voulez pas qu’il soit blanc comme c’est le cas par d\u00e9faut. Vous trouverez \u00e9galement des param\u00e8tres pour ajuster le style de bordure des champs de saisie<\/strong> ici et vous pouvez choisir entre solide, pointill\u00e9, rainur\u00e9, pointill\u00e9, double ou aucun et pour chacune des options, vous pouvez effectuer des ajustements suppl\u00e9mentaires.<\/p>\n

\"Comment<\/a><\/p>\n

Vous pouvez \u00e9galement d\u00e9finir diff\u00e9rents styles lorsque les champs de saisie sont actifs<\/strong>. Toutes les m\u00eames options sont \u00e0 votre disposition, mais ne seront appliqu\u00e9es que lorsque les champs de saisie sont actifs.<\/p>\n

\"Comment<\/a><\/p>\n

Les param\u00e8tres suivants font r\u00e9f\u00e9rence au style de case<\/strong> \u00e0 cocher. Ce petit \u00e9l\u00e9ment est tr\u00e8s important dans un formulaire de contact et il doit \u00eatre soign\u00e9 et facilement accessible car c’est l’\u00e9tape o\u00f9 vous offrez une sorte de choix aux utilisateurs de votre site Web.<\/p>\n

\"Comment<\/a><\/p>\n

Avec Qi, vous rendrez facilement cet \u00e9l\u00e9ment parfait. Vous pouvez d\u00e9finir la taille d’entr\u00e9e de la case<\/strong> \u00e0 cocher, vous pouvez laisser plus ou moins d’espace entre deux cases \u00e0 cocher ainsi qu’entre les cases \u00e0 cocher et les autres champs de saisie<\/strong>. Vous pouvez voir clairement sur la photo ci-dessous comment nos choix affectent le formulaire de contact dans ce cas\u00a0:<\/p>\n

\"Comment<\/a><\/p>\n

Les param\u00e8tres suivants qu’il est important de conna\u00eetre sont les param\u00e8tres de style de bouton<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Vous pouvez modifier la couleur de l’arri\u00e8re-plan du bouton, d\u00e9finir la bordure autour du bouton<\/strong> pour qu’elle soit de couleur et de style diff\u00e9rents (solide, en pointill\u00e9s ou en pointill\u00e9s). Vous pouvez \u00e9galement modifier la couleur du texte du bouton<\/strong> en choisissant la couleur souhait\u00e9e dans l’option Couleur du bouton. Tous les changements sont visibles imm\u00e9diatement afin que vous puissiez facilement comprendre lequel des param\u00e8tres fait r\u00e9f\u00e9rence \u00e0 quel \u00e9l\u00e9ment du formulaire de contact.<\/p>\n

Si vous souhaitez que le style du bouton change au survol, cliquez sur l’onglet Actif et ajustez les param\u00e8tres – vous pouvez ajuster la couleur de survol du bouton, la couleur d’arri\u00e8re-plan du survol du bouton, la couleur de la bordure du survol du bouton, etc.<\/p>\n

\"Comment<\/a><\/p>\n

Lorsque vous \u00eates satisfait de l’apparence du formulaire de contact, vous pouvez maintenant ajuster l’espacement en ouvrant les param\u00e8tres dans l’ onglet Style d’espacement<\/strong>. Vous pouvez ajuster l’espacement pour chaque \u00e9l\u00e9ment du formulaire de contact ici.<\/p>\n

\"Comment<\/a><\/p>\n

Les param\u00e8tres de style global font r\u00e9f\u00e9rence au style d’alignement du formulaire de contact. Vous pouvez choisir entre l’alignement \u00e0 gauche, au centre et \u00e0 droite.<\/p>\n

\"Comment<\/a><\/p>\n

Les param\u00e8tres de style d’erreur<\/strong> vous permettent de contr\u00f4ler le style du message d’erreur qui s’affiche lorsque quelqu’un ne saisit pas les donn\u00e9es correctes dans le formulaire. Vous pouvez facilement d\u00e9finir la position, la typographie et la couleur du message d’erreur.<\/p>\n

\"Comment<\/a><\/p>\n

Les param\u00e8tres de style de r\u00e9ponse<\/strong> vous permettent d’affiner les d\u00e9tails des r\u00e9ponses ins\u00e9r\u00e9es dans le formulaire de contact. Vous pouvez contr\u00f4ler la police, la couleur de la police, d\u00e9finir le remplissage de r\u00e9ponse et la marge de r\u00e9ponse ainsi que le type de bordure.<\/p>\n

\"Comment<\/a><\/p>\n

Voici \u00e0 quoi ressemble notre formulaire apr\u00e8s que quelqu’un a envoy\u00e9 le message\u00a0:<\/p>\n

\"Comment<\/a><\/p>\n

Et, juste comme \u00e7a, vous avez un formulaire de contact \u00e9l\u00e9gant sur votre page, pr\u00eat \u00e0 travailler pour vous.<\/p>\n