Passer au contenu principal
Quelques exemples de personnalisation du formulaire en ligne intégré

Le formulaire en ligne Qomon, une fois intégré sur votre site internet, est intégralement personnalisable via l'édition du code CSS.

Aurelien Charrier avatar
Écrit par Aurelien Charrier
Mis à jour il y a plus d'un an

Personnalisation du formulaire en ligne intégré

L'ensemble de votre formulaire en ligne Qomon peut être stylisé pour s'intégrer parfaitement à votre charte graphique.

Si vous avez besoin d'aide pour intégrer un formulaire Qomon à votre site internet, un article d'aide est disponible ici.

Si vous êtes en manque d'inspiration ou simplement curieux, cet article met en avant quelques exemples d'intégrations réalisées par nos clients. Vous n'avez plus qu'à copier/coller le code de votre choix sur votre site internet.

Un article d'aide est à votre disposition si vous avez besoin d'aide sur la méthode de personnalisation ici.

Exemple 1 : Collecter l'adresse email uniquement

⚠️ Prérequis : Vous devez créer un formulaire comprenant uniquement un champ adresse email :

  1. Effacer le nom du champ

  2. Ajouter un placeholder sur le champ Email : " E-mail* "

  3. Renommer le label du bouton par OK

  4. Masquer le consentement Emails

  5. Masquer le consentement Appels/SMS

  6. Masquer la politique de confidentialité

Code CSS à copier/coller ou adapter.

/**
* Change form and submit button background colors
*/
.qomon-form .main-container {
 --formBackground: #a70a2d;
 --signButtonBackground: #a70a2d;
}

/**
* Change the order between legal, input and submit button
*/
.qomon-form .form-container {
 display: flex;
 flex-wrap: wrap;
 position: relative;
}
.qomon-form .legal {
 order: 0;
}
.qomon-form .fields-container {
 order: 1;
}
.qomon-form .sign-cta__container {
 order: 2;
}

/**
* Legal part
*/
.qomon-form .legal__label {
 margin: 0 0 6px;
}
.qomon-form .legal__text {
 color: white;
 font-size: 13px;
 line-height: 1.5;
}

/**
* Input part
*/
.qomon-form .fields-container {
 width: 100%;
}
.qomon-form .input {
 margin: 0;
}
.qomon-form .input__inner {
 height: 40px;
 border-radius: 6px;
 font-size: 13px;
 padding-left: 15px;
}
.qomon-form .input__inner:focus {
 border-color: transparent;
}

/**
* Submit button part
*/
/* Position the button at the right of the input */
.qomon-form .sign-cta__container {
 position: absolute;
 right: 0;
 bottom: 0;
 width: max-content;
}
.qomon-form .sign-cta__container button {
 border: solid 1px white;
 border-radius: 0 6px 6px 0;
 min-width: unset;
 height: 40px;
 font-size: 20px;
 font-weight: bold;
 padding-top: 0;
 padding-bottom: 0;
 transition: all 0.3s;
}
/* Add a transition between colors on focus */
.qomon-form .sign-cta__container button:hover {
 border: solid 1px #a70a2d;
 color: #a70a2d;
 background-color: white;
 filter: none;
}

/**
* Confirmation part (after submission)
*/
.qomon-form .confirmation__title {
  color: white;
}
.qomon-form .confirmation__body p {
  color: white;
}

Exemple 2 : Personnalisation avancée

Télécharger un exemple

⚠️ Prérequis : Pour obtenir le même résultat, vous devez créer un formulaire comprenant l'ensemble des champs suivants (dans cet ordre)

  1. Prénom

  2. Nom

  3. Nom d'usage

  4. Genre

    1. Masquer le Genre "autre"

  5. Date de naissance

    1. Ajouter un placeholder :"jj/mm/aaaa"

  6. Adresse (monobloc)

    1. Afficher le complément d'adresse

    2. Masquer le code postal

  7. Email

  8. Téléphone mobile

Code CSS à copier/coller ou adapter.

/**
* Change label and submit button colors
*/
.qomon-form .main-container {
  --formLabelColor: #9e9e9e;
  --signButtonBackground: #546e7a;
}

/**
* Select specific inputs to apply rules only to them depending on window size
*/
.qomon-form .radio--gender {
  width: 100%;
}

@media (min-width: 768px) {
  .qomon-form .input--firstname,
  .qomon-form .input--surname,
  .qomon-form .input--married_name,
  .qomon-form .input--mail,
  .qomon-form .input--mobile {
    width: calc(50% - 12px);
  }
  .qomon-form .radio--gender,
  .qomon-form .input--birthdate,
  .qomon-form .address--housenumber {
    width: calc(50% - 12px);
  }

  .qomon-form .address--housenumber,
  .qomon-form .address--street {
    margin-top: 20px;
  }
  .qomon-form .input--mail,
  .qomon-form .input--mobile {
    margin-top: 40px;
  }
}

@media (min-width: 930px) {
  .qomon-form .radio--gender,
  .qomon-form .input--birthdate,
  .qomon-form .address--housenumber {
    width: calc(25% - 12px);
  }
}

/**
* Specific rules for radio input
*/
.qomon-form .radio {
  border-bottom: 1px solid #9e9e9e;
  height: 60px;
}
.qomon-form .radio__legend {
  margin-bottom: 0;
}

/**
* Rules for inputs
*/
.qomon-form .input {
  margin-bottom: 20px;
  position: relative;
  height: 60px;
  justify-content: space-between;
}
.qomon-form .input__inner {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  margin-top: 0;
  padding: 0;
}
.qomon-form .input__inner::placeholder,
.qomon-form .input--birthdate .input__inner[data-value=""] {
  color: #9e9e9e84;
}

/**
* Rules for inputs and labels depending on the state of the input
*/
.qomon-form .input__label {
  position: relative;
  top: 34px;
  font-size: 14px;
  transform: translateY(0);
  transition: all 0.2s ease-out;
}
/* If the input has a value or a placeholder change the font-size and the position of the label */
.qomon-form .input__inner:not([data-value=""]) + .input__label,
.qomon-form .input__inner[placeholder] + .input__label,
.qomon-form .input__inner:focus + .input__label,
.qomon-form .input--birthdate .input__label {
  font-size: 12px;
  transform: translateY(-34px);
}
/* If the input is in focus and has a value the label is green */
.qomon-form .input__inner:focus:not([data-value=""]) + .input__label {
  color: #4caf50;
}
/* If the input has a value the input border is green */
.qomon-form .input__inner:not([data-value=""]),
.qomon-form .input__inner:focus:not([data-value=""]),
.qomon-form .radio:is(:valid) {
  border-color: #4caf50;
}
/* If the input is in focus and has no value the label is red */
.qomon-form .input__inner:focus[data-value=""] + .input__label {
  color: #f44336;
}
/* If the input has no value the input border is red */
.qomon-form .input__inner:focus[data-value=""] {
  border-color: #f44336;
}

/**
* Rules for legal part
*/
.qomon-form .legal {
  margin-top: 80px;
}
.qomon-form .legal__label {
  width: 100%;
  justify-content: center;
}
.qomon-form .legal__text {
  min-width: 260px;
}

/**
* Rules for submit button
*/
.qomon-form .sign-cta__container {
  border: none;
  padding: 0;
  margin-top: 40px;
  justify-content: center;
}
.qomon-form .sign-cta button {
  margin: 0;
  border-radius: 2px;
  text-transform: uppercase;
  padding: 8px 16px;
  font-size: 18px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s ease-out;
}
/* Add a box shadow transition on hover */
.qomon-form .sign-cta button:hover {
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14),
    0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
  filter: none;
}

/**
* Rules for privacy part
*/
.qomon-form .privacy {
  text-align: center;
}

Avez-vous trouvé la réponse à votre question ?