Comment changer un style de formulaire de contact WordPress

Vous voulez changer le style de votre formulaire de contact WordPress ? Alors ce guide est pour vous! Vous apprendrez comment le style de formulaire WordPress peut être super facile ! En savoir plus.

Temps de lecture approximatif : 6 minutes

Vous n'avez qu'une seule chance de faire une première impression.

Et attirer l'attention de vos visiteurs avec une belle forme est un moyen de faire une excellente impression.

C'est aussi le moyen idéal pour les amener à remplir votre formulaire. Après tout, comment peuvent-ils le remplir s'ils ne le voient pas ?

Donc, si vous êtes prêt à passer du plus simple au plus beau avec vos formulaires, ce guide est fait pour vous.

Nous allons vous montrer deux façons de changer facilement le style de votre formulaire de contact WordPress !

Allons-y.

Comment changer le style de votre formulaire de contact WordPress

Comme nous l'avons mentionné, il existe deux façons de personnaliser le style de votre formulaire

Lequel vous choisirez dépendra de votre niveau de confort avec le codage. Mais nous allons vous montrer les deux méthodes, afin que vous connaissiez toutes les options disponibles.

Méthode 1 : Modifier le code de votre formulaire dans WordPress

Alors, tu veux plonger tête la première dans les eaux du codage, hein ?

Nous supposons que vous avez déjà créé un formulaire et que vous souhaitez le personnaliser. Si vous n'avez pas de formulaire, rendez-vous sur notre guide sur la création d'un formulaire pour vous lancer.

Étape 1 : Obtenir l'ID ou la classe de votre formulaire

Pour commencer, vous devez obtenir l' ID ou la classe de votre formulaire.

Pour ce faire, vous pouvez facilement vous rendre sur votre site Web, cliquer avec le bouton droit sur votre formulaire et cliquer sur Inspecter . Ici, nous verrons le modèle HTML de formulaire dans votre thème enfant.

La barre latérale des outils de développement de Google glissera et vous pourrez afficher les différentes sections de code de votre formulaire.

Le plus important est de trouver la zone que vous souhaitez personnaliser et de garder une trace de l' ID ou du nom de la classe . Vous l'utiliserez pour apporter des modifications.

Par exemple, si nous voulions changer la couleur d'arrière-plan de notre modèle de formulaire Contactez-nous, nous trouverions le morceau de code le plus externe. Dans ce cas, c'est une div avec la classe api-form-box .

Nous pouvons même tester à quoi cela ressemblerait depuis cette console.

Si nous faisons un clic droit sur la div et cliquez sur Ajouter un attribut , nous pouvons ajouter un style de couleur d'arrière-plan.

Appuyez sur Entrée et les modifications sont immédiatement affichées dans la fenêtre.

Mais ne vous inquiétez pas. Chaque fois que vous actualisez la page, le formulaire reviendra à la normale.

Ensuite, rendez-vous dans votre administrateur WordPress pour apporter les modifications de code CSS nécessaires.

Étape 2 : Modifiez le CSS dans votre panneau d'administration WordPress

Maintenant que vous avez pris note de quelques éléments que vous souhaitez modifier sur notre formulaire, dirigez-vous vers votre administrateur WordPress pour commencer.

Ensuite, dans votre barre latérale WordPress, choisissez Apparence → Personnaliser → CSS supplémentaire pour styliser le formulaire.

C'est ici que vous pouvez entrer les classes CSS pour votre formulaire.

Par exemple, nous avons décidé de changer quelques éléments sur notre formulaire, voici donc le code que nous avons saisi :

Pour baliser une classe , vous devez inclure un fichier . devant le nom de la classe. Pour un ID , vous mettez un # .

Cependant, si vous utilisez cette méthode, nous vous recommandons d'en savoir plus sur les règles CSS pour mieux comprendre vos modifications.

Pour notre exemple, cela se décomposerait comme ceci :

• .api-form-box change la couleur d'arrière-plan en bleu clair
• .frm-button-submit change l'arrière-plan du bouton d'envoi en jaune et le texte en noir
• .frm-submit centre le bouton dans le formulaire

Avec ces modifications, notre formulaire ressemblerait à ceci :

À partir de là, votre pouvoir est illimité. Vous pouvez personnaliser votre formulaire comme bon vous semble si vous apprenez à utiliser CSS.

Il y a cependant quelques inconvénients à cette méthode.

Une mise à jour pourrait casser la conception de votre formulaire et vous obliger à recommencer. Sans oublier que cela prend du temps. Si vous avez plusieurs formulaires de contact, vous devrez modifier le code HTML et ajouter un CSS personnalisé à chacun.

Mais si vous voulez quelque chose de plus simple et incassable, nous vous recommandons de consulter la méthode suivante .

Méthode 2 : Utiliser un générateur de formulaire avec un styler visuel

Le codage est une compétence qui prend du temps à apprendre.

Et beaucoup de gens n'ont pas le temps d'apprendre. Si c'est votre cas, un générateur de formulaires est votre meilleure option.

Et celui que nous recommandons est Formidable Forms .

Il s'agit du plugin WordPress de création de formulaires le plus avancé de WordPress, ce qui signifie que la création de formulaires est simple et rapide, ce qui vous laisse plus de temps à consacrer à d'autres zones de votre site Web.

Quel que soit le type de formulaire sur votre site Web, Formidable peut tout gérer rapidement.

Pas de codage, pas de tracas - juste une création de formulaire facile.

Il existe d'autres créateurs de formulaires parmi lesquels choisir (WPForms, Gravity Forms, etc.), mais ils n'offrent pas les capacités de style fournies avec Formidable. Et cela signifie que vous avez plus de pouvoir sur l'apparence de votre formulaire.

Nous vous recommandons également de consulter les plans premium de Formidable.

Bien qu'ils ne soient pas nécessaires pour styliser votre formulaire, vous bénéficiez de nombreuses fonctionnalités intéressantes :

• Accès aux modèles de conception de formulaire
• Possibilité de personnaliser votre image de fond
• Plus de modèles de formulaires pour démarrer votre formulaire plus rapidement
• Et beaucoup plus

Ainsi, une fois que vous aurez installé et activé Formidable, vous serez prêt à commencer.

Obtenez des formulaires formidables maintenant !

Trois étapes simples suffisent pour styliser votre formulaire et le mettre en ligne sur votre site :

1. Créer un formulaire
2. Styliser le formulaire
3. Afficher le formulaire

Étape 1 : Créer un formulaire

Pour styliser un formulaire, vous avez besoin d'un formulaire à styliser, n'est-ce pas ?

Alors, dirigez-vous vers votre administrateur WordPress et allez dans Formidable → Forms → Add New .

Vous pouvez choisir l'un de nos nombreux modèles prédéfinis (fonctionnalité premium) ou un formulaire vierge pour commencer.

Ensuite, donnez un nom à votre formulaire et cliquez sur Créer .

Le plugin vous amènera à son constructeur par glisser-déposer, où vous pourrez facilement modifier votre formulaire.

Ajoutez tous les champs de formulaire que vous souhaitez, personnalisez les étiquettes de champ, modifiez le type de saisie, etc., à partir du menu de la barre latérale.

Si vous créez un formulaire de contact, il est préférable d'ajouter les éléments suivants :

• Champ de texte pour le nom du visiteur
• E-mail pour un moyen de les contacter
• Paragraphe pour un message qu'ils veulent ajouter

Une fois votre formulaire de contact configuré, cliquez sur Mettre à jour pour enregistrer vos modifications.

Ensuite, nous nous dirigerons vers l'onglet Style .

Étape 2 : stylisez le formulaire

Sous l'onglet Style , vous verrez quelques options.

Vous pouvez choisir l'un de nos modèles de conception prédéfinis pour gagner du temps (premium) ou commencer à concevoir le vôtre.

Pour concevoir le vôtre, cliquez sur les trois points à côté de Formidable Style et cliquez sur Modifier . Le style Formidable est le style par défaut dans Formidable.

Cela vous mènera à notre concepteur Formidable Style, où vous pourrez personnaliser votre formulaire.

Vous pouvez modifier la taille et la couleur de vos étiquettes, champs de saisie, taille de police et couleur d'arrière-plan, et même télécharger une image d'arrière-plan !

Par exemple, pour un site Web de test appelé Cheap n' Cheesy , nous avons conçu un formulaire qui reflète l'entreprise :

Les possibilités sont infinies pour vous et votre formulaire de contact !

Cliquez donc sur Mettre à jour pour enregistrer vos modifications une fois que vous avez personnalisé votre formulaire.

Il ne reste plus qu'à l'afficher !

Étape 3 : Affichez le formulaire

Afficher votre formulaire est encore plus facile que de le créer.

Tout d'abord, dirigez-vous vers la publication ou la page où vous souhaitez afficher votre formulaire et ajoutez un nouveau bloc WordPress.

Ensuite, recherchez le bloc Formidable Forms , ajoutez-le et choisissez votre formulaire dans le menu déroulant.

Enfin, mettez à jour votre message ou votre page, et votre formulaire sera en direct sur votre page !

On vous avait dit que c'était facile, comme pour tout avec Formidable.

Obtenez des formulaires formidables maintenant !

Prêt à styliser les formulaires de contact WordPress sur votre site ?

Avoir la possibilité de styliser les formulaires de contact est quelque chose dont vous avez besoin , pas envie.

Vous pouvez voir des recherches pour le plugin Contact Form 7 impliquant leur personnalisation. Des choses comme le CSS du formulaire de contact 7, le texte de type d'entrée dans WPCF7 ou le type d'e-mail d'entrée avec WPCF7.

Rien de tout cela n'est nécessaire avec ces deux méthodes. Et cet article vous a appris à personnaliser un formulaire de contact dans WordPress, afin que votre formulaire ressemble à ce que vous voulez. Que vous saisissiez du HTML personnalisé, du CSS, etc., ou que vous optiez pour Formidable Forms. Vous ne serez pas déçu.

Alors, n'attendez plus. Saisissez Formidable Forms et commencez à concevoir vos formulaires !

Et suivez-nous sur Facebook, Twitter et YouTube pour d'autres trucs et astuces sur les formulaires !

En savoir plus sur le blog Formidable

• Formidables formulaires 6.0 ! Modèles de style, action de formulaire de confirmation et plus
  En savoir plus

  Jotform vs Typeform vs Formidable Forms [Comparé]
  En savoir plus

  Comment utiliser un formulaire de contact WordPress pour rediriger après la soumission
  En savoir plus

Saviez-vous que Formidable Forms est l'un des plugins de création de formulaires WordPress les plus rapides disponibles aujourd'hui ? Si vous ne l'utilisez pas déjà, lancez-vous avec notre plugin gratuit ou la version pro complète !