Vous souhaitez donner une touche personnelle à votre Formulaire d'Inscription et page de résumé d'inscription sans être un expert en code ? Ce guide vous propose des astuces de personnalisation simples à appliquer grâce à de courtes lignes de code.
Étape 1 : Choisissez et copiez le code CSS correspondant
Nous vous avons créé plusieurs petits bouts de code, correspondant à plusieurs parties du formulaire et de la page de résumé d'inscription, choisissez en cliquant dessus.
Ensuite, "Copiez" le code proposé dans l'encadrement vert, puis cliquez sur "Cliquez ici pour l'étape suivante".
Formulaire d'inscription :
- Modifier le Style du Bouton Principal "Enregistrer"
- Personnaliser les Couleurs pour la Sélection d'Activités
Page de résumé d'inscription :
- Modifier la Couleur de Fond du Message d'enregistrement réussi
- Bouton Principal
- Titre de l'Événement – Style avec bordure latérale
- Bouton Calendrier – Ajouter à l'agenda
Étape 2 : Créez votre fichier CSS
Le CSS vous permet de modifier l'apparence de différents éléments de votre formulaire d'inscription, comme les couleurs, les bordures ou la typographie.
Pour le créer, voici les étapes à suivre :
- Ouvrir un éditeur de texte sur votre PC :
- Pour windows : Utiliser le Bloc-Notes (Notepad)
- Pour Mac : Utiliser TextEdit. Ensuite, Passer en Texte Brut (Cliquez sur Format > Sélectionnez Convertir au format Texte brut (Raccourci : ⇧⌘T))
- Coller le code que vous avez copié à l'Étape 1
- Enregistrer et Nommer le Fichier sous l'extension ".css" (Exemple : style.css)
Note : Si vous avez besoin de personnaliser plusieurs sections du formulaire et de la page résumé, il suffit de mettre les différents codes sur un seul fichier CSS.
Étape 3 : Insérez votre fichier CSS sur Eventtia
- Une fois que votre fichier créé, rendez-vous sur Eventtia dans le module "Inscription" puis "Réglages avancés".
- Descendez vers la partie "Personnalisez le formulaire d'inscription avec des fichiers CSS et Javascript", puis insérez le fichier CSS créé dans l'étape 2 :
- Après, vous sauvegardez.
Vous savez maintenant comment personnaliser votre formulaire d'inscription selon votre marque
Modifier le Style du Bouton Principal "Enregistrer"
Changez l'apparence des boutons de validation (comme le bouton "Enregistrer" ou "Suivant").
.main-card button,
input.btn {
background-color: #ffffff; /* Couleur de fond (Blanc) */
line-height: 2;
border-radius: 20px; /* Forme arrondie */
padding: 6px 24px;
margin: 0 0 8px 8px;
}
/* Style du bouton au survol de la souris */
.main-card button:hover,
input.btn:hover {
background-color: #ffffff; /* Couleur de fond au survol (Blanc) */
}
Retour à la liste de code
Personnaliser les Couleurs pour la Sélection d'Activités (Workshops)
Définissez la couleur principale utilisée pour mettre en évidence les activités. (Modifiez la couleur #4a90e2 pour votre couleur principale).
.workshop__date--selected {
background-color: #000000 !important; /* Fond de la date sélectionnée */
color: white; /* Texte de la date sélectionnée */
}
.workshop__time--selected {
color: #4a90e2 !important; /* Texte de l'heure sélectionnée */
border: 2px solid #4a90e2 !important; /* Bordure de l'heure sélectionnée */
}
.workshop__date.workshop__date--selected {
background-color: #4a90e2 !important; /* Fond de la date sélectionnée (bis) */
}
.workshop__content {
border-left: 5px solid #4a90e2 !important; /* Bordure latérale de l'activité */
}
/* Flèches de navigation pour les horaires et les dates */
.workshop__times-row .times__btn-left-scroll.btn-scroll,
.workshop__times-row .times__btn-right-scroll.btn-scroll,
.workshop__dates-row .dates__btn-right-scroll.btn-scroll,
.workshop__dates-row .dates__btn-left-scroll.btn-scroll {
color: #4a90e2; /* Couleur des flèches */
}
Cliquez ici pour l'étape suivante
Retour à la liste de code
Modifier la Couleur de Fond du Message d'enregistrement réussi
.attendee-success-message {
background-color: #ffffff !important; /* Change le fond vert en Blanc */
}
Cliquez ici pour l'étape suivante
Retour à la liste de code
Bouton Principal :
(Modifiez la couleur #003c78 pour votre couleur principale)
.btn-primary-action {
background-color: #003c78;
}
.btn-primary-action:hover {
background-color: #003c78;
}
Cliquez ici pour l'étape suivante
Retour à la liste de code
Titre de l'Événement – Style avec bordure latérale :
(Modifiez la couleur #003c78 pour votre couleur principale)
.header-registration .event-title {
width: 250px;
margin-left: 20px;
padding: 0 30px;
color: #003c78;
border-left: 1px solid #003c78;
font-weight: bold;
font-size: 18px;
line-height: 1.2;
}
.header-registration i {
color: #003c78;
}
Cliquez ici pour l'étape suivante
Retour à la liste de code
Bouton Calendrier – Ajouter à l'agenda :
(Modifiez la couleur #003c78 pour votre couleur principale)
.btn-calendar {
padding: 0 20px;
height: 30px;
display: inline-block;
position: relative;
margin-top: 5px;
border: 2px solid #003c78;
background-color: white;
color: #003c78;
border-radius: 12px;
transition: all 0.2s ease-in-out;
font-size: 14px;
font-weight: bold;
}