---
title: Cómo personalizar tu formulario de registro y la página de mensaje de registro exitoso usando CSS
description: "¿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?\nEsta guía ofrece consejos sencillos de personalización que puedes aplicar utilizando pequeñas líneas de código."
---

[Ir directamente al contenido](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#main-content)

- [Español](https://help.eventtia.com/es/knowledge/c%C3%B3mo-personalizar-tu-formulario-de-registro-y-la-p%C3%A1gina-de-mensaje-de-registro-exitoso-usando-css)
- [English](https://help.eventtia.com/knowledge/how-to-customize-your-registration-form-and-the-successful-registration-message-page-using-css)
- [Français](https://help.eventtia.com/fr/knowledge/comment-personnaliser-son-formulaire-dinscription)

Español

Traducciones de Mostrar submenú de

[Crea un ticket para nuestro equipo de soporte](https://help.eventtia.com/es/knowledge/kb-tickets/new?hsLang=es)

![Logo black transparent background.png\]](https://help.eventtia.com/hs-fs/hubfs/Logo%20black%20transparent%20background.png?height=40&name=Logo%20black%20transparent%20background.png)

Abrir navegación principal

Cerrar navegación principal

- - [Español](https://help.eventtia.com/es/knowledge/c%C3%B3mo-personalizar-tu-formulario-de-registro-y-la-p%C3%A1gina-de-mensaje-de-registro-exitoso-usando-css)
    - [English](https://help.eventtia.com/knowledge/how-to-customize-your-registration-form-and-the-successful-registration-message-page-using-css)
    - [Français](https://help.eventtia.com/fr/knowledge/comment-personnaliser-son-formulaire-dinscription)

  Español
  
  Traducciones de Mostrar submenú de
- [Crea un ticket para nuestro equipo de soporte](https://help.eventtia.com/es/knowledge/kb-tickets/new)
- <https://www.eventtia.com/es/inicio>

<https://www.eventtia.com/es/inicio>

 Bienvenido a la base de conocimiento de Eventtia

- No hay sugerencias porque el campo de búsqueda está vacío.

1. [Base de Conocimientos](https://help.eventtia.com/es/knowledge?hsLang=es)
2. [Configurar y usar los módulos y las funcionalidades de Eventtia](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es)
3. [Registro y Ticketing](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#registro-y-ticketing)

# 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:**

- [Cambiar el estilo del botón principal “Guardar”](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#botonprincipal)
- [Personalizar los colores para la selección de actividades](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#Workshops)

#### **Página de resumen de registro:**

- [Cambiar el color de fondo del mensaje de registro exitoso](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#Registroexitoso)
- [Botón principal](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#botonprincipal)
- [Título del evento – Estilo del borde lateral](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#tituloevento)
- [Botón de calendario – Añadir al calendario](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#calendario)

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

###  Paso 3: Inserta tu archivo CSS en Eventtia

- Una vez hayas creado tu archivo, ingresa a Eventtia y dirígete al módulo **“Registro”**, luego a **“Configuración avanzada”**.  
  ![](https://help.eventtia.com/hs-fs/hubfs/image-png-Feb-16-2026-06-25-27-3347-PM.png?width=670&height=284&name=image-png-Feb-16-2026-06-25-27-3347-PM.png)
- 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.  
  ![](https://help.eventtia.com/hs-fs/hubfs/image-png-Feb-16-2026-06-26-20-7214-PM.png?width=670&height=296&name=image-png-Feb-16-2026-06-26-20-7214-PM.png)
- 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**](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#Paso2)

[**Volver a la lista de códigos**](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#Lista)

### **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 \*/  
}

[ **Haz clic aquí para el siguiente paso**](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#Paso2)

[**Volver a la lista de códigos**](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#Lista)

 

### **Cambiar el color de fondo del mensaje de registro exitoso**

 

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

[**Haz clic aquí para el siguiente paso**](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#Paso2)

[**Volver a la lista de códigos**](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#Lista)

 

### **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;  
}

[**Haz clic aquí para el siguiente paso**](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#Paso2)

[**Volver a la lista de códigos**](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#Lista)

 

### **Título del evento – Estilo del borde lateral:**

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

.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;  
}

[**Haz clic aquí para el siguiente paso**](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#Paso2)

[**Volver a la lista de códigos**](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#Lista)

 

### **Botón de calendario – Añadir al calendario:**

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

.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;  
}

[**Haz clic aquí para el siguiente paso**](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#Paso2)

[**Volver a la lista de códigos**](https://help.eventtia.com/es/knowledge/cómo-personalizar-tu-formulario-de-registro-y-la-página-de-mensaje-de-registro-exitoso-usando-css#Lista)

 

 

- [Configura tu cuenta y crea tu primer evento](https://help.eventtia.com/es/knowledge/configura-tu-cuenta-y-crea-tu-primer-evento?hsLang=es#main-content)

    - [Configura tu cuenta y configura a tus usuarios](https://help.eventtia.com/es/knowledge/configura-tu-cuenta-y-crea-tu-primer-evento?hsLang=es#configura-tu-cuenta-y-configura-a-tus-usuarios)
    - [Crea un evento en 30 minutos](https://help.eventtia.com/es/knowledge/configura-tu-cuenta-y-crea-tu-primer-evento?hsLang=es#crea-un-evento-en-30-minutos)
    - [Conecta tu pasarela de pagos](https://help.eventtia.com/es/knowledge/configura-tu-cuenta-y-crea-tu-primer-evento?hsLang=es#conecta-tu-pasarela-de-pagos)
- [Configurar y usar los módulos y las funcionalidades de Eventtia](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#main-content)

    - [Registro y Ticketing](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#registro-y-ticketing)
    - [Escarapelas/Gafetes/Acreditación](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#escarapelas-gafetes-acreditaci%C3%B3n)
    - [Networking y Rueda de negocios](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#networking-y-rueda-de-negocios)
    - [Programa de eventos](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#programa-de-eventos)
    - [Stage virtual / Web App para eventos virtuales](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#stage-virtual-web-app-para-eventos-virtuales)
    - [Comunicaciones](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#comunicaciones)
    - [Pagos](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#pagos)
    - [Páginas web, Website Composer](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#p%C3%A1ginas-web-website-composer)
    - [Patrocinadores](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#patrocinadores)
    - [Encuestas](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#encuestas)
    - [App de Check-in de los participantes](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#app-de-check-in-de-los-participantes)
    - [Datos, análisis y reportes](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#datos-an%C3%A1lisis-y-reportes)
    - [API](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#api)
    - [Streaming: Transmisión de video y audio](https://help.eventtia.com/es/knowledge/configurar-y-usar-los-m%C3%B3dulos-y-las-funcionalidades-de-eventtia?hsLang=es#streaming-transmisi%C3%B3n-de-video-y-audio)
- [Guías para tus participantes](https://help.eventtia.com/es/knowledge/gu%C3%ADas-para-tus-participantes?hsLang=es#main-content)

    - [Módulo Q&A (Preguntas y respuestas)](https://help.eventtia.com/es/knowledge/gu%C3%ADas-para-tus-participantes?hsLang=es#m%C3%B3dulo-qa-preguntas-y-respuestas)
    - [Aplicación para participantes](https://help.eventtia.com/es/knowledge/gu%C3%ADas-para-tus-participantes?hsLang=es#aplicaci%C3%B3n-para-participantes)
    - [Stage virtual - App para eventos virtuales](https://help.eventtia.com/es/knowledge/gu%C3%ADas-para-tus-participantes?hsLang=es#stage-virtual-app-para-eventos-virtuales)
    - [Rueda de Negocios](https://help.eventtia.com/es/knowledge/gu%C3%ADas-para-tus-participantes?hsLang=es#rueda-de-negocios)
- [Preguntas frecuentes](https://help.eventtia.com/es/knowledge/preguntas-frecuentes?hsLang=es)
- [Errores y problemas comunes: identificación y soluciones](https://help.eventtia.com/es/knowledge/errores-y-problemas-comunes-identificaci%C3%B3n-y-soluciones?hsLang=es)
- [Configura tus transmisiones de video](https://help.eventtia.com/es/knowledge/configura-tus-transmisiones-de-video?hsLang=es#main-content)

    - [Transmite fuera del Virtual Stage](https://help.eventtia.com/es/knowledge/configura-tus-transmisiones-de-video?hsLang=es#transmite-fuera-del-virtual-stage)
- [Módulos](https://help.eventtia.com/es/knowledge/m%C3%B3dulos?hsLang=es#main-content)

    - [Comunicaciones](https://help.eventtia.com/es/knowledge/m%C3%B3dulos?hsLang=es#comunicaciones)
- [Virtual Stage](https://help.eventtia.com/es/knowledge/virtual-stage?hsLang=es)
- [Agrega recordatorios](https://help.eventtia.com/es/knowledge/agrega-recordatorios?hsLang=es#main-content)

    - [Programa](https://help.eventtia.com/es/knowledge/agrega-recordatorios?hsLang=es#programa)
- [Soporte](https://help.eventtia.com/es/knowledge/soporte?hsLang=es)

[![Chill listening crop-3](https://help.eventtia.com/hs-fs/hubfs/Logo%20black%20transparent%20background.png?width=100&height=24&name=Logo%20black%20transparent%20background.png "Chill listening crop-3")](https://www.eventtia.com/)

Centro de ayuda

Copyright © 2026, Eventtia