Souhaitez-vous faire ressortir votre formulaire sur votre site web en lui ajoutant une bordure personnalisée ? Avec un simple extrait de code, vous pouvez ajouter une bordure élégante autour de votre formulaire pour améliorer son attrait visuel et le rendre plus visible sur votre page.
Ce guide vous montrera comment ajouter et personnaliser une bordure autour de vos WPForms.
Mise en place du formulaire
Pour commencer, vous devez identifier l'identifiant de votre formulaire. C'est essentiel, car le code ciblera un formulaire spécifique à l'aide de cet identifiant. Si vous avez besoin d'aide pour trouver l'identifiant de votre formulaire, consultez notre guide sur la recherche des identifiants de formulaire et de champ.
Ajout du code de la frontière
Ensuite, vous devrez ajouter l'extrait de code qui créera la bordure autour de votre formulaire. Si vous avez besoin d'aide pour ajouter des extraits de code à votre site, veuillez consulter ce tutoriel sur l'ajout de feuilles de style CSS personnalisées.
Le code ci-dessus ajoute une bordure à votre formulaire, ainsi qu'un style supplémentaire pour un meilleur attrait visuel. Voici ce que fait chaque ligne :
- À la ligne 2, remplacez 1234 par votre numéro d'identification réel.
- Sur la ligne 3, vous pouvez modifier la largeur de la bordure (2px), le style (solide) et la couleur (#333333).
- À la ligne 4, le padding crée un espace entre les éléments du formulaire et la bordure.
- À la ligne 5, border-radius ajoute des coins arrondis à votre formulaire.
- À la ligne 6, background-color définit un arrière-plan blanc pour votre formulaire.
- À la ligne 7, box-shadow ajoute un effet d'ombre subtil autour de votre formulaire.
Si vous souhaitez appliquer ce même CSS à tous vos formulaires, utilisez plutôt ce CSS.
Et c'est tout ce dont vous avez besoin pour placer une bordure autour de votre formulaire ! Vous souhaitez également centrer vos formulaires ? Consultez notre tutoriel sur Comment centrer un formulaire.