Assistance
Assistance / Editer des Formulaires et Enquêtes / Créer un formulaire ou une enquête en ligne / Editez les styles des Enquêtes en ligne

Editez les styles des Enquêtes en ligne

Personnalisez vos Enquêtes en ligne en fonction de votre charte graphique en surchargeant leurs styles.

Lors de la création de votre Enquête en ligne, afin que celle-ci réponde au mieux à vos attentes, il vous est possible de gérer ses styles de 2 manières :

  1. Utiliser un style prédéfini
  2. Personnaliser les styles prédéfinis

Utiliser un style prédéfini

Utilisez un style prédéfini pour votre Enquête

Des styles prédéfinis sont mis à votre disposition pour gérer les textes de votre Enquête en ligne. Vous pouvez ainsi modifier plus facilement l'affichage de votre Enquête.

 

Pour changer le style prédéfini de votre Enquête en ligne :

  1. Editez votre Enquête en ligne à partir de Vos opérations > En fabrication si celle-ci est en création ou depuis Vos opérations > En cours si vous l'avez déjà validée,
  2. En étape 1, éditez votre questionnaire et cliquez sur Passer à l'étape suivante,
  3. En étape 2, dans la rubrique Styles utilisés dans l'Enquête, cochez l'option Utiliser un style prédéfini,
  4. Paramétrez les styles comme souhaité grâce à l’Éditeur à votre disposition,
  5. Cliquez sur Passer à l'étape suivante pour valider les modifications.

Retour au début

Personnaliser les styles prédéfinis

 

Surchargez les styles prédéfinis

 

Afin de personnaliser plus particulièrement les styles par défaut d'une Enquête en ligne, vous pouvez également modifier ou ajouter des styles en fonction de vos besoins.

 

Pour ce faire :

  1. Editez votre Enquête en ligne à partir de Vos opérations > En fabrication si celle-ci est en création ou depuis Vos opérations > En cours si vous l'avez déjà validée,
  2. En étape 1, éditez votre questionnaire et cliquez sur Passer à l'étape suivante,
  3. En étape 2, dans la rubrique Styles utilisés dans l'Enquête, cochez l'option Utiliser des styles spécifiques : une nouvelle zone d'édition apparaît avec les différents codes de l'Enquête,
  4. Modifiez chaque style en fonction de vos besoins (cf. tableau ci-dessous),
  5. Cliquez sur Passer à l'étape suivante pour valider les modifications.

 

En consultant notre exemple en ligne, vous pourrez déterminer les styles que vous souhaitez modifier.

Styles Codes
Styles des liens insérés sur des images : Ces styles vous permettent de gérer les liens placés sur des images.Gérez les styles des liens des images /* for img link */
a img {
border:none;
text-decoration:none;
}
Styles du haut de page personnalisé : Ces styles vous permettent de gérer l'alignement ou encore la largeur de votre haut de page.Gérez les styles du haut de page de votre Formulaire  /* Start of formatting style of form Header */.formHeader {
width:750px;
margin:0 auto;
padding:0;
margin-bottom:30px;
text-align:center;
}/* End of formatting style of form Header */
Styles des textes de l'Enquête : Ces styles gèrent par défaut la police, la taille, ou encore la couleur des différents textes de l'Enquête. .formContent {
font-family: « Times New Roman », Times, serif;
font-style: normal;
font-size:14px;
color:#3f3f3f;}
Styles de positionnement de l'Enquête : Ces styles définissent l'alignement et les marges de votre Enquête dans la page web. /* Form size and position */.formContent form {
width:750px;
margin-left:auto;
margin-right:auto;
margin-top:30px;
margin-bottom:30px;}

/* End Form position and size */
Styles du titre principal de l'Enquête : Ces styles vous permettent de préciser par exemple la couleur, l'alignement ou encore la largeur du titre principal.Gérez les styles du titre principal du Formulaire /* Formatting style of the title of the form */
.formTitle {
float:left;
width:750px;
margin-bottom:10px;
font-size: 20px;
font-weight:normal;
color:#0af;
}/* End of Formatting style of the title of the form */
Styles des paragraphes de l'Enquête : Ces styles gèrent par exemple la couleur, l'alignement ou encore la police des différents paragraphes insérés dans votre Enquête.Gérez les styles des paragraphes /* Formatting style of the paragraphs of the form */
.formParagraph {
float:left;
width:100%;
text-align:justify;
margin-bottom:20px;
line-height:18px;
}
/* End of  Formatting style of the paragraphs of the form */
Styles de positionnement des zones de textes : Ces styles définissent l'alignement ou encore la largeur des champs Zone de texte que vous aurez insérés.Gérez les styles des champs Zone de texte  /* formatting style of the title of text boxes on the form */
.formText {
float:left;
width:100%;
margin-bottom:15px;
}/* End of formatting style of the text boxes on the form */
Styles des libellés des zones de textes : Ces styles gèrent par exemple la police, la taille, ou encore la couleur des libellés des champs Zone de Texte.Styles des libellés des zones de textes /* formatting style of the Text label */
.formTextLabel {
float:left;
margin-right:40px; text-align:right;
width:31%;
color:#0af;
font-weight:normal;
}
/* End of formatting style of the Text label */
Styles des champs de saisie : Ces styles vous permettent de préciser une largeur ou encore un alignement pour les zones de saisie.Styles des champs de saisie /* ==>> Start of formatting style of the input */
.formTextInput {
float:left;
width:63%;
}/* For Input */
.formTextInput input {
width:390px; border:solid 1px #0af;
background-color:#fff;}

/* For textarea */
.formTextInput textarea {
width:100%; border:solid 1px #0af;
background-color:#fff;
height:100px;
}

/* End of formatting style of the input */
Styles des champs Commentaires : Ces styles définissent la couleur, la police ou encore la taille des zones de Commentaires.Gérez les styles des champs de Commentaires /* ==>> Start of formatting style of comment */
.formSelectionComment {
background-color: white;
color: black;
display: block;
font-family: « Times New Roman », Times, serif;
font-size: 14px;
font-style: italic;
margin-top: 5px;
margin-left: 25px;
margin-bottom: 5px;
padding: 2px;
width: 415px;
}
/* End of formatting style of comment */
Styles de positionnement des champs à sélection unique : Ces styles permettent de définir l'alignement ou encore la largeur des champs à sélection unique.Styles de positionnement des champs à sélection unique  /* Start of formatting style of Selection Single */
.formSelectionSingle {
float:left;
width:100%;
margin-bottom:15px;}
Styles des libellés des champs à sélection unique : Ces styles précisent par exemple l'alignement, la couleur ou encore la taille des libellés des champs à sélection unique.Styles des libellés des champs à sélection simple /*  ==>> Start of formatting style of Selection Single label */
.formSelectionSingleLabel {
float:left;
margin-right:40px;
text-align:right;
width:31%;
margin-top:2px;
color:#0af;
font-weight:normal;}
Styles de positionnement des valeurs des champs à sélection unique : Ces styles vous permettent de gérer la couleur, la taille ou encore l'alignement des valeurs des champs à sélection unique.Styles de mise en page des valeurs des champs à sélection unique /*  ==>> Start of formatting style of Selection Single Values */
.formSelectionSingleValues {
float:left;
width:63%;
margin-bottom:10px;}
Styles de mise en page des valeurs des champs à sélection unique (menu déroulant) : Ces styles vous permettent de gérer la couleur, la taille ou encore l'alignement des valeurs sélectionnées via des menu déroulant pour les champs à sélection unique.Styles des menus déroulants des champs à sélection simple  /*  ==>> Start of formatting style of Selection Single Select */
.formSelectionSingleValues select {
background-color:#fff;
border:solid 1px #0af;
min-width:60px;
margin-bottom:10px;
font-family: »Times New Roman », Times, serif;}
Styles de positionnement des champs à sélection unique (une valeur par ligne) : Ces styles vous permettent de gérer la couleur, la taille ou encore l'alignement des valeurs pour les champs à sélection unique.Styles des valeurs des champs à sélection simple /*  ==>> Start of formatting style of Selection Single Value */
.formSelectionSingleValueForMultipleLines {
margin-bottom:5px;
display:block;
padding:0;}
Styles de positionnement des champs à sélection unique (plusieurs valeurs par ligne) : Ces styles vous permettent de gérer la couleur, la taille ou encore l'alignement des valeurs pour les champs à sélection unique.Gérez les styles des valeurs des champs à sélection simple /*formatting style of Selection Single Value for single line */
.formSelectionSingleValueForSingleLine {
display:inline;
margin-right:10px;
}
Fin des styles des champs à sélection unique /*End of formatting style of Selection Single */
Styles de positionnement des champs à sélection multiple : Ces styles permettent de définir l'alignement ou encore la largeur des champs à sélection multiple.Gérez les styles des champs à sélection multiple ==>> Start of formatting style of Selection Multiple */
.formSelectionMultiple {
float:left;
width:100%;
margin-bottom:15px;} 
Styles des libellés des champs à sélection multiple : Ces styles précisent par exemple l'alignement, la couleur ou encore la taille des libellés des champs à sélection multiple.Gérez les styles des libellés des champs à sélection multiples /* Formatting style of Selection Multiple Label */
.formSelectionMultipleLabel {
float:left;
margin-right:40px;
text-align:right;
width:31%;
margin-top:2px;
color:#0af;
font-weight:normal;}
Styles de positionnement de la zone des valeurs des champs à sélection multiple : Ces styles vous permettent de gérer la couleur, la taille ou encore l'alignement des valeurs des champs à sélection multiple.Gérez les valeurs des champs à sélection multiple /* Formatting style of Selection Multiple Values*/
.formSelectionMultipleValues {
float:left;
width:63%;
margin-bottom:10px;}
Styles de positionnement des valeurs des champs à sélection multiple (une valeur par ligne) : Ces styles vous permettent de gérer la couleur, la taille ou encore l'alignement des valeurs pour les champs à sélection multiple qui sont ordonnées sur plusieurs lignes.Gérez les valeurs des champs à sélection multiple /* Formatting style of Selection Multiple for mutiple lines */
.formSelectionMultipleValueForMultipleLines {
margin-bottom:5px;
display:block;}
Styles de positionnement des valeurs des champs à sélection multiple (plusieurs valeurs par ligne) : Ces styles vous permettent de gérer la couleur, la taille ou encore l'alignement des valeurs des champs à sélection multiple qui sont mises sur une seule ligne.Gérez les valeurs des champs à sélection multiple /* Formatting style of Selection Multiple for single ligne */
.formSelectionMultipleValueForSingleLine {
display:inline;
margin-right:10px;
}
Fin des styles des champs à sélection multiple /* END of formatting style of Selection Multiple */
Styles de positionnement des champs matriciels : Ces styles vous permettent de gérer l'alignement et la largeur de la zone du champ matriciel.enquete-champ-matriciel

 

 /*  ==>> Start of formatting style of formMatrix */.formMatrix {
float:left;
width:100%;
margin-bottom:15px;}
Styles du libellé champs matriciels : Ces styles déterminent la couleur, la taille ou encore la police des libellés des champs matriciels.Gérez les styles des libellés des champs matriciels /*  ==>> Start of formatting style of form Matrix Label */
.formMatrixLabel {
float:left;
width:100%; margin-top:10px;
margin-bottom:15px;
font-weight:normal;
color:#0af;
text-align: left;}
Styles du tableau du champ matriciel : Ces styles définissent la couleur de bordure, la taille ou encore l'alignement du tableau des champs matriciels.enquete-champ-matriciel /*  ==>> Start of formatting style of form MatrixTable */
.formMatrixTable {
float:left;
width:100%;
margin-left:110px;}/* End of formatting style of form MatrixTable */

/*  ==>> Start of formatting style of form MatrixTable Table */

.formMatrixTable table {
width:80%;
border:none;
}

/* End of formatting style of form MatrixTable Table */
Styles des cellules du tableau du champ matriciel : Ces styles gèrent les caractéristiques des cellules du tableau des champ matriciels tels que la couleur de fond, l'alignement des valeurs, la police, etc.enquete-champ-matriciel /*  ==>> Start of formatting style of form MatrixTable td */.formMatrixTable table td {
background-color:#eee;
color:#3f3f3f;
font-weight: normal;
text-align:center;
margin:3px;}

/* End of formatting style of form MatrixTable td */

 
Styles des titres de colonnes du tableau du champ matriciel : Ces styles déterminent titres des colonnes du tableau des champ matriciels, par exemple la couleur de fond, la taille ou encore la police.Gérez les styles des titres de colonnes du tableau des champs matriciels

 

 /* formatting style of the title of table columns */
.formMatrixTable table td.formMatrixColumnHeader {
background-color:#0af;
color:#fff;
font-size:12px;}
Styles des titres de lignes du tableau des champs matriciels : Ces styles précisent les caractéristiques des titres des lignes du tableau des champ matriciels, par exemple la couleur de fond, la taille ou encore la police.enquete-champ-matriciel-tableau-libelle-ligne  /* formatting of the title lines of the table */
.formMatrixTable table td.formMatrixLineHeader {
background-color:#0af;
color:#fff;
font-size:12px;
}
Styles appliqués au positionnement et à la mise en page du champ captcha : Ces styles gèrent ls caractéristiques de la zone du champ Captcha comme par exemple son alignement, sa taille ou encore sa couleur de fond.Gérez les styles du champ Captcha  /*  ==>> Start of formatting style of Captcha */
.formCaptcha {
float: left;
width:490px;
border:1px solid #0af;
height:90px;
padding-top:17px;
margin-left:230px;
background-color:#eee;
margin-bottom:10px;}
Styles appliqués au positionnement et à la mise en page de l'image du captcha : Ces styles définissent l'alignement, la taille ou encore la bordure de la zone image du captcha.Gérez les styles de l'image du captcha /*  ==>> Start of Formatting style of Captcha image */
.formCaptchaImage {
float:left;
margin-right:20px;
margin-left:20px;
text-align:left;
width:150px;
margin-top:3px;}.formCaptchaImage img {
border:solid 1px #0af;
margin-bottom:10px;

}
Styles du libellé du champ captcha : Ces styles précisent par exemple l'alignement, la couleur ou encore la taille du libellé du captcha.Gérez les styles du libellé du captcha /*  ==>> Start of Formatting style of Captcha Label */.formCaptchaLabel {
float:left;
margin-top:5px;
width:280px;
font-size:14px;
font-weight:normal;}
Styles de positionnement et de mise en forme du champ de saisie de la valeur de sécurité de captcha : Ces styles vous permettent de gérer la largeur ou encore l'alignement de la zone de saisie du champ captcha.Gérez les styles du champ de saisie du captcha /*  ==>> Start of Formatting style of Captcha input */.formCaptchaInput {
float:left;
width:50%;}

.formCaptchaInput input {
background-color:#fff;
border:solid 1px #0af;
width:80px;
margin-bottom:5px;
margin-top:10px;
}
Fin des styles du Captcha /* End of formatting style of Captcha */
Styles du message de confirmation (après validation) : Ces styles vous permettent de définir les caractéristiques du texte de confirmation de validation de l'Enquête telles que sa taille, sa police ou encore sa couleur.Gérez les styles du message de confirmation /*  ==>> Start of formatting style of form Completed */
.formContent .formCompleted {
color: black;
font-family: « Times New Roman », Times, serif;
font-size: 14px;
margin-top: 5px;
margin-bottom: 5px;
text-align:center;
width:750px;
margin:0 auto;
color:#0af;
}
/* END of formatting style of form Completed */
Styles du message d'erreur (suite à validation) : Ces styles vous permettent de définir les caractéristiques du texte signifiant une erreur dans la procédure de validation telles que sa taille, son alignement ou encore sa couleur de fond.Gérez les styles du message d'erreur /* Formatting style of error */
div.formErrorContainer {
width:100%;
padding:10px 0 10px 0;
float:left;}div.formErrorContainer .formErrorMessage {
width:750px;
margin:0 auto;
padding:3px 0 3px 0;
background-color:red;
color: #fff;
font-family: « Times New Roman », Times, serif;
font-size: 16px;
font-style: italic;
text-align:center;
}input.formError, textarea.formError {
border: solid 2px Red;
color: black;
font-family: « Times New Roman », Times, serif;
font-size: 14px;
font-style: italic;
}.formSelectionSingleValueForSingleLine  input.formError,
.formSelectionSingleValueForMultipleLines input.formError {
border: solid 2px Red;
color: black;
font-family: »Times New Roman », Times, serif;
font-size: 12px;
font-style: italic;}.formError {
color: red;
font-family: « Times New Roman », Times, serif;
font-size: 12px;
font-style: italic;
}
Début des styles des bouton Valider, Précédent et Suivant /*  ==>> Start of formatting style of submit, Previous, Next button */
Styles du bloc contenant les boutons (Valider, Suivant, Précédent) : Ces styles gèrent l'alignement, la taille de la zone qui contient le bouton de validation de l'Enquête.  

 

 

 

 /*  ==>> Start of formatting style of form pager */
.formPager {
width:750px;
float:left;
margin-top:20px;
text-align:center;
}/* End of formatting style of form pager */
Styles du bouton Valider : Ces styles précisent la couleur, l'alignement ou encore la police du bouton qui permet de valider la soumission à l'Enquête.
 Gérez les styles du bouton de validation de votre Formulaire

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 /* ==>> Start of formatting style of submit */div.formSubmit {
width:100%;
float:left;
margin-top:20px;
margin-bottom: 40px;
text-align:center;
}div.formSubmit a{
min-width:100px;
text-align:center;
margin-top:10px;
border:solid 2px #bbb;
background-color:#0af;
color:#fff; font-size:14px;
font-weight:normal;
padding:5px;
height:20px;
padding-left:40px;
padding-right:40px;
cursor:pointer;
text-decoration:none;
}div.formSubmit a:hover{
background-color:#3f3f3f;
color:#fff;
}
Styles du bouton Précédent des Enquêtes en ligne : Ces styles précisent la couleur, l'alignement ou encore la police du bouton qui permet de revenir à l'étape précédente de l'Enquête.Gèrez les styles des boutons Précédent de vos Enquêtes en ligne /*  ==>> Start of formatting style of previous */div.formPagerPrevious {
width:40%;
float:left;
margin-top:30px;
}
div.formPagerPrevious a{
min-width:100px;
float:left;
border:solid 2px #bbb;
background-color:#0af;
color:#fff; font-size:12px;
font-weight:normal;
padding:5px;
height:20px;
padding-left:40px;
padding-right:40px;
cursor:pointer;
text-decoration:none;
}div.formPagerPrevious a:hover{
background-color:#3f3f3f;
color:#fff;
}
Styles du bouton Suivant des Enquêtes en ligne : Ces styles précisent la couleur, l'alignement ou encore la police du bouton qui permet de passer à l'étape suivante de l'Enquête.Gérez les styles du bouton Suivant des Enquêtes en ligne /*  ==>> Start of formatting style of next*/div.formPagerNext  {
width:40%;
float: right;
margin-top:30px;
}div.formPagerNext     a{
float: right;
min-width:100px;
border:solid 2px #bbb;
background-color:#0af;
color:#fff; font-size:12px;
font-weight:normal;
padding:5px;
height:20px;
padding-left:40px;
padding-right:40px;
cursor:pointer;
text-decoration:none;
}div.formPagerNext  a:hover{
background-color:#3f3f3f;
color:#fff;
}
Styles de l'indicateur de progression des Enquêtes en ligne : Ces styles déterminent l'alignement, la taille de la zone qui contient l'indicateur de progression. /*  ==>> Start of formatting style of progress */
div.formPagerProgressContainer {
width:18%;
float:left;
margin-top:30px;
}div.formPagerProgress {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #00AAFF;
height: 15px;
padding: 0 2px;
position: relative;
width: 100px;
margin-left:21%;
}
Styles de l'indicateur de progression des Enquêtes en ligne (par page) : Ces styles déterminent la couleur, la hauteur ou encore la police de l'indicateur de progression.Gérez les styles de l'indicateur de progression (par page) /*  ==>> Start of formatting style of progress Bar */
div.formPagerProgress .formPagerProgressBar{
background: none repeat scroll 0 0 #99CCFF;
color: #000000;
display: block;
height: 11px;
margin-top: 2px;
}
Styles de l'indicateur de progression des Enquêtes en ligne (en pourcentage) : Ces styles déterminent la couleur, la hauteur ou encore la police de l'indicateur de progression.Gérez les styles de l'indicateur de progression en pourcentage /*  ==>> Start of formatting style of progress Percentage */
div.formPagerProgress .formPagerProgressPercentage {
font-size: 11px;
left: 15px;
line-height: 15px;
position: absolute;
top: 0;
Styles de l'indicateur de progression des Enquêtes en ligne (barre de progression) : Ces styles déterminent la couleur, la hauteur ou encore la police de l'indicateur de progression.Gérez les styles de l'indicateur de progression }div.formPagerProgress .formPagerProgressText {
font-size: 11px;
left: 15px;
line-height: 15px;
position: absolute;
text-align:center;
top: 0;
}/* END of formatting style of progress */
Fin des styles des boutons Valider, Précédent et Suivant /* END of formatting style of submit, Previous, Next button */
Styles du pied de page personnalisé : Ces styles vous permettent de gérer l'alignement ou encore la largeur de votre pied de page.Gérez les styles de pied de page de votre Formulaire /* Start of formatting style of form Footer */
.formFooterContainer {
width:100%;
float:left;
text-align:center;
}div.formFooter {
width:750px;
margin:0 auto;
padding:0;
}
/* END of formatting style of form Footer *//* End of GLOBAL CSS form */

 

Retour au début

 
 

Voir aussi dans Créer un formulaire ou une enquête en ligne