Styliser WPForms avec des CSS personnalisés (Guide du débutant)

Souhaitez-vous pouvoir ajouter des styles personnalisés à vos formulaires ? CSS est un outil puissant qui vous permet de donner à vos formulaires un style unique et personnalisé.

Ce tutoriel vous explique comment créer des feuilles de style CSS personnalisées pour styliser vos formulaires, avec de nombreux exemples à l'appui.

---

Qu'est-ce que le CSS ?

CSS est l'abréviation de Cascading Style Sheets (feuilles de style en cascade). Il s'agit du code lu par les navigateurs web pour styliser presque tout ce que vous voyez sur l'internet. Il contrôle tout, de la taille et du style des polices aux couleurs et aux effets de survol. Sans lui, la majeure partie du web ressemblerait à un fichier texte très ennuyeux.

Lecture du CSS

Contrairement à de nombreux autres types de code, les feuilles de style CSS sont relativement faciles à apprendre, même si l'on n'a aucune expérience en matière de codage. La première étape consiste simplement à comprendre les trois principaux composants de CSS :

• Sélecteurs: la "cible" à laquelle vous souhaitez appliquer des styles
• Propriétés: le style spécifique que vous souhaitez modifier, tel que la taille ou la couleur de la police.
• Valeurs: l'effet de style spécifique que vous souhaitez appliquer

À titre d'exemple, voici un extrait de CSS qui définit la taille du titre de votre formulaire :

.wpforms-form .wpforms-title {
    font-size: 26px !important;
}

Le sélecteur dans cet exemple est .wpforms-form .wpforms-title et il appliquera votre CSS au titre de tous les WPForms de votre site.

Ensuite, entre les parenthèses, il y a un CSS propriété dans cet exemple : font-size. Cette propriété dispose d'un valeur de 26 pixels.

Si nous décidons que le texte du titre de notre formulaire doit être plus grand (disons 35 pixels), il nous suffit de modifier cette valeur dans le CSS :

.wpforms-form .wpforms-title {
    font-size: 35px !important;
}

Choisir un sélecteur CSS

La première étape de l'écriture d'un CSS consiste à identifier le sélecteur correct pour cibler une partie spécifique de votre formulaire. Il existe deux façons de choisir un sélecteur :

1) Copier un sélecteur de notre liste

Nous avons créé une liste complète de sélecteurs pour chaque champ disponible dans nos formulaires, de sorte que vous pouvez simplement choisir le sélecteur pour la zone à laquelle vous souhaitez appliquer le CSS.

2) Utiliser les outils de développement de votre navigateur

Cette approche plus avancée peut nécessiter un peu d'apprentissage, mais c'est une excellente option si vous souhaitez créer un grand nombre de feuilles de style CSS personnalisées.

Les outils de développement vous permettent d'inspecter n'importe quelle partie de la page web pour voir quelles feuilles de style CSS sont appliquées. Vous pouvez également tester les changements de CSS à la volée et les voir appliqués directement dans votre navigateur. WPBeginner propose un excellent tutoriel sur l'utilisation des outils de développement qui devrait vous aider à démarrer, y compris une vidéo étape par étape sur l'utilisation des outils de développement de Chrome.

Utilisation des propriétés et valeurs CSS

Maintenant que vous savez comment choisir un sélecteur CSS, nous allons voir comment modifier des styles spécifiques à l'aide de propriétés et de valeurs CSS.

Vous trouverez ci-dessous quelques propriétés CSS de base qui peuvent s'avérer utiles pour vos formulaires. En outre, vous trouverez des exemples de modifications de style que vous pouvez apporter en combinant des sélecteurs, des propriétés et des valeurs pour obtenir un extrait CSS complet.

Il vous suffit de cliquer sur le lien figurant dans cette liste pour passer directement à la section dont vous avez besoin :

• police de caractères
• couleur
• taille de police
• couleur de fond
• rembourrage
• frontière
• rayon de la bordure

font-family

• • Définition : Style de police par défaut
  • Exemple : Pour changer la police par défaut du titre dans les formulaires de votre site en Arial, vous devez utiliser :

.wpforms-form .wpforms-title {
    font-family: 'Arial', sans-serif !important;
}

color

• • Définition : Couleur de la police
  • Exemple : Pour que le titre de tous les formulaires de votre site soit bleu, vous pouvez utiliser :

.wpforms-form .wpforms-title {
    color: #007acc !important;
}

font-size

• • Définition : Taille de la police (les unités peuvent être px, em ou rem)
  • Exemple : Pour que le titre de tous les formulaires de votre site soit de 35px, vous devez utiliser :

.wpforms-form .wpforms-title {
    font-size: 35px !important;
}

background-color

• • Définition : La couleur qui remplit l'arrière-plan de la zone de sélection.
  • Exemple : Pour que l'arrière-plan d'un formulaire soit entièrement gris clair, vous pouvez utiliser la feuille de style CSS suivante :

.wpforms-form {
    background-color: #eee !important;
}

padding

• • Définition : Distance entre l'élément de sélection et sa bordure
  • Exemple : Avez-vous remarqué que l'exemple ci-dessus ne présente aucune distance entre le texte et les bords de la boîte colorée ? En plus de la couleur d'arrière-plan, ajoutons 20 pixels de rembourrage en haut et en bas du formulaire, ainsi que 15 pixels de rembourrage sur les côtés droit et gauche. Pour ce faire, nous ajouterons padding: 20px 15px; au CSS de l'exemple précédent :

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
}

border

• • Définition : Détermine le style et l'épaisseur du bord d'un élément.
  • Exemple : Ajoutons une bordure de 3 pixels d'épaisseur, une ligne continue et un gris foncé à notre exemple ci-dessus. Pour ce faire, nous ajouterons border: 3px solid #666; au CSS existant pour les .wpforms-form:

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
}

border-radius

• • Définition : Le degré de courbure des coins d'un élément (0px est un bord carré, les nombres plus élevés sont plus courbés).
  • Exemple : Nous allons continuer à nous inspirer de l'exemple ci-dessus, en ajoutant un rayon de bordure de 20 pixels pour arrondir les bords de nos formulaires. Nous pouvons le faire en ajoutant border-radius: 20px; au CSS que nous avons déjà mis en place :

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

Styliser un formulaire individuel

En utilisant les sélecteurs CSS décrits ci-dessus, vous pouvez facilement appliquer les mêmes styles à tous les WPForms de votre site. Si vous souhaitez appliquer certains styles à un seul formulaire, vous devez ajouter l'identifiant du formulaire au sélecteur.

Pour trouver facilement l'ID du formulaire, vous pouvez regarder dans son shortcode. Ceci peut être vu dans l'éditeur de page/poste, ou vous pouvez aller dans WPForms " All Forms et regarder dans la colonne Shortcode.

Dans cet exemple, notre formulaire a un ID de 4. Pour appliquer nos styles précédents à ce seul formulaire, nous devons ajouter #wpforms-4 au début du sélecteur. Voici notre CSS modifié :

#wpforms-4 .wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

Une fois que vous avez créé votre snippet CSS, l'étape suivante consiste à l'ajouter à votre site. Vous pouvez apprendre à le faire en suivant le guide de WPBeginner sur l'ajout de CSS personnalisés sur WordPress.

Voilà, c'est fait ! Vous pouvez maintenant créer des styles CSS personnalisés pour vos formulaires. Pour d'autres exemples de CSS permettant de créer des designs de formulaires personnalisés, veuillez consulter notre article sur les beaux designs de formulaires que vous pouvez voler.

Ensuite, vous souhaitez ajouter des styles de boutons d'envoi personnalisés à vos formulaires ? Consultez notre tutoriel sur la personnalisation du bouton d'envoi pour plus de détails et d'exemples.