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:

• El CSS personalizado solo está disponible en planes de pago de Klaviyo.
• 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. Abre el menú Acciones del formulario (3 puntos) y selecciona Editar.
2. Selecciona Editar estilos en la barra lateral izquierda.
3. Desplázate hasta la sección CSS personalizado en la parte inferior del panel.
4. Activa Habilitar CSS personalizado.
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 el CSS personalizado está habilitado, cada componente tiene un campo de Nombre de clase en Clases de CSS. El nombre predeterminado se basa en el tipo de componente, por lo que los componentes del mismo tipo lo comparten.

1. Selecciona el componente en la vista previa del formulario.
2. En clases de CSS, ingresa un nombre único en Nombre de clase, como form-headline. Ingresa el nombre sin un punto inicial.

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 inicia vacío: no muestra los estilos actuales del formulario, ya que se generan cuando el formulario se renderiza en tu sitio. Después de configurar los nombres de las clases, selecciona Editar estilos e ingresa las reglas en código CSS personalizado. Para segmentar 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

En el caso de los bloques de texto, orienta la segmentación al texto dentro del bloque, así como a su contenedor externo. La declaración !important a continuación anula el estilo line-height inline en el texto.

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,
.form-headline * {
  line-height: 1.2 !important;
  letter-spacing: 0.5px;
}

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

El CSS personalizado también permite aplicar estilos que no están disponibles en el editor, como el texto de derecha a izquierda. Este ejemplo sobrescribe la alineación de texto en línea del encabezado:

.form-headline,
.form-headline * {
  direction: rtl;
  text-align: right !important;
}

Previsualizar y publicar

Si tu formulario ya está activo, publicar la segmentación de la página de prueba evitará temporalmente que aparezca en sus páginas habituales. Restablece la segmentación prevista después de hacer las pruebas.

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. Limita el formulario a una página de prueba no pública antes de publicar. Para la segmentación por URL, selecciona Segmentación y comportamiento > Segmentación. En URL, activa Mostrar solo en ciertas URL, selecciona Coincidencia exacta e ingresa la URL completa de la página de prueba, incluida https://. Si el formulario se abre mediante un activador personalizado, actívalo en la página de prueba.
4. Selecciona Publicar o programar, elige Publicar ahora y luego haz clic en Publicar ahora. Resuelve cualquier alerta de bloqueo antes de publicar.
5. Envía un registro de prueba en tu formulario publicado para confirmar que todas las entradas y los botones sigan funcionando.
6. Una vez que las pruebas sean exitosas, restablece la configuración de segmentación que deseas y vuelve a publicar usando Publicar o programar > Publicar ahora. Si usas un activador personalizado, haz que el formulario esté disponible mediante el activador que deseas.

Desactivar CSS personalizado

Para quitar el estilo personalizado, selecciona Editar estilos y desactiva Habilitar CSS personalizado. La vista previa del formulario regresa al estilo estándar del editor. Esta también es la forma más rápida de comprobar si un problema de visualización se debe a tu código personalizado. Para aplicar el cambio en el sitio web, selecciona Publicar o programar, elige Publicar ahora y luego haz clic en Publicar ahora. El código CSS y los nombres de clase de los componentes se guardan si decides volver a activar el CSS personalizado.

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 el CSS personalizado para revisar la vista previa del formulario y luego revisa el código. Para revisar el cambio en el sitio web, vuelve a publicar el formulario. Revisa especialmente las reglas que ocultan o reubican campos de entrada y botones.

No veo la sección de CSS personalizado.
El CSS personalizado está disponible en los planes de pago de Klaviyo. Abre el formulario en el editor, selecciona Editar estilos y desplázate hasta Custom CSS.

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 hijo anidado. En ese caso, aplica el objetivo también a los elementos hijo; por ejemplo: .form-headline, .form-headline * { ... }. Si el elemento hijo tiene un estilo en línea para la misma propiedad, aplicarle el objetivo por sí solo no anulará ese estilo. Agrega !important solo a la propiedad que necesitas anular, como en los ejemplos anteriores.

Preguntas frecuentes

¿Puedo agregar HTML personalizado a mi formulario?
Sí. Con un plan de pago de Klaviyo, puedes agregar un bloque de HTML para contenido personalizado. Esto es independiente del CSS personalizado y no permite editar el HTML de los bloques existentes. Aprende cómo usar un bloque de HTML personalizado.

¿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é sucede con mi CSS si desactivo la función?
La vista previa del formulario vuelve al estilo estándar. Publica el cambio para aplicarlo en el sitio web. El código CSS y los nombres de clase de los componentes se guardan y se restauran si vuelves a habilitar el CSS personalizado.