Générateur de Formulaires CSS
avec des options de customisation

Créez de beaux formulaires & enquêtes gratuits, aussi simplement
qu'1-2-3 grâce au générateur de formulaires CSS 123ContactForm.

Concepteur de Formulaires CSS

123ContactForm est un concepteur simple de formulaires en ligne, qui vous aide à créer de beaux formulaires avec l'éditeur Déplacez et Déposez. Une fois vos formulaires créés, customisez les rapidement avec nos thèmes pour les formulaires CSS pré-établis ou l'éditeur simple pour CSS.

Quand vous utilisez 123ContactForm, le générateur de formulaires CSS, pour votre site, améliorez certains champs, en changeant leur look. C'est facile à customiser grâce au code CSS. Personnalisez tous vos champs (e.g toutes les boîtes de saisies), ou juste un seul. Les formulaires créés avec le concepteur CSS 123ContactForm, comportent des champs à ID uniques, que vous pouvez toujours personnaliser à votre façon.

Personnalisation des Éléments Des Formulaires CSS

Implémentation des formulaires CSS à customisation complète avec le concepteur 123ContactForm

Prenons pour exemple ce formulaire (cliquez pour agrandir). Avec moins de 15 lignes de code CSS, vous pouvez personnaliser les éléments de votre formulaire CSS. Toujours sur cet exemple, disons que vous voulez qu'il ressemble à celui là (cliquez pour agrandir).

Créez votre fichier CSS, mystyle.css par exemple, customisez comme décrit ci dessous, téléchargez le sur notre site, et fixez ses URL à utiliser sur la page Configuration des Formulaires. Ou ajoutez votre code CSS depuis l'interface 123ContactForm.

Simple customisation des éléments du formulaire CSS en moins de 15 lignes de code - cliquez sur + pour plus de détails

+ Si vous regardez le code source de votre formulaire, vous remarquerez que les éléments ont des classes et IDs, comme suit:

<select id="id123-control4346747" name="control4346747" class="class123-select">
La sélection (déroulée) des champs appartient à la classe nommée class123-select et son ID est id123-control4346747. La modification de la classe class123-select utilisant CSS, va modifier à tous les champs sélectionnés. La modification de l'ID id123-control4346747 en utilisant CSS ne va modifier que l'apparence des champs sélectionnés bien particuliers. Ajoutons une bannière rouge à gauche à tous les menus déroulants (sélectionnés) et une bannière bleue en bas de ce menu déroulant uniquement:
.class123-select { border-left:3px solid #FF0000; }
#id123-control4346747 { border-bottom:3px solid #0000FF; }

+ Mettons tous les textes de la page en bleu:

.class123-label, class123-select { color:#0066CC; }

+ Mettons tous les contrôles et labels du formulaire en Verdana 12px en police:

label.descr, p.descr, .class123-radio, .class123-checkbox, .class123-select
{ font-family: Verdana; font-size: 12px; }

+ Ajoutons une bannière verte à gauche de toutes les cases à cocher:

.class123-checkbox { border-left:3px solid #336633; }

+ Ajoutons un arrière plan orange à tous les menus déroulants (selectionnés):

.class123-select option { background: #FF6600; }

+ Changeons le look d'un certain label en ajoutant une bordure violette à gauche:

#id123-title4290919 { border-left:3px solid #660066; }

+ Customisons le look des zones de textes:

#id123-control4290921
{ border: 1px solid red ; border-radius: 10px ; -moz-border-radius: 10px ; -webkit-border-radius: 10px ; }

+ Customisons le bouton de soumission:

#id123-button-send { color: yellow; }
border-left:3px solid #FF00FF

+ Customisons le look des champs de dépôt de fichiers ou de l'espace de saisie de la vérification des chiffres (Captcha):

.swfupload { border-style: dashed; color: #00FF33; }
#id123-captcha
{ background: #FF6600; border-left:3px solid #FF00FF; }

Les éléments simples du formulaires CSS utilisés pour customiser ce formulaire se trouvent ici. Si, après votre lecture de ce tutoriel, vous n'arrivez toujours pas à personnaliser les éléments de votre formulaire CSS, contactez nous.

Obtenir plus d'options de customisation en utilisant l'éditeur Déplacez & déposez


C'est bon, nous avons ajouter un pure code CSS aux éléments du formulaire généré par 123ContactForm. Pour plus de fonctionnalités de customisation de votre formulaire, utilisez notre concepteur de formulaire en ligne, qui ne requiert aucune connaissance technique approfondie. Voici la liste des fonctionnalités les plus utilisées :
Concepteur de Formulaires CSS 123ContactForm - Fonctionnalités