Résumé IA
Souhaitez-vous savoir comment ajouter des images d'arrière-plan à vos formulaires ? Il est facile de styliser votre formulaire avec une image ou un dégradé de couleurs comme arrière-plan en utilisant CSS !
Ce tutoriel vous montrera comment ajouter une image d'arrière-plan à votre formulaire.
Dans cet article
Note : Les étapes de ce tutoriel nécessitent d'ajouter une classe CSS à votre site. Si vous préférez une approche plus simple qui n'implique pas l'ajout de CSS personnalisé, consultez notre tutoriel sur l'utilisation des thèmes de formulaire pour savoir comment.
1. Choisir une image d'arrière-plan
Vous devrez choisir une image à utiliser comme arrière-plan de votre formulaire pour commencer. Vous pouvez utiliser n'importe quelle image de votre médiathèque, ou n'importe où sur Internet auquel votre site peut accéder.
Considérations à prendre
Pour une lisibilité maximale, assurez un contraste suffisant entre l'image d'arrière-plan et tout texte ou champ de votre formulaire.
Par exemple, évitez d'utiliser du texte clair sur un fond clair. Utilisez plutôt du texte plus foncé sur des arrière-plans pâles, et du texte plus clair sur des arrière-plans foncés.
2. Choisir un formulaire
Ensuite, choisissez le formulaire que vous souhaitez personnaliser. Si vous devez encore créer un formulaire, ajoutez-en un nouveau en cliquant sur WPForms » Ajouter un nouveau.
Vous pouvez choisir parmi l'un des nombreux modèles de formulaire disponibles pour commencer.
Si aucun des modèles par défaut ne correspond à vos besoins, vous pouvez toujours choisir un modèle similaire et le personnaliser dans le Générateur de formulaires.
3. Ajouter une image d'arrière-plan à votre formulaire
Dans le Générateur de formulaires, allez dans Paramètres » Général » Avancé.
À partir d'ici, entrez un nom de classe sous Classe CSS du formulaire. N'hésitez pas à utiliser n'importe quel nom pour votre classe, mais nous recommandons d'ajouter wpf- comme préfixe. Cela permet d'éviter les conflits entre votre code CSS personnalisé et les thèmes ou plugins de votre site.
Note : Pour éviter tout problème, assurez-vous que le nom de votre classe commence par une lettre. N'oubliez pas non plus que les noms de classe en CSS sont sensibles à la casse. Pour plus d'informations, consultez notre guide de stylisation d'introduction et nos tutoriels sur l'ajout de classes à WPForms.
Utiliser une image existante
Si vous souhaitez utiliser une image de votre médiathèque, vous aurez besoin de l'URL complète de l'image. Pour l'obtenir, allez d'abord dans Média » Bibliothèque depuis le tableau de bord d'administration de WordPress.
À partir d'ici, cliquez sur l'image que vous souhaitez utiliser.
Dans la boîte de dialogue qui s'ouvre, cliquez sur Copier l'URL dans le presse-papiers.
Cela copiera l'URL de l'image dans votre presse-papiers.
Note : Pour les images provenant d'autres sources sur Internet, copiez l'URL en cliquant avec le bouton droit de la souris sur l'image, puis en cliquant sur Copier l'adresse de l'image.
Le texte du menu que vous voyez peut être légèrement différent selon le navigateur de votre choix. Cependant, il remplira la même fonction que de cliquer sur Copier l'URL dans le presse-papiers dans la médiathèque.
Une fois que vous avez fait cela, retournez au tableau de bord d'administration de WordPress et allez dans Apparence » Personnaliser, puis choisissez CSS additionnel.
Ensuite, créez une classe personnalisée avec la propriété background-image, et collez l'URL que vous avez copiée précédemment.
Nous avons écrit un exemple de classe ci-dessous. N'oubliez pas de remplacer /path/wpforms-backdrop.png par l'URL réelle de votre image.
Vos paramètres devraient ressembler à ceci.
Une fois que vous êtes sûr que votre code est correct, cliquez sur Publier pour enregistrer vos modifications.
S'il n'y a pas d'erreurs dans votre code, votre formulaire aura maintenant une image d'arrière-plan. Voici un exemple de formulaire utilisant le code ci-dessus :
Utiliser un dégradé comme image d'arrière-plan
Avec CSS, les dégradés de couleurs peuvent être utilisés comme images, et cette solution fonctionne également avec vos formulaires. Les dégradés sont hautement personnalisables et peuvent utiliser n'importe quel nombre de couleurs.
Étant donné que les dégradés sont auto-générés, vous n'avez pas besoin d'une image source de votre médiathèque ou d'ailleurs sur Internet. Cela offre l'avantage d'une vitesse et d'une unicité accrues. Vous n'aurez pas non plus à vous soucier de la disparition de l'image source.
Il existe trois types de dégradés disponibles en CSS :
conic-gradient()linear-gradient()radial-gradient()
Note : Si vous souhaitez en savoir plus sur l'utilisation des dégradés en CSS, nous vous recommandons de lire cette page sur le réseau des développeurs Mozilla.
Dans cet exemple, nous vous montrerons comment utiliser un dégradé linéaire simple comme arrière-plan pour votre formulaire. Écrivez simplement votre classe comme vous l'avez fait précédemment, mais au lieu d'utiliser une URL, nous utiliserons la fonction CSS linear-gradient().
Pour voir comment cela fonctionne, consultez l'exemple de code ci-dessous :
.wpf-custom-background {
background-image: linear-gradient(#0299ed, #FFFFFF) !important;
/*Padding isn't necessary, but highly recommended*/
padding: 15px 35px !important;
}
Cela produira un dégradé doux du bleu au blanc comme image d'arrière-plan de votre formulaire :
Note : Si vous préférez utiliser une solution sans code pour générer vos dégradés, vous pouvez utiliser des ressources en ligne, telles que CSS Gradient (cssgradient.io).
Questions fréquemment posées
Ci-dessous, nous avons répondu à certaines des questions les plus fréquentes sur l'ajout d'une image d'arrière-plan aux formulaires.
Comment ajouter une image d'arrière-plan à mes formulaires qui utilisent le module complémentaire Conversational Forms ?
Si vous ajoutez une image d'arrière-plan en utilisant la méthode décrite ci-dessus, elle ne s'appliquera pas au formulaire. En effet, les formulaires conversationnels utilisent une option de style différente.
Pour ajouter une image d'arrière-plan à un formulaire qui utilise le module complémentaire Conversational Forms, vous devrez utiliser le sélecteur CSS #wpforms-conversational-form-page. Voici un exemple de code. Assurez-vous de remplacer le chemin dans la propriété url() par l'image réelle que vous avez l'intention d'utiliser.
#wpforms-conversational-form-page {
background-image: url(/path/wpforms-backdrop.png) !important;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
}
C'est tout ! Vous savez maintenant comment ajouter une image d'arrière-plan à vos formulaires dans WPForms.
Ensuite, souhaitez-vous savoir comment styliser vos formulaires sans utiliser de code ? Consultez notre guide pour personnaliser WPForms avec CSS Hero.