💻 Personnalisez vos formulaires et pétitions Qomon

Vous pouvez entièrement personnaliser vos formulaires et pétitions 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.

Ils 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 et les pétitions de 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 {
		}
	}
}

🧩 Code personnalisé

Qomon vous permet d'ajouter du code personnalisé directement à votre formulaire en ligne ou pétition. Cette fonctionnalité est particulièrement utile pour ajouter des pixels de suivi (Google Analytics, Meta Pixel, etc.), du style personnalisé ou d'autres scripts.

Comment ajouter du code personnalisé :

Ouvrez votre formulaire en ligne ou pétition dans Qomon, puis cliquez sur Éditer.
Accédez à Paramètres > Code personnalisé.
Choisissez où insérer le code :
- En-tête : Recommandé pour les codes de suivi (Google Analytics, Facebook Pixel, etc.).
- Pied de page : À utiliser pour les scripts qui doivent se charger après le contenu de la page.
Copiez et collez votre code dans le bloc approprié.
Cliquez sur Mettre à jour pour enregistrer vos modifications.

🌟 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.