💻 Comment personnaliser le formulaire en ligne intégré à mon site internet ?

L'ensemble de votre formulaire peut être personnalisé pour s'intégrer parfaitement à votre charte graphique. Rapprochez-vous des personnes en charge de votre site internet pour qu'elles effectuent la personnalisation attendue.

Le formulaire peut être stylisé grâce à un fichier CSS comme n’importe quel autre élément d’une page web.

Il faut cependant savoir qu’un style basique est déjà appliqué afin d’obtenir un premier résultat (conforme à ce que vous avez pu configurer au sein de Qomon). Ce style utilise la classe .qomon-form pour s’appliquer et ne s’appliquera donc pas à d’autres éléments sur votre page.

Les classes ont été nommées en utilisant la méthodologie BEM ce qui permet une utilisation simplifiée en Sass/SCSS.

Voici une structure vierge qui peut vous aider à titre d’exemple :

Sass (Structure vierge)

.qomon-form {
}

// Form page
.qomon-form .main-container {
}

.qomon-form .form-container {
}

.qomon-form .fields-container {
}

.qomon-form .input {
}
.qomon-form .input--firstname,
.qomon-form .input--surname {
}
.qomon-form .input__label {
}
.qomon-form .input__desc {
}
.qomon-form .input__inner {
}
.qomon-form .input__inner__date-formatted {
}
.qomon-form .input__inner:focus {
}
.qomon-form .input__length {
}

.qomon-form .select {
}
.qomon-form .select__label {
}
.qomon-form .select__desc {
}
.qomon-form .select__inner {
} 
.qomon-form .select__placeholder {
}
.qomon-form .select__arrow {
}
.qomon-form .select__option {
}

.qomon-form .radio {
}
.qomon-form .radio__legend {
}
.qomon-form .radio__input {
}
.qomon-form .radio__input__inner {
}
.qomon-form .radio__input__img {
}
.qomon-form .radio__input__label {
}

.qomon-form .address {
}
.qomon-form .address__row {
}
.qomon-form .address--postalcode {
}
.qomon-form .address--city {
}

.qomon-form .legal {
}
.qomon-form .legal__label {
}
.qomon-form .legal__input {
}
.qomon-form .legal__img {
}
.qomon-form .legal__text {
}

.qomon-form .sign-cta {
}
.qomon-form .sign-cta__container {
}
.qomon-form .sign-cta button {
}
.qomon-form .sign-cta button:hover {
}

.qomon-form .privacy {
}
.qomon-form .privacy__link {
}

// Confirmation page
.qomon-form .confirmation {
}
.qomon-form .confirmation__title {
}
.qomon-form .confirmation__body {
}

.qomon-form .social-btn {
}
.qomon-form .social-btn:not(.--color) {
}
.qomon-form .social-btn:not(.--full) {
}
.qomon-form .social-btn.--instagram {
}
.qomon-form .social-btn__inner {
}

Scss (Structure vierge)

.qomon-form {
  .main-container {
  }

  // Form page
  .form-container {
  }

  .fields-container {
  }

  .input {
    &--firstname, &--surname {
    }

    &__label {
    }
    &__desc {
    }
    &__inner {
			&__date-formatted {
			}
			&:focus {
			}
    }
		&__length {
		}
  }

  .select {
    &__label {
    }
    &__desc {
    }
    &__inner {
    }
		&__placeholder {
		} 
		&__arrow {
		} 
		&__option {
		}
  }

  .radio {
    &__legend {
    }
    &__input {
      &__inner {
      }
      &__img {
      }
      &__label {
      }
    }
  }

  .address {
    &__row {
    }

    &--postalcode {
    }
    &--city {
    }
  }

  .legal {
    &__label {
    }
    &__input {
    }
    &__img {
    }
    &__text {
    }
  }

  .sign-cta {
    &__container {
    }
    button {
    }
    button:hover {
    }
  }

  .privacy {
    &__link {
    }
  }

  // Confirmation page
  .confirmation {
    &__title {
    }
    &__body {
    }
  }
 .social-btn {
		&:not(.--color) {
		}
		&:not(.--full) {
		}
		&.--instagram {
		}
		&__inner {
		}
	}
}

Quelques exemples concrets :

Chaque balise du formulaire est dotée d’une classe qui permet de facilement lui ajouter un style dans votre fichier CSS.

Voici par exemple comment changer les couleurs, agrandir la taille des champs et les rendre plus carré, mettre les champs "Prénom" et "Nom" sur une même ligne en 2 colonnes :

Ce résultat a été obtenu à partir de ce code :

.qomon-form .main-container {
  --signButtonBackground: rgb(149, 50, 157);
}

.qomon-form .input--firstname,
.qomon-form .input--surname {
  width: 48%;
}
.qomon-form .input__inner {
  border-radius: 3px;
  height: 50px;
  background-color: rgb(252, 247, 252);
}
.qomon-form .input__inner:focus {
  border-color: rgb(149, 50, 157);
}

.qomon-form .sign-cta__container {
  justify-content: start;
  border: none;
  padding: 0;
  margin-top: 15px;
}
.qomon-form .sign-cta button {
  margin: 0;
  border-radius: 3px;
}
.qomon-form .button-container {
    justify-content: flex-start !important;
  }

  .qomon-form .button-container button {
    margin: 0;
    border-radius: 3px;
  }

Quels sont les limites de personnalisation ?

Les limites dépendent de votre imagination et des ressources en interne dont vous disposez pour appliquer votre style au formulaire Qomon.

Pour vous accompagner, nous mettons à votre disposition quelques exemples complets déployés par nos clients sur leur site internet.

Voir les exemples disponibles