Comment styliser WPForms à l'aide de l'éditeur de blocs

Cherchez-vous à styliser WPForms à l'aide de l'éditeur de blocs pour des formulaires attrayants et faciles à utiliser sur votre site WordPress ?

WPForms est un plugin intuitif qui simplifie la création et la gestion de formulaires tout en offrant des options de personnalisation étendues. En utilisant l'éditeur de blocs, vous pouvez styliser vos formulaires sans effort pour améliorer votre expérience utilisateur.

Suivez ce tutoriel étape par étape pour maîtriser le style de WPForms à l'aide de l'éditeur de blocs et améliorer la fonctionnalité globale de votre site.

Créez votre formulaire WordPress maintenant

Pourquoi devez-vous styliser vos formulaires ?

En stylisant vos formulaires, vous pouvez améliorer l'esthétique de votre site Web, en veillant à ce qu'il contribue à une expérience utilisateur positive. Voici quelques autres raisons clés pour lesquelles le style des formulaires est crucial pour votre site Web :

• Image de marque cohérente : Créer un formulaire de marque pour qu'il corresponde à la conception et au schéma de couleurs de votre site Web garantit une image de marque cohérente.
• Meilleure expérience utilisateur : Des formulaires bien conçus permettent aux utilisateurs de naviguer/soumettre facilement les informations requises, ce qui entraîne des taux de complétion de formulaire plus élevés.
• Conception réactive : Un formulaire bien stylisé s'adapte sans effort à différentes tailles d'écran et appareils, garantissant une expérience utilisateur fluide pour tous les visiteurs.
• Conversions accrues : Un formulaire visuellement attrayant peut capter l'attention d'un utilisateur et le motiver à accomplir l'action souhaitée, qu'il s'agisse de s'inscrire à une newsletter, d'effectuer un achat ou de soumettre une requête.
• Accessibilité améliorée : Styliser vos formulaires avec des étiquettes claires, un espacement adéquat et des couleurs contrastées peut améliorer l'accessibilité pour les utilisateurs malvoyants, garantissant que votre site Web s'adresse à un public plus large.

Maintenant que vous comprenez l'importance de styliser vos WPForms, il est temps de plonger dans le processus étape par étape pour styliser efficacement vos formulaires à l'aide de l'éditeur de blocs et tirer le meilleur parti du plugin WPForms.

Comment styliser WPForms à l'aide de l'éditeur de blocs

Suivez ces étapes pour apprendre à styliser vos WPForms à l'aide de l'éditeur de blocs Gutenberg sans avoir besoin d'écrire de CSS personnalisé.

1. Installer et activer WPForms

WPForms simplifie le processus de création et de gestion de formulaires sur votre site Web. Le plugin crée sans effort divers formulaires, y compris des formulaires de contact, des enquêtes, des sondages et des formulaires d'inscription, sans connaissances en codage.

La stylisation des formulaires à l'aide de WPForms est également un jeu d'enfant, grâce à son interface conviviale, ses options de personnalisation étendues et sa capacité à créer des formulaires visuellement attrayants et réactifs à l'aide de l'éditeur de blocs.

Pour commencer avec WPForms, vous devez installer le plugin sur votre site WordPress. Une fois activé, suivez les étapes simples ci-dessous pour créer et personnaliser le style de votre formulaire.

2. Créer un formulaire ou utiliser un modèle

Commençons à créer votre formulaire ! Depuis votre tableau de bord WordPress, naviguez vers WPForms et cliquez sur le bouton Ajouter un nouveau.

Lorsque vous y êtes invité, donnez un nom à votre formulaire qui reflète son objectif. Ensuite, vous avez la possibilité de choisir un modèle prédéfini ou de Créer un formulaire vierge.

Ensuite, WPForms ouvrira son interface intuitive de création de formulaires, où vous pourrez personnaliser votre formulaire en ajoutant, modifiant, supprimant ou repositionnant n'importe quel champ de formulaire.

Après avoir configuré les champs du formulaire, vous devrez configurer les Notifications par e-mail pour être alerté lorsque quelqu'un remplit le formulaire et clique sur le bouton d'envoi.

Vous pouvez également configurer le Message de confirmation que les utilisateurs voient une fois le formulaire soumis pour améliorer l'expérience utilisateur.

Avant de passer à l'étape suivante, enregistrez les paramètres de votre formulaire pour éviter de perdre votre progression. Cliquez sur le bouton Enregistrer situé en haut de l'écran.

3. Activer le balisage moderne

Pour améliorer l'accessibilité et permettre la personnalisation visuelle des formulaires dans l'éditeur de blocs, WPForms propose le balisage moderne.

Pour activer le balisage moderne dans WPForms, accédez à la section Paramètres dans WPForms et sélectionnez l'onglet Général.

Faites défiler jusqu'à la section Général pour activer l'option Utiliser le balisage moderne. Avec cette option activée, vous êtes prêt à styliser votre formulaire via l'éditeur de blocs.

WPForms version 1.8.1 et ultérieures activent le balisage moderne par défaut pour les nouveaux utilisateurs, et l'option de le désactiver n'est pas disponible.

Donc, si vous utilisez la dernière version du plugin et que vous ne voyez pas ce paramètre, vous êtes déjà prêt et pouvez commencer à styliser vos formulaires.

Commencez à personnaliser vos formulaires dans l'éditeur de blocs pour profiter des fonctionnalités du balisage moderne, mais d'abord, intégrons le formulaire sur votre site !

4. Intégrer le formulaire sur votre site

Pour intégrer le formulaire que vous avez créé précédemment, ouvrez une page existante ou créez-en une nouvelle. Recherchez le bouton Ajouter un bloc et recherchez le bloc WPForms.

Après avoir inséré le bloc WPForms dans votre page ou article, sélectionnez le formulaire souhaité dans le menu déroulant. Nous pouvons maintenant commencer à styliser votre formulaire avec l'éditeur de blocs !

5. Modifier les styles depuis l'éditeur de blocs

Ouvrez la page ou l'article qui contient votre WPForms dans l'éditeur de blocs. Cliquez sur le bloc WPForms pour ouvrir les options supplémentaires.

Vous découvrirez une variété d'options pour styliser les champs de formulaire, les styles d'étiquettes et les styles de boutons afin de correspondre à l'esthétique de votre marque.

De plus, la section Avancé offre la possibilité de copier les paramètres de style entre les formulaires, simplifiant encore davantage le processus de stylisation.

Découvrez comment utiliser ces différentes options de style ci-dessous pour personnaliser l'apparence de votre formulaire et correspondre au design de votre site Web en un rien de temps :

Styles de champ

Accédez aux options Styles de champ dans les paramètres du bloc WPForms. Localisez les paramètres Taille, Rayon de bordure et Couleur.

Taille

Pour ajuster la taille de vos champs de formulaire, sélectionnez la taille souhaitée dans le paramètre Taille. Les tailles disponibles incluent Petit, Moyen et Grand.

Rayon de bordure

Pour ajuster la bordure de vos champs de formulaire, utilisez le paramètre Rayon de bordure pour définir la valeur de rayon souhaitée. Vos formulaires peuvent maintenant avoir des bords arrondis grâce à cela.

Par défaut, l'unité de mesure pour la taille des éléments de formulaire dans WPForms est définie en pixels (px). Cliquez sur l'Unité de mesure pour afficher un menu déroulant avec différentes options, telles que :

• Pixels (PX)
• Pourcentage (%)
• Carré Em (EM)
• Roentgen équivalent homme (REM)
• Largeur de fenêtre d'affichage (VW)
• Hauteur de fenêtre d'affichage (VH)

Couleurs

Pour ajuster la couleur d'arrière-plan, de bordure et de texte de vos champs de formulaire, ouvrez le paramètre Couleurs dans les paramètres du bloc WPForms.

Cliquez sur l'option de couleur spécifique que vous souhaitez mettre à jour, telle que la couleur d'arrière-plan. Une superposition apparaîtra, montrant les couleurs de thème disponibles parmi lesquelles choisir.

Ensuite, cliquez sur l'échantillon de couleur pour ouvrir le Sélecteur de couleurs, où vous pourrez affiner davantage la couleur.

Un code couleur hexadécimal peut être collé dans la boîte Hex si vous avez déjà une couleur de marque en tête pour vos formulaires.

Styles d'étiquette

Vous pouvez maintenant modifier la taille et la couleur de la police de vos étiquettes de formulaire ici dans la section Styles d'étiquette. Les tailles disponibles vont de Petit à Grand.

Pour mettre à jour les couleurs des étiquettes, sous-étiquettes et messages d'erreur, accédez à la section Couleurs. Voici une description des options de couleur d'étiquette disponibles.

• Étiquette : Ce paramètre détermine la couleur de l'étiquette principale de votre champ.
• Sous-étiquette et Indice : Ce paramètre détermine la teinte utilisée pour les sous-étiquettes et les indices de champ lorsque WPForms suggère des valeurs dans le frontend.
• Message d'erreur :  La couleur du texte qui apparaît si un utilisateur fait une erreur en remplissant votre formulaire.

Styles de bouton

Pour modifier la conception de vos boutons de formulaire dans WPForms, accédez à Styles de bouton. Cliquez sur le menu déroulant sous Taille pour l'ouvrir et sélectionnez la taille du bouton.

Si vous souhaitez donner un rayon de bordure au bouton, il vous suffit de saisir la valeur souhaitée dans le champ intitulé Rayon de bordure.

Ensuite, sous la section intitulée Couleurs, vous trouverez la possibilité de modifier la couleur d'arrière-plan et la couleur du texte de votre bouton.

Dans la plupart des cas, la couleur d'arrière-plan du bouton servira également de couleur d'accentuation. Par conséquent, la couleur d'arrière-plan du bouton sera également utilisée comme couleur principale pour les cases à cocher, les boutons radio, les barres de progression et les champs.

Style avancé

Sous les paramètres Avancé, vous pouvez accéder au code CSS qui inclut tous les styles personnalisés que vous avez appliqués à votre formulaire.

Si vous souhaitez simplement déplacer ces styles vers un autre formulaire, recherchez l'option permettant de copier et coller les paramètres de style.

Si vous souhaitez annuler les modifications apportées à votre formulaire, cliquez sur le bouton Réinitialiser les paramètres de style. Cela rétablira le style par défaut de votre formulaire, annulant toute personnalisation précédente.

Le champ Classe(s) CSS supplémentaire(s) est l'endroit où vous pouvez librement saisir toutes les autres classes CSS que vous avez développées. Lisez notre guide sur comment implémenter de nouvelles classes CSS pour en savoir plus.

6. Tester et publier le formulaire

Il est maintenant temps d'enregistrer vos modifications en publiant la page ou en l'enregistrant comme brouillon. Enfin, effectuez un test rapide pour vous assurer que votre formulaire s'affiche et fonctionne comme vous le souhaitez.

Ensuite, créez des formulaires interactifs qui stimulent l'engagement

Vous cherchez d'autres moyens de personnaliser vos WPForms ? Consultez ces conseils pour faire passer vos formulaires au niveau supérieur. Que vous cherchiez à améliorer l'apparence ou la fonctionnalité de votre formulaire, nous avons ce qu'il vous faut.

Créez votre formulaire WordPress maintenant

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.