Résumé IA
Souhaitez-vous ajouter des styles personnalisés à vos formulaires ou leur appliquer plus de styles de thème ? WPForms inclura par défaut des styles complets pour garantir que vos formulaires s'affichent parfaitement avec n'importe quel thème WordPress. Cependant, cela peut rendre plus difficile l'application de CSS personnalisé ou l'affichage des styles du thème.
Ce tutoriel explique comment choisir le niveau de style de thème inclus dans vos formulaires à l'aide du paramètre Inclure le style du formulaire dans WPForms.
Dans cet article
Ajustement du paramètre « Inclure le style du formulaire »
Pour modifier la quantité de CSS incluse par WPForms, accédez à WPForms » Paramètres dans le menu d'administration de votre WordPress.
Dans la section Général, vous trouverez le menu déroulant Inclure le style du formulaire. Par défaut, ce menu déroulant sera défini sur Styles de base et du thème du formulaire.
Remarque : Le résultat de chaque option de style disponible peut varier considérablement d'un thème à l'autre. Pour de meilleurs résultats, nous vous recommandons de conserver l'option par défaut Styles de base et du thème du formulaire.
Si vous décidez d'essayer une autre option de style, assurez-vous de cliquer sur le bouton Enregistrer les paramètres pour enregistrer vos modifications.
Remarque :
- Si vous souhaitez styliser vos formulaires dans l'éditeur de blocs sans écrire de code CSS, activez l'option Utiliser le balisage moderne. Veuillez consulter notre guide sur le style des formulaires pour en savoir plus.
- Les nouveaux utilisateurs de WPForms version 1.8.1 ou supérieure ont le paramètre Balisage moderne activé par défaut. De plus, l'option pour le désactiver est masquée dans le tableau de bord WordPress pour les nouveaux utilisateurs. Consultez notre guide si vous souhaitez savoir comment afficher cette option sur votre page de paramètres.
Activation des styles de base et du thème du formulaire
En utilisant Styles de base et du thème du formulaire, deux couches de CSS seront incluses : les styles de base et les styles du thème du formulaire.
Le thème du formulaire inclut les styles les plus agressifs et remplacera généralement les styles que votre thème WordPress pourrait essayer d'appliquer. C'est la meilleure façon de garantir que vos formulaires s'affichent parfaitement, quel que soit le thème que vous choisissez d'utiliser.
Pour des exemples de ce paramètre de style, examinons comment un formulaire simple apparaît sur deux thèmes courants : Twenty Twenty et Astra.
Vingt Vingt
Astra
Comme vous pouvez le voir sur ces images, les formulaires des deux thèmes ont beaucoup de styles similaires. Par exemple, ils ont la même couleur de bouton de soumission, des arrière-plans blancs dans les champs de saisie et les mêmes tailles de police. Chacun de ces styles, et bien d'autres, provient du style du thème du formulaire.
Cependant, ces formulaires ont toujours quelques styles différents. Par exemple, Twenty Twenty rend le texte du bouton de soumission en gras, et chaque formulaire hérite de la police utilisée par le thème WordPress.
Activation des styles de base uniquement
L'option Styles de base uniquement n'inclura pas les styles du thème du formulaire. Au lieu de cela, elle n'inclura que les styles de base pour WPForms.
Dans la plupart des cas, la différence la plus notable avec ce paramètre concerne les styles de bouton. Les styles de base de WPForms n'incluent aucun style de bouton, de sorte que tous les styles de bouton proviendront du thème de votre site.
Cependant, de nombreux autres styles seront désormais également gérés par votre thème. Avec la plupart des thèmes, vous remarquerez probablement des différences de style assez significatives avec ce paramètre.
Nous utiliserons les mêmes thèmes que ci-dessus comme exemples de ce paramètre dans les captures d'écran ci-dessous. Vous remarquerez que certaines nouvelles différences incluent désormais la taille de la police des étiquettes de champ, l'épaisseur de la police des sous-étiquettes, la couleur d'arrière-plan des champs de saisie et les styles des boutons.
Vingt Vingt
Astra
Problèmes courants de style de base et comment les résoudre
Lorsque vous utilisez le paramètre « Style de base uniquement », quelques problèmes peuvent survenir, en fonction des mises en page de vos formulaires et des autres fonctionnalités que vous avez activées. Ci-dessous, nous avons expliqué comment résoudre les problèmes les plus courants.
Note : Vous souhaitez ajouter des styles personnalisés à votre bouton de formulaire, mais éviter les problèmes avec le paramètre « Style de base uniquement » ? Consultez notre tutoriel sur le style des boutons de soumission afin que vous puissiez utiliser notre paramètre de style de base et de thème de formulaire à la place.
Mises en page multicolonnes
Avec le paramètre « Style de base uniquement » activé, les mises en page multicolonnes ne fonctionneront généralement pas correctement. Pour résoudre ce problème, vous devrez soit revenir à l'option Style de base et thème de formulaire, soit ajouter le CSS suivant à votre site :
Note : Si vous ne savez pas comment utiliser des extraits de CSS personnalisés, veuillez consulter le tutoriel de WPBeginner sur comment ajouter du CSS personnalisé à votre site.
Suppression du style du formulaire (aucun style)
L'option Aucun style empêchera le chargement de tous les styles WPForms pour vos formulaires intégrés. Cela signifie que les seuls styles que vous verrez dans vos formulaires proviendront de votre thème WordPress.
Note : L'option Aucun style est destinée uniquement aux développeurs et nécessitera un CSS personnalisé approfondi.
De plus, de nombreuses options de formulaire ne fonctionneront plus correctement avec ce paramètre. Par exemple, toutes les mises en page de formulaire seront supprimées et les pages des formulaires multipages seront toutes visibles en même temps.
C'est tout ! Vous connaissez maintenant tout ce qu'il faut savoir pour déterminer la meilleure option de style de formulaire pour votre site.
Ensuite, souhaitez-vous découvrir comment personnaliser le bouton de soumission de votre formulaire ? Assurez-vous de consulter notre tutoriel sur le style des boutons de soumission pour plus de détails sur la personnalisation des couleurs, de la taille des boutons, etc.