Personnalisez votre formulaire à l'aide de code CSS

17 mai 2023

Essayez le cours vidéo sur le Générateur de Formulaire pour générer de superbes formulaires sans connaissance de CSS!

En plus du générateur de formulaire intégré, vous pouvez également personnaliser vos formulaires à l’aide de CSS dans ce dernier. Ce guide contient quelques exemples de codes CSS que vous pouvez essayer ou utiliser sur vos formulaires. Pour appliquer du CSS à votre formulaire, consultez notre guide expliquant comment injecter du CSS personnalisé.

Définir l’image d’arrière-plan de la page:

A contact form with a lake cabin background
.supernova {
background-image: url('{image_url}');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;
}
body {
background: none;
}

Remplacez {image_url} par votre image d’arrière-plan.

Note

Utilisez une adresse HTTPS pour le lien de l’image pour éviter que le contenu soit bloqué par mesure de sécurité.

Rendre l’arrière-plan de la page transparent

Pratique sur les formulaires intégrés, vous pouvez utiliser le code suivant si vous souhaitez que votre formulaire utilise l’arrière-plan de votre page web.

A white contact form with gray and white checkered background
.supernova, body {
background: none;
}

Rendre l’arrière-plan du formulaire transparent

Le code suivant supprime l’arrière-plan et l’ombre de votre formulaire, le rendant plat et transparent.

A contact form with gray and white checkered background
.form-all {
background: none !important;
box-shadow: none;
}

Supprimer l’espace en haut du formulaire

Pratique sur les formulaires intégrés, le code suivant supprime l’espace supplémentaire au-dessus de votre formulaire.

A side-by-side comparison of an embedded contact form before and after removing the space at the top
body, .form-all {
margin-top: 0;
}

Changer la couleur de fond de l’en-tête

Utilisez le code suivant pour changer la couleur de fond de tous les éléments d’en-tête (Heading) sur votre formulaire.

A contact form with an arrow pointing to its "Contact Us" heading section with a bluish background
.form-header-group, [data-type="control_head"] {
background-color: #c9daf8;
}

Astuce

Pour les propriétés liées à la couleur, vous pouvez utiliser ce sélecteur de couleur pour générer la valeur hexadécimale de votre couleur (par exemple, #a1b2c3).

Changer la couleur du sous-titre

Le code suivant change la couleur du texte des sous-titres de tous les éléments de titre (Heading) de votre formulaire.

A contact form with an arrow pointing to its green "We're available 24/7" subheading
.form-subHeader {
color: #00b000 !important;
}

Changer la couleur de sous les sous-labels

Utilisez le code CSS suivant pour changer la couleur de tous les sous-labels sur votre formulaire.

A contact form with an arrow pointing to the orange "First Name" sub-label
.form-sub-label {
color: #ffb21d;
}

Changer la couleur de l’effet de surbrillance

Vous pouvez utiliser le code suivant pour modifier l’effet de surbrillance sur les champs de saisie

A contact form with an arrow pointhing to the active Name field set with greenish background
.form-line-active {
background: #ccffcc;
}

Changer la couleur de l’étoile pour les champs requis sur le formulaire

Rouges par défaut, le code suivant permet de changer sa couleur.

A contact form with an arrow pointing to a cyan asterisk next to the Name field label
.form-required {
color: cyan !important;
}

Aligner le formulaire sur la gauche

Pratique sur les formulaires intégrés, vous pouvez utiliser le code suivant pour déplacer votre formulaire vers la gauche.

A contact form hugging the left side of the screen
.form-all {
margin: 0;
}

Si vous ne trouvez pas le code CSS dont vous avez besoin pour votre formulaire ou si vous avez besoin d’aide pour personnaliser votre formulaire, n’hésitez pas à contacter notre support.

Contacter l'assistance :

Notre équipe d'assistance clientèle est disponible 24 heures sur 24 et 7 jours sur 7 et notre temps de réponse moyen est d'une à deux heures.
Notre équipe peut être contactée via :

Forum d'assistance : https://www.jotform.com/answers/

Contacter l'assistance Jotform : https://www.jotform.com/contact/

Envoyer un commentaire:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Commentaires :

  • Sandrine Pierville - Profile picture
  • Michel Maelys - Profile picture
  • GUILLERMIN YVES - Profile picture
  • Sébastien du Boullay - Profile picture