Styliser WPForms avec du CSS personnalisé (Guide pour débutants)

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

Ce tutoriel vous guidera dans la création de CSS personnalisés pour styliser vos formulaires, avec de nombreux exemples inclus.

---

Qu'est-ce que le CSS ?

CSS signifie Cascading Style Sheets (Feuilles de Style en Cascade), et c'est le code lu par les navigateurs Web pour styliser presque tout ce que vous voyez sur Internet. Il contrôle tout, de la taille et du style de la police aux couleurs et aux effets de survol. Sans lui, la plupart du Web ressemblerait à un fichier texte très ennuyeux.

Lecture du CSS

Contrairement à de nombreux autres types de code, le CSS est assez facile à apprendre, même sans aucune expérience en codage. La première étape consiste simplement à comprendre les trois principaux composants du 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 de la police ou la couleur
• Valeurs : l'effet de style spécifique que vous souhaitez appliquer

Par exemple, consultez cet 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 accolades, il y a une propriété CSS dans cet exemple : font-size. Cette propriété a une valeur de 26 pixels.

Si nous décidons que nous voulons que le texte du titre de notre formulaire soit plus grand (disons 35 pixels), il nous suffirait de changer cette valeur dans le CSS :

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

Choisir un sélecteur CSS

La première étape pour écrire du CSS consiste à identifier le bon sélecteur 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, vous pouvez donc simplement choisir le sélecteur pour la zone à laquelle vous souhaitez appliquer du CSS.

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

Cette approche plus avancée peut présenter une légère courbe d'apprentissage, mais c'est une excellente option si vous souhaitez créer un tas de CSS personnalisés.

Les outils de développement vous permettent d'inspecter n'importe quelle partie de la page Web pour voir quel CSS est appliqué. Vous pouvez également tester les modifications CSS à la volée et les voir appliquées directement dans votre navigateur. WPBeginner a 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 pouvons discuter de la manière de modifier des styles spécifiques avec des propriétés et des valeurs CSS.

Vous trouverez ci-dessous quelques propriétés CSS de base qui pourraient vous être utiles pour vos formulaires. De plus, 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 créer un extrait de code CSS complet.

Cliquez simplement sur le lien de cette liste pour accéder à la section dont vous avez besoin :

• font-family
• color
• font-size
• background-color
• padding
• border
• border-radius

font-family

• • Définition : Le style de police par défaut
  • Exemple : Pour changer la police par défaut du titre de vos formulaires en Arial, vous utiliseriez :

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

color

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

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

font-size

• • Définition : La taille de la police (les unités peuvent être px, em ou rem)
  • Exemple : Pour rendre le titre de tous les formulaires de votre site de 35 px, vous utiliseriez :

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

background-color

• • Définition : La couleur qui remplira l’arrière-plan de la zone du sélecteur
  • Exemple : Pour rendre tout l’arrière-plan d’un formulaire gris clair, vous pourriez utiliser le CSS suivant :

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

padding

• • Définition : La distance entre l’élément sélectionné et sa bordure
  • Exemple : Avez-vous remarqué comment 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 remplissage en haut et en bas du formulaire, ainsi que 15 pixels de remplissage sur les côtés droit et gauche. Nous le ferons en ajoutant 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 pleine et gris foncé à notre exemple ci-dessus. Nous le ferons en ajoutant border: 3px solid #666; au CSS existant pour .wpforms-form :

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

border-radius

• • Définition : La courbure des coins d’un élément (0 px est un bord carré, des nombres plus élevés sont plus courbés)
  • Exemple : Nous continuerons à développer 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à créé :

.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 formulaires WPForms de votre site. Si vous souhaitez appliquer certains styles à un seul formulaire, vous devrez ajouter l'ID du formulaire au sélecteur.

Pour trouver facilement l'ID du formulaire, vous pouvez le chercher dans son shortcode. Celui-ci peut être vu dans l'éditeur de page/article, ou vous pouvez aller dans WPForms » Tous les formulaires et regarder dans la colonne Shortcode.

Dans cet exemple, notre formulaire a un ID de 4. Pour appliquer nos styles précédents uniquement à ce formulaire unique, nous devrions 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 extrait CSS, la prochaine étape consiste à l'ajouter à votre site. Vous pouvez apprendre comment faire cela en suivant le guide de WPBeginner pour ajouter du CSS personnalisé à WordPress.

C'est tout ! Vous pouvez maintenant créer des styles CSS personnalisés pour vos formulaires. Pour plus d'exemples CSS pour créer des conceptions de formulaires personnalisées, veuillez consulter notre article sur les belles conceptions de formulaires que vous pouvez copier.

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