Cómo usar CSS personalizado en formularios de registro

Aprende a usar CSS personalizado para diseñar tus formularios de registro de Klaviyo más allá de lo que esté disponible en el editor de formularios. El CSS personalizado te ofrece un control detallado sobre propiedades como la altura de las líneas, 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 los planes de pago de Klaviyo.
• La asistencia de Klaviyo no puede solucionar los problemas de código personalizado. Los problemas causados por CSS personalizado (por ejemplo, diseños rotos, campos ocultos, problemas de renderizado) son tu responsabilidad de depurar y corregir. Si un formulario con CSS personalizado no se muestra o se comporta correctamente, desactiva primero el CSS personalizado para comprobar si el código es la causa.
• El CSS personalizado solo se aplica al estilo. No puedes añadir o editar el HTML de tu formulario o sus bloques a través de esta función.
• Haz una prueba antes de publicarla. El CSS personalizado puede afectar a la usabilidad de los formularios (por ejemplo, ocultar accidentalmente un campo obligatorio puede impedir que se registren). Previsualiza y prueba siempre el formulario antes de publicarlo.

Habilitar CSS personalizado

Para habilitar el CSS personalizado en un formulario, sigue estos pasos:

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 el CSS personalizado, reconoces que el servicio 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 personalizado para tu formulario. El CSS personalizado está activado para cada formulario; activarlo para un formulario no afecta a tus otros formularios.

Establecer nombres de clase en los componentes del formulario

Cuando se habilita el CSS personalizado, cada componente tiene un campo Nombre de clase en Clases 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, introduce un nombre único en Nombre de la clase, como form-headline. Introduce el nombre sin un punto al principio.

Usa estos nombres de clase como selectores en tu CSS. Establecer tus propios nombres de clase es la forma más fiable de segmentar los elementos de los formularios, ya que se mantienen estables y legibles.

Si más tarde deshabilitas CSS personalizado, los nombres de tus clases se conservarán y volverán a aparecer si vuelves a habilitarlo.

Escribe tu CSS

El editor de CSS empieza vacío, no muestra los estilos actuales del formulario, porque se generan cuando el formulario se renderiza en tu sitio. Después de configurar los nombres de clase, selecciona Editar estilos e introduce las reglas en Código CSS personalizado. Para dirigir elementos, usa uno de estos enfoques:

• Usa los nombres de tus clases. Haz referencia a los nombres de las clases que has establecido en los componentes del 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 quieres dirigirte.

Evita dirigirte a los nombres de las 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. Usa tus propios nombres de clase en su lugar.

Ejemplo

En los bloques de texto, aplica el objetivo al texto dentro del bloque y a su contenedor exterior. La declaración !important que aparece a continuación anula el estilo de altura de línea en línea del texto.

Supongamos que has configurado el nombre de clase form-headline en tu bloque de titular y email-input en tu bloque de entrada de email:

.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 sustituye la alineación del texto en línea del titular:

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

Previsualizar y publicar

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

Después de escribir tu CSS:

1. Utiliza el editor de vista previa para comprobar el aspecto de tu formulario.
2. Verifica tu formulario tanto en ordenadores como en dispositivos móviles, ya que el CSS personalizado puede afectar a cada uno de ellos de forma diferente.
3. Limita el formulario a una página de prueba no pública antes de publicarlo. 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 introduce la URL completa de la página de prueba, incluido https://. En el caso de un formulario que se abre mediante un activador personalizado, actívalo en la página de prueba en su lugar.
4. Selecciona Publicar o programar, elige Publicar ahora y, a continuación, haz clic en Publicar ahora. Resuelve las alertas que bloqueen la operación antes de publicar.
5. Envía un registro de prueba en tu formulario publicado para confirmar que todas las entradas y botones sigan funcionando.
6. Una vez que las pruebas se realicen correctamente, restaura la configuración de segmentación prevista y vuelve a publicar usando Publicar o programar > Publicar ahora. Si utilizas un activador personalizado, haz que el formulario esté disponible a través del activador previsto.

Deshabilitar CSS personalizado

Para eliminar el estilo personalizado, selecciona Editar estilos y desactiva Habilitar CSS personalizado. La vista previa del formulario vuelve 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 al 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.

Solución de problemas

Mi CSS no se aplica.
Confirma que CSS personalizado esté activado, que tus selectores coincidan con los nombres de clase establecidos en tus componentes y que hayas publicado la última versión del formulario. Los estilos de tu sitio web también pueden entrar en conflicto con los estilos de formulario o anularlos. Utiliza las herramientas de desarrollo de tu navegador para comprobar qué reglas están ganando.

Mi formulario parece dañado o dejó de recopilar suscripciones.
Desactiva el CSS personalizado para comprobar la vista previa del formulario y, a continuación, revisa el código. Para comprobar el cambio en el sitio web, vuelve a publicar el formulario. Comprueba especialmente las reglas que ocultan o reposicionan los campos de entrada y los botones.

No veo la sección CSS personalizada.
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 CSS personalizado.

Los estilos de tipografía de una clase personalizada no se aplican.

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é asociada al contenedor externo, mientras que el texto visible se muestra en un elemento secundario anidado. En ese caso, aplica el estilo también a los elementos secundarios; por ejemplo: .form-headline, .form-headline * { ... }. Si el elemento secundario tiene un estilo en línea para la misma propiedad, aplicarlo solo a ese elemento no anulará ese estilo. Añade !important solo a la propiedad que necesitas anular, como en los ejemplos anteriores.

Preguntas frecuentes

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

¿Funciona el CSS personalizado en todos mis formularios?
El CSS personalizado está activado por formulario, para los formularios que se muestran en tu sitio web. Actívalo individualmente en cada formulario que quieras personalizar.

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

¿Qué ocurre 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 activar el CSS personalizado.