Ajouter une bordure personnalisée autour de votre formulaire

Souhaitez-vous que votre formulaire se démarque sur votre site web en 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.

Configuration de votre formulaire

Pour commencer, vous devrez identifier l’ID de votre formulaire. Ceci est essentiel car le code ciblera un formulaire spécifique à l’aide de cet ID. Si vous avez besoin d’aide pour trouver l’ID de votre formulaire, veuillez consulter notre guide sur la recherche des ID de formulaire et de champ.

Ajout du code de bordure

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 CSS personnalisé.

Le code ci-dessus ajoute une bordure à votre formulaire avec un style supplémentaire pour un meilleur attrait visuel. Voici ce que fait chaque ligne :

• À la ligne 2, remplacez 1234 par l’ID réel de votre formulaire.
• À la ligne 3, vous pouvez modifier la largeur de la bordure (2px), le style (solid) et la couleur (#333333).
• À la ligne 4, le rembourrage crée un espace entre les éléments de votre 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 ! Souhaitez-vous également centrer vos formulaires ? Consultez notre tutoriel sur Comment centrer un formulaire.