### [Comment ajouter du CSS au focus des champs de formulaire](https://wpforms.com/developers/how-to-add-css-to-the-form-field-focus/)
**Publié le :** 23 octobre 2020
**Auteur :** Umair Majeed
**Extrait :** Cet article vous montrera comment utiliser le CSS pour ajouter un focus sur les champs de formulaire lorsque les utilisateurs naviguent dans vos champs.
**Contenu :**
Souhaitez-vous améliorer l’apparence de vos champs de formulaire lorsque les utilisateurs interagissent avec eux ? Lorsqu’un utilisateur clique sur un champ de formulaire, celui-ci entre dans ce qu’on appelle un « état de focus » en CSS.
Ce guide vous montrera comment ajouter des effets visuels attrayants qui font que vos champs de formulaire ressortent légèrement de la page lorsque les utilisateurs interagissent avec eux.
## Comprendre le focus des champs de formulaire
Par défaut, WPForms ajoute une simple bordure autour des champs lorsqu’ils sont en focus (lorsqu’un utilisateur clique dessus ou y accède par tabulation). Nous pouvons améliorer ce comportement par défaut avec du CSS personnalisé pour créer un retour visuel plus engageant.
## Configuration de votre formulaire
Tout d’abord, créez votre formulaire et ajoutez les champs souhaités. Si vous avez besoin d’aide pour créer un formulaire, veuillez consulter notre [guide sur la création de votre premier formulaire](https://wpforms.com/docs/creating-first-form/).
## Ajout de CSS pour des effets de focus personnalisés
Pour ajouter des effets de focus personnalisés, vous devrez ajouter du CSS à votre site. Si vous ne savez pas comment ajouter du CSS personnalisé, veuillez consulter notre [guide sur l’ajout de CSS personnalisé à votre site](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
Voici le code CSS pour créer un effet de focus accrocheur :
Ce que fait ce CSS :
- Ajoute un effet d’ombre subtile lorsque les champs sont en focus
- Crée une animation de transition fluide
- Améliore le bouton de soumission avec des effets de survol
## Personnalisation du code
Vous devrez mettre à jour le sélecteur CSS pour qu’il corresponde à l’ID de votre formulaire. Remplacez **form#wpforms-form-1000** par l’ID réel de votre formulaire. Si vous avez besoin d’aide pour trouver l’ID de votre formulaire, consultez notre [guide sur la façon de trouver les ID de formulaire et de champ](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
### Options de personnalisation
Vous pouvez modifier divers aspects de l’effet de focus :
#### Intensité de l’ombre
Ajustez l’ombre en modifiant les valeurs de box-shadow :
```
box-shadow: 5px 5px 10px #ccc; /* horizontal, vertical, flou, couleur */
```
#### Vitesse de l’animation
Modifiez la durée de la transition :
```
transition: box-shadow 0.3s ease-in-out; /* propriété, durée, fonction de temporisation */
```
#### Couleurs et styles
Personnalisez les couleurs et les bordures :
```
button[type=submit]:hover {
background-color: #eee; /* Changer la couleur d’arrière-plan au survol */
border: 1px solid #ccc; /* Changer le style de la bordure */
}
```
## Foire aux questions
#### Q : Comment puis-je ajouter l’autofocus à mon formulaire ?
**R :** Si vous souhaitez que votre formulaire se concentre automatiquement sur le premier champ au chargement de la page, veuillez consulter notre [guide sur la façon d’ajouter l’autofocus à vos formulaires](https://wpforms.com/developers/how-to-add-autofocus-on-your-form/).
Et voilà ! Vous avez ajouté avec succès le CSS nécessaire pour modifier le focus des champs de formulaire. Si vous souhaitez essayer d’autres tutoriels CSS sur la modification de l’apparence de vos champs de formulaire, veuillez consulter notre article sur [l’ajout du design matériel à vos formulaires](https://wpforms.com/developers/how-to-add-material-design-to-your-form-fields-using-css/).
**Catégories :** Style
**Tags :** CSS
---