Utilisation des thèmes de formulaire

Prêt à améliorer le design général de vos formulaires sans écrire de CSS personnalisé ? La fonctionnalité de thèmes de formulaire de WPForms fournit des designs prêts à l'emploi que vous pouvez facilement appliquer à votre formulaire.

Ce tutoriel explique comment utiliser la fonctionnalité de thèmes de formulaire dans WPForms.

---

Avant de commencer, assurez-vous que WPForms est installé et activé sur votre site WordPress.

Accès aux thèmes de formulaire

Pour accéder à la fonctionnalité de thèmes de formulaire dans WPForms, vous devrez d'abord créer un nouveau formulaire ou modifier un formulaire existant pour accéder à l'éditeur de formulaire.

Vous pouvez également utiliser l'un de nos modèles de formulaire pour commencer facilement. Après avoir sélectionné un modèle, vous pourrez ajouter de nouveaux champs ou modifier les champs existants dans le modèle que vous avez sélectionné.

Une fois que vous avez terminé de personnaliser les options de champ et les paramètres de votre formulaire, assurez-vous de sauvegarder vos modifications et d'intégrer le formulaire à une page ou un article sur votre site.

Personnalisation des thèmes de formulaire

Dans l'éditeur de blocs, vous verrez des options pour styliser et personnaliser vos formulaires WordPress. La section Thèmes comprend tous les styles de thème disponibles que WPForms propose.

Dans les sections suivantes, nous présenterons certains des thèmes de formulaire que WPForms propose dès le départ. Cela vous donnera un aperçu de leur apparence une fois appliqués sur votre site.

Moderne (Défaut)

C'est le thème appliqué par défaut à tous les formulaires de votre site. Il utilise une couleur d'accentuation bleue pour les éléments tels que le bouton d'envoi et la barre de progression.

Après avoir sélectionné un thème, vous pouvez mettre à jour les styles du thème, de la même manière que vous le feriez en stylisant votre formulaire dans l'éditeur de blocs.

Une fois que vous mettez à jour l'un des thèmes, une copie du thème original est créée avec les nouveaux styles que vous avez ajoutés. Ce nouveau thème aura (Copie) ajouté à la fin de son nom. Dans notre exemple, le nom est Défaut (Copie).

Vous pouvez renommer le thème personnalisé en modifiant le texte dans le champ Nom du thème.

Sous le champ Nom du thème, vous trouverez le lien Supprimer le thème. Ce lien est utile si vous souhaitez supprimer des thèmes de formulaire personnalisés sur votre site.

Lorsque vous cliquez dessus, une superposition apparaîtra vous demandant de confirmer si vous souhaitez procéder à la suppression. Cliquez simplement sur le bouton Oui, supprimer pour continuer.

Classique

Le style de thème classique utilise un CSS très minimal avec une couleur d'accentuation grise pour le bouton de soumission.

Océan

Le thème de formulaire Océan ressemble au style Moderne avec une couleur d'accentuation bleu sarcelle foncé pour les éléments du formulaire tels que les boutons et les curseurs numériques.

Mandarine

Le style Tangerine utilise des options de style similaires pour les champs. Cependant, il applique une couleur d'accentuation orange aux éléments du formulaire tels que les boutons, les barres de progression, les curseurs numériques, etc.

Aero

Le design Aero applique une couleur d'arrière-plan gris clair au conteneur du formulaire avec une couleur d'accentuation bleue. Il applique également une ombre portée au conteneur. Cela donne au formulaire un aspect moderne et surélevé.

Béton

Le style Béton utilise une couleur d'accentuation rose pour les éléments du formulaire tels que les boutons, la pagination et les curseurs numériques. Il ajoute également une image d'arrière-plan en béton foncé au conteneur du formulaire.

La première fois que vous sélectionnez un thème qui nécessite une image d'arrière-plan, vous devrez télécharger l'image avant que les styles ne soient appliqués. Une superposition apparaîtra vous invitant à télécharger l'image. Cliquez sur Continuer pour télécharger et importer.

Si vous le souhaitez, vous pouvez mettre à jour l'image d'arrière-plan dans la section Styles d'arrière-plan.

Vous pouvez choisir entre la médiathèque de votre site ou des photos de stock comme source d'image. Si vous sélectionnez l'option Photo de stock, vous pourrez choisir parmi les images de stock disponibles en cliquant sur l'image existante.

La section Styles d'arrière-plan contient également des options pour personnaliser la taille, la position et la répétition de l'image.

Si vous souhaitez supprimer l'image d'arrière-plan, cliquez sur le bouton Supprimer l'image.

Élégance

Le style de thème Élégance applique un rayon de bordure autour du conteneur du formulaire. Il utilise également une image d'arrière-plan pour le widget de conteneur du formulaire. Lui donnant un aspect moderne et attrayant.

Frais

Le style de thème Frais ajoute une image d'arrière-plan avec des feuilles vertes fraîches. Il utilise également le vert comme couleur d'accentuation pour les éléments du formulaire tels que les boutons.

Morosité

Ce style de thème de formulaire agit comme un thème en mode sombre avec un arrière-plan sombre autour du conteneur du formulaire. Il utilise une couleur d'accentuation verte pour les éléments du formulaire tels que les boutons et les champs de curseur numérique.

Couloir

Le thème Couloir utilise une couleur d'accentuation foncée pour les éléments du formulaire tels que les boutons, les curseurs numériques, etc. Il applique également une image d'arrière-plan au conteneur du formulaire.

Luxuriant

Ce thème de formulaire applique des ombres portées et des coins arrondis au conteneur du formulaire. Il utilise également une image de stock comme arrière-plan du widget de conteneur.

Monstera

Le thème Monstera utilise un design moderne avec une couleur d'accentuation verte et des coins arrondis pour le conteneur du formulaire. Il applique également une belle image de stock comme arrière-plan du conteneur du formulaire.

Gamme

Ce thème de formulaire utilise un design moderne avec une image de coucher de soleil en arrière-plan. Il applique également des styles tels que des bordures, des coins arrondis et des ombres portées au conteneur du formulaire.

Printemps

Le thème de formulaire Printemps ajoute une ombre portée au conteneur du formulaire et utilise une image de stock en dégradé comme arrière-plan. Il utilise également une couleur d'accentuation bleue pour les éléments du formulaire tels que le bouton de soumission.

Vintage

Ce thème de formulaire a un look and feel vintage. Il utilise une couleur d'arrière-plan personnalisée pour le conteneur du formulaire et une couleur d'accentuation jaune pour les éléments du formulaire.

Après avoir choisi un thème pour votre formulaire, vous devrez soit publier la page, soit l'enregistrer comme brouillon pour sauvegarder vos modifications.

Une fois terminé, vous pouvez intégrer le formulaire dans n'importe quelle partie de votre site et il conservera les styles que vous avez configurés dans la section Thèmes.

Questions fréquemment posées

Voici les réponses à certaines des questions les plus fréquentes concernant l'utilisation des thèmes de formulaire dans WPForms.

Puis-je appliquer les styles de thème de formulaire aux modèles de formulaire ?

Absolument. Une fois que vous avez sélectionné le modèle de formulaire que vous souhaitez utiliser, intégrez-le sur une page avec l'éditeur de blocs activé. Dans l'éditeur de blocs, vous pourrez choisir parmi les styles de thème disponibles pour concevoir votre modèle de formulaire. Consultez la section personnalisation des thèmes de formulaire pour plus de détails.

C'est tout ! Vous savez maintenant comment accéder et utiliser les thèmes de formulaire dans WPForms.

Ensuite, souhaitez-vous apprendre à accepter des paiements via vos formulaires WordPress ? Notre tutoriel sur la création d'un formulaire de paiement couvre toutes les étapes en détail.