Personnalisez Votre Formulaire à l’Aide de Codes CSS Personnalisés

June 28, 2021

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

Tout d’abord, vous devez apprendre à injecter du CSS personnalisé dans votre formulaire avant de pouvoir commencer à personnaliser votre formulaire à l’aide des codes CSS fournis ci-dessous.

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

.supernova {

background-image:url(‘http://www.site.com/image.jpg’);

background-repeat: no-repeat;

background-position: center top;

background-attachment: fixed;

background-size: cover;}

Remplacez l’URL par votre image d’arrière-plan.

Démo

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

.supernova {background:transparent;}

Supprimer l’espacement autour du formulaire:

.jotform-form {padding:0;}

Rendre l’arrière-plan du formulaire transparent:

.form-all {background:transparent;}

Changer la couleur d’arrière-plan de l’entête:

[data-type=”control_head”]{background-color:#FFCC66;}

Modifier la couleur du texte de la sous entête

.form-subHeader {color:#2408FC !important;}

Changer la couleur de toute les sous-étiquettes:

.form-sub-label {color:#FFCC66;}

Changer la couleur de l’effet de surbrillance jaune:

.form-line-active {background:#baffb9;}

Modifier la couleur d’étoile requise pour le formulaire:

.form-required {color: blue !important;}

Supprimez le fond rouge des messages d’erreur:

.form-line-error {background:transparent;}

Alignez le formulaire sur la gauche:

.form-all {margin:0;}

Démo

Créez instantanément une mise en page à deux colonnes sur les champs rétrécis:

.form-line-column {width: 50%;}.form-line-column:nth-child(even) {clear: left;}

Démo

Rendez les champs de carte de crédit dans toutes les intégration de paiement mobile responsive

Copiez les codes CSS ici: http://pastebin.com/raw/UJV3nGf5

Démo

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 à nous le signaler dans la zone de commentaires ci-dessous.

Ce guide vous a-t-il aidé ?

Envoyer un commentaire:

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

Commentaire:

Podo CommentSoyez le premier à commenter.