Cómo usar CSS personalizado en formularios de registro

Aprende a usar CSS personalizado para asignarle un estilo a tus formularios de registro de Klaviyo que vaya más allá de lo que está disponible en el editor de formularios. La CSS personalizada te brinda un control detallado sobre propiedades como la altura de la línea, el espaciado entre letras y el espaciado entre elementos, para que tus formularios puedan coincidir exactamente con tu marca.

Antes de empezar

Ten en cuenta lo siguiente antes de usar CSS personalizado:

• La CSS personalizada solo está disponible en los planes de pago de Klaviyo. Esta función se está implementando gradualmente, por lo que es posible que aún no la veas en tu cuenta.
• El equipo de asistencia de Klaviyo no puede solucionar el problema del código personalizado. Los problemas causados por CSS personalizados (por ejemplo, diseños rotos, campos ocultos, problemas de renderizado) son responsabilidad tuya para depurar y solucionar. Si un formulario con CSS personalizado no se muestra o no se comporta correctamente, desactiva primero la CSS personalizada para comprobar si tu código es la causa.
• La CSS personalizada solo aplica estilos. No puedes añadir ni editar el HTML de tu formulario o de sus bloques mediante esta función.
• Prueba antes de publicar. Las CSS personalizadas pueden afectar la usabilidad de los formularios (por ejemplo, ocultar accidentalmente un campo obligatorio puede impedir el registro). Previsualiza y prueba siempre tu formulario antes de publicarlo.

Habilitar CSS personalizado

Para habilitar la CSS personalizada en un formulario:

1. Ve a Formularios de registro y abre el formulario en el editor.
2. Selecciona la pestaña Estilos.
3. Desplázate hasta la sección CSS personalizado en la parte inferior del panel.
4. Activa la CSS personalizada.
5. Revisa el mensaje de advertencia. Al habilitar la CSS personalizada, reconoces que el equipo de asistencia de Klaviyo no puede ayudarte con los problemas causados por tu código personalizado.

Una vez habilitado, aparecerá un editor de CSS donde podrás escribir CSS personalizados para tu formulario. CSS personalizado está habilitado para cada formulario; activarlo para un formulario no afecta a tus otros formularios.

Establecer nombres de clases en los componentes del formulario

Cuando se habilita la CSS personalizada, cada componente de tu formulario obtiene un campo de clase CSS, visible en la parte inferior de la barra lateral del componente cuando lo seleccionas. El nombre de la clase toma por defecto el nombre del componente, y puedes anularlo con el tuyo para facilitar el acceso.

Usa estos nombres de clases como selectores en tus CSS. Establecer tus propios nombres de clase es la forma más confiable de dirigirte a los elementos del formulario, ya que permanecen estables y legibles.

Si más tarde inhabilitas la CSS personalizada, los nombres de tus clases se conservarán y volverán a aparecer si la vuelves a habilitar.

Escribe tus CSS

El editor de CSS comienza vacío: no muestra los estilos actuales de tus formularios, porque se generan cuando el formulario se muestra en tu sitio. Para dirigirte a los elementos, usa cualquiera de estos enfoques:

• Usa los nombres de tus clases. Haz referencia a los nombres de clases que estableciste en los componentes de tu formulario (recomendado).
• Inspecciona tu formulario activo. Abre el formulario publicado en tu sitio web y utiliza las herramientas para desarrolladores de tu navegador (clic derecho > Inspeccionar) para identificar los selectores a los que deseas dirigirte.

Evita dirigirte a los nombres de clases generados automáticamente por Klaviyo. Estos son internos, pueden incluir valores hash y pueden cambiar sin previo aviso, lo que rompería silenciosamente tus CSS. Utiliza tus propios nombres de clase en su lugar.

Ejemplo

Supongamos que estableces el nombre de clase form-headline en tu bloque de encabezado y email-input en tu bloque de entrada de correo electrónico:

.form-headline {
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.email-input {
  margin-bottom: 12px;
}

La CSS personalizada también desbloquea estilos que no están disponibles en el editor, como el texto de derecha a izquierda:

.form-headline {
  direction: rtl;
  text-align: right;
}

Previsualizar y publicar

Después de escribir tus CSS:

1. Utiliza el editor de vista previa para comprobar el aspecto de tus formularios.
2. Verifica tu formulario tanto en computadoras como en dispositivos móviles, ya que las CSS personalizadas pueden afectar a cada una de manera diferente.
3. Publica tu formulario en una página que no sea pública para validar cómo aparece en el sitio.
4. Envía un registro de prueba en tu formulario publicado para confirmar que todas las entradas y los botones sigan funcionando.
5. Publica tu formulario públicamente.

Desactivar CSS personalizado

Para eliminar el estilo personalizado, desactiva la opción CSS personalizada en la pestaña Estilos. Vuestro formulario vuelve inmediatamente a su editor de estilo estándar. Esta es también la forma más rápida de comprobar si tienes un problema de visualización causado por tu código personalizado. Tu código CSS anterior se guardará para ti si decides volver a activar la CSS personalizada.

Guía de solución de problemas

Mi CSS no se está aplicando.
Confirma que la CSS personalizada esté activada, que tus selectores coincidan con los nombres de clases establecidos en tus componentes y que hayas publicado la versión más reciente del formulario. Los estilos de tu sitio web también pueden entrar en conflicto con los estilos de formularios o anularlos. Utiliza las herramientas para desarrolladores de tu navegador para comprobar qué reglas están ganando.

Mi formulario parece roto o dejó de recopilar registros.
Desactiva la CSS personalizada para confirmar la causa y luego revisa tu código. Revisa especialmente si tienes reglas que ocultan o reposicionan las entradas y los botones.

No veo la sección CSS personalizado.
La CSS personalizada solo está disponible en los planes de pago y se está implementando gradualmente. Si tienes un plan de pago y aún no lo ves, vuelve pronto.

No se están aplicando los estilos de tipografía de una clase personalizada.

Si los estilos de diseño como margin funcionan, pero los estilos de texto como letter-spacing o line-height no, es probable que la clase personalizada esté adjunta al contenedor externo, mientras que el texto visible se renderiza en un elemento secundario anidado. En ese caso, también apunta a los elementos secundarios; por ejemplo: .form-headline, .form-headline * { ... }.

Preguntas frecuentes

¿Puedo añadir HTML personalizado a mi formulario?
No. No puedes añadir elementos HTML a un formulario ni editar el HTML de los bloques existentes. La CSS personalizada solo cambia el estilo de los componentes existentes de tus formularios.

¿Funciona la CSS personalizada en todos mis formularios?
CSS personalizado está habilitado para cada formulario, para los formularios que se muestran en tu sitio web. Habilítalo individualmente en cada formulario que desees personalizar.

¿El equipo de asistencia de Klaviyo te ayudará a escribir o corregir mi CSS?
No. El equipo de asistencia de Klaviyo no puede escribir, revisar ni solucionar problemas con el código personalizado. Si un formulario con CSS personalizado tiene un problema, se te pedirá que inhabilites la CSS personalizada para descartarlo antes de que el equipo de asistencia pueda investigar más.

¿Qué ocurre con mi CSS si desactivo la función?
Vuestro formulario vuelve al estilo estándar. Los nombres de tus clases de componentes se guardan y restauran si vuelves a habilitar la CSS personalizada.