💻 Personnalisation des formulaires en ligne Qomon

Vous pouvez entièrement personnaliser vos formulaires en ligne Qomon pour qu'ils correspondent à l'apparence et au style de votre marque. Collaborez avec votre équipe de développement web pour appliquer les styles souhaités.

Les formulaires peuvent être stylisés à l'aide d'un fichier CSS, comme tout autre élément sur votre site web. Bien qu'un style de base soit déjà appliqué (selon vos configurations dans Qomon), vous avez une totale liberté pour remplacer ces styles en utilisant la classe .qomon-form.

🖋 Détails clés

Nom des classes : Les formulaires Qomon utilisent la méthodologie BEM (Block Element Modifier), qui simplifie la structuration et l'utilisation du CSS dans Sass/SCSS.
Style de base : Un style initial est appliqué pour garantir fonctionnalité et esthétique dès le départ.

🛠 Exemple : personnalisation du style de votre formulaire

Voici deux exemples de structure vierge pour vous inspirer :

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 {
		}
	}
}

🌟 Possibilités de personnalisation

Voici ce que vous pouvez accomplir :

Changer les couleurs : Adaptez les couleurs des boutons et des champs à votre palette de marque.
Modifier la mise en page : Créez des mises en page multi-colonnes pour des champs tels que "Prénom" et "Nom".
Styliser les champs : Personnalisez les tailles, les formes et les bordures des champs pour un design unique.

🚀 Limites de la personnalisation

La personnalisation est limitée uniquement par votre imagination et les ressources dont vous disposez ! Travaillez avec votre équipe de design pour concrétiser votre vision.

📚 Lisez ici deux exemples concrets de personnalisation.

💡 Besoin d'aide ? Contactez-nous à [email protected] pour obtenir des conseils.