Ir directamente al contenido
Español
Crea un ticket para nuestro equipo de soporte
  • No hay sugerencias porque el campo de búsqueda está vacío.

Cómo personalizar tu formulario de registro y la página de mensaje de registro exitoso usando CSS

¿Te gustaría darle un toque personalizado a tu formulario de registro y a la página de resumen de registro sin ser un experto en código? Esta guía te ofrece consejos sencillos de personalización que puedes aplicar utilizando pequeñas líneas de código.

Paso 1: Elige y copia el código CSS correspondiente

Hemos creado varios fragmentos pequeños de código para ti, cada uno correspondiente a diferentes partes del formulario y de la página de resumen de registro. Puedes seleccionarlos haciendo clic sobre ellos.

Luego, copia el código que aparece en el recuadro verde y haz clic en “Haz clic aquí para el siguiente paso.”

Formulario de registro:

Página de resumen de registro:

Paso 2: Crea tu archivo CSS

CSS te permite modificar la apariencia de distintos elementos de tu formulario de registro, como colores, bordes o tipografía.

Para crearlo, sigue estos pasos:

  1. Abre un editor de texto en tu computadora:

    1. Windows: Usa el Bloc de notas (Notepad).

    2. Mac: Usa TextEdit. Luego cambia a Texto sin formato (Haz clic en Formato > Convertir a texto sin formato — Atajo: ⇧⌘T).

  2. Pega el código que copiaste en el Paso 1.

  3. Guarda el archivo con extensión “.css” (por ejemplo: style.css).

Nota: Si necesitas personalizar varias secciones del formulario y de la página de resumen, simplemente agrega los distintos fragmentos de código dentro de un mismo archivo CSS.

  • Una vez hayas creado tu archivo, ingresa a Eventtia y dirígete al módulo “Registro”, luego a “Configuración avanzada”.

  • Desplázate hasta la sección “Personaliza el formulario de registro con archivos CSS y Javascript” y carga el archivo CSS que creaste en el Paso 2.

  • Finalmente, haz clic en Guardar.

Ahora ya sabes cómo personalizar tu formulario de registro para que esté alineado con tu marca.

 

Cambiar el estilo del botón principal “Guardar”

Modifica la apariencia de los botones de validación (como el botón “Guardar” o “Siguiente”).

.main-card button,
input.btn {
  background-color: #ffffff; /* Background color (White) */
  line-height: 2;
  border-radius: 20px; /* Rounded shape*/
  padding: 6px 24px;
  margin: 0 0 8px 8px;
}

/* Button style on mouseover */
.main-card button:hover,
input.btn:hover {
  background-color: #ffffff; /*Background color on hover (White) */
}

Haz clic aquí para el siguiente paso

Volver a la lista de códigos

Personalizar los colores para la selección de actividades (Workshops)

Define el color principal que se utilizará para resaltar las actividades. (Cambia el color #4a90e2 por el color principal de tu marca).

.workshop__date--selected {
  background-color: #000000 !important; /* Background of the selected date */
  color: white; /* Text for the selected date */
}
.workshop__time--selected {
  color: #4a90e2 !important; /* Texte de l'heure sélectionnée */
  border: 2px solid #4a90e2 !important; /* Border of the selected hour */
}
.workshop__date.workshop__date--selected {
  background-color: #4a90e2 !important; /* Background of the selected date (bis) */
}
.workshop__content {
  border-left: 5px solid #4a90e2 !important; /* Side border of the activity */
}
/* 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; /* Color of arrows */
}

 

Cambiar el color de fondo del mensaje de registro exitoso

 

.attendee-success-message {
  background-color: #ffffff !important; /* Change the green background to white */
}

 

Botón principal:

(Cambia el color #003c78 por el color principal de tu marca). 

.btn-primary-action {
  background-color: #003c78;
}
.btn-primary-action:hover {
  background-color: #003c78;
}