Comment ajouter un style CSS Focus State aux éléments lors du remplissage d'un formulaire Divi
Publié: 2021-01-27L'un des principaux objectifs de la plupart des sites Web est la soumission de formulaires. C'est ainsi que les entreprises obtiennent des prospects, des abonnés par e-mail, etc. Une conception Web efficace peut rendre la soumission de formulaires plus attrayante pour les visiteurs et un moyen d'augmenter encore plus l'engagement consiste à ajouter un style supplémentaire aux formulaires pendant le processus de « remplissage ». Pour ce faire, nous pouvons exploiter la puissance de l'état de focus dans CSS. En fait, Divi a des options de style de focus pour les champs de formulaire intégrées aux modules de formulaire de Divi (Contact, Email Optin, etc.) afin que vous n'ayez pas à vous fier à des CSS externes pour styler ces champs de formulaire dans l'état de focus.
Dans ce tutoriel, nous allons présenter une manière passionnante de changer le style de plusieurs éléments lorsqu'un visiteur clique sur un champ d'un formulaire Divi. Non seulement vous pourrez ajouter les styles de mise au point intégrés de Divi pour le champ spécifique mis au point, mais vous pourrez également modifier le style des éléments entourant le champ. Cela vous permettra d'améliorer l'interface utilisateur de soumission de formulaire avec des animations et un design subtils.
Commençons!
Aperçu
Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.
Téléchargez la mise en page GRATUITEMENT
Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.
Cliquez sur le bouton Importer.
Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.
Cliquez ensuite sur le bouton importer.
Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devrez effectuer les opérations suivantes :
- Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
- Choisissez l'option « Construire à partir de zéro ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Utilisation de la pseudo-classe CSS :focus-within
Étant donné que Divi dispose déjà d'options intégrées pour styliser un champ de formulaire dans l'état de focus, ce didacticiel concerne également l'extension de ce style de focus à d'autres éléments. Pour obtenir le style d'état de focus supplémentaire, nous utiliserons le Divi Builder et quelques extraits de CSS personnalisés qui utilisent la pseudo-classe :focus .
Ne vous inquiétez pas, ce n'est pas aussi compliqué que cela puisse paraître.
Différence entre :focus et :focus-within
:se concentrer
Semblable à :hover , la pseudo-classe :focus en CSS est utilisée pour appliquer un style à un élément chaque fois qu'il est dans l'état de focus. L'état du focus est généralement déclenché en cliquant sur un élément comme un champ de saisie sur un formulaire. Par exemple, une fois qu'un utilisateur clique dans un champ de formulaire, il active l'état de focus pour le champ. Cela vous permet d'utiliser la pseudo-classe :focus pour cibler le style de ce champ en CSS.
:focus-within
La pseudo-classe :focus cible (ou représente) le style de l'élément qui est dans l'état du focus. Cependant, la pseudo-classe :focus-within va encore plus loin. La pseudo-classe :focus-within cible le style de l'élément en focus ainsi que tout élément qui contient un élément en focus . Cela signifie que vous pouvez cibler n'importe quel élément parent de l'élément en focus et appliquer ces styles pendant que l'élément est en focus. En d'autres termes, je peux cliquer à l'intérieur d'un champ de formulaire et modifier la couleur d'arrière-plan du champ de formulaire (à l'aide de :focus ) et modifier simultanément la couleur d'arrière-plan de la section parent du champ de formulaire (à l'aide de :focus-within ).
Ajouter un style d'état de focus aux éléments lors du remplissage d'un formulaire Divi
Maintenant que nous avons une certaine compréhension du fonctionnement de :focus et :focus , testons-le en ajoutant des styles d'état de focus ensemble dans ce didacticiel.
Ajouter une mise en page prédéfinie
Pour commencer, ajoutez la mise en page prédéfinie de la page Contact du blog de voyage pour lancer la conception de ce didacticiel et obtenir un formulaire de contact prêt à être utilisé comme exemple. Pour ce faire, cliquez sur l'icône de chargement à partir de la bibliothèque dans le menu des paramètres du générateur. Sous l'onglet mises en page prédéfinies, cliquez sur le pack de mise en page du blog de voyage, puis sélectionnez la mise en page de la page de contact. Cliquez ensuite sur le bouton « Utiliser cette mise en page ».
Mettre à jour les paramètres du formulaire de contact
Sur la présentation de la page de contact, ouvrez les paramètres du module de formulaire de contact et mettez à jour le titre avec le texte « Get in Touch ».
Style de mise au point du champ
Sous l'onglet Conception, mettez à jour le style de focus de champ comme suit :
- Couleur d'arrière-plan de la mise au point des champs : rgba(255,107,90,0.15)
- Champs Focus Couleur du texte : #000000
Cela stylisera l'état de mise au point du champ réel (une option commodément native des paramètres de Divi Builder).
Formulaire de contact Classe CSS
Ensuite, ajoutez un CSS personnalisé au formulaire de contact sous l'onglet avancé comme suit :
- Classe CSS : divi-form-focus
Ce sera la classe que nous utiliserons pour cibler les styles de formulaire lorsqu'un champ de formulaire est ciblé.
Mettre à jour les paramètres de colonne
Ensuite, ouvrez les paramètres de la colonne parent du formulaire de contact.
Rembourrage
- Rembourrage : 5 % en haut, 5 % en bas, 3 % à gauche, 3 % à droite
Classe CSS de colonne
Sous l'onglet avancé, attribuez à la colonne la classe CSS suivante :
- Classe CSS : divi-column-focus
Ce sera la classe que nous utiliserons pour cibler les styles de colonne lorsque le champ de formulaire (un élément enfant) est focalisé.
Ajouter une classe CSS de section
Afin d'utiliser CSS pour cibler les styles de section lorsqu'un champ de formulaire (également un élément enfant de la section) est sélectionné, ouvrez les paramètres de la section contenant le formulaire de contact et ajoutez la classe CSS suivante :
- Classe CSS : divi-section-focus
Ajout de CSS personnalisé avec un module de code
Comme discuté précédemment, nous utiliserons la pseudo-classe CSS :focus pour styliser d'autres éléments Divi lorsque le champ de formulaire est focalisé. Les éléments que nous allons styliser (le formulaire, la colonne et la section) ont déjà reçu une classe personnalisée que nous pouvons utiliser pour les cibler dans notre CSS (« divi-form-focus », « divi-column-focus » , « divi-section-focus »).
Maintenant, tout ce que nous avons à faire est d'ajouter notre code CSS. Pour ce faire, ajoutez un module de code sous le module de formulaire de contact.
Collez ensuite le code suivant dans la zone de contenu du code :
Assurez-vous d'envelopper le code avec les balises de style nécessaires.
/*add smooth transitions for focus state styles*/
.divi-form-focus, .divi-column-focus, .divi-section-focus, .divi-form-focus h2 {
transition: all 300ms
}
/*style form module h2 heading in form focus state*/
.divi-form-focus:focus-within h2 {
font-size: 14px !important;
color: #888888;
}
/*style parent column in form focus state*/
.divi-column-focus:focus-within {
background: #ffffff;
transform: scale(1.2);
box-shadow: 0 0 30px rgba(0,0,0,0.2);
}
/*style parent section in form focus state*/
.divi-section-focus:focus-within {
background: rgba(255,107,90,0.15);
}
Notez que chacun des extraits CSS qui ont la classe CSS de l'élément (c'est-à-dire "divi-column-form") a la pseudo-classe :focus-within afin de représenter le style de cette classe d'élément lorsque le champ de formulaire est focalisé. Un extrait stylise le h2 (ou le titre) du formulaire dans l'état de focus du formulaire. Un extrait stylise la colonne parente dans l'état de focus du formulaire. Et un extrait stylise la section parent dans l'état de focus du formulaire.
Résultat final
Voici le résultat final. Remarquez comment les différents éléments changent de style lorsque vous remplissez le formulaire.
Dernières pensées
L'ajout de styles de focus CSS aux éléments lors du remplissage d'un formulaire dans Divi peut vraiment améliorer l'expérience utilisateur de la soumission de formulaire. La clé consiste à utiliser la pseudo-classe :focus-within avec les classes personnalisées que vous ajoutez aux éléments que vous souhaitez styliser lorsque le formulaire est dans l'état de focus. Cela peut être fait avec un minimum de CSS personnalisé ajouté à la page, et si vous êtes habitué à ajouter votre propre CSS personnalisé, les possibilités sont immenses.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!