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. Esta función se está implementando gradualmente, por lo que es posible que aún no la veas en tu cuenta.
• 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. Dirígete 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 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 CSS personalizado está habilitado, 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 se asigna por defecto al nombre del componente, y puedes anularlo con el tuyo para acceder más fácilmente.

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 comienza vacío: no muestra los estilos actuales de tu formulario, ya que se generan cuando el formulario se muestra en tu sitio. Para segmentar los elementos, usa cualquiera 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

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 {
  line-height: 1.2;
  letter-spacing: 0.5px;
}

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

El CSS personalizado 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 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. Publica tu formulario en una página que no sea pública para validar cómo se muestra en el sitio.
4. Envía un registro de prueba en tu formulario publicado para confirmar que todas las entradas y botones sigan funcionando.
5. Publica tu formulario públicamente.

Deshabilitar CSS personalizado

Para eliminar el estilo personalizado, desactiva CSS personalizado 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 un problema de visualización es causado por tu código personalizado. Tu código CSS anterior se guardará para ti 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 estar roto o ha dejado de recopilar registros.
Desactiva el CSS personalizado para confirmar la causa y, a continuación, revisa el código. Comprueba especialmente si hay reglas que oculten o reposicionen entradas y botones.

No veo la sección CSS personalizado.
El CSS personalizado 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 a consultarlo pronto.

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

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

Preguntas frecuentes

¿Puedo añadir HTML personalizado al formulario?
No. No puedes añadir elementos HTML a un formulario ni editar el HTML de los bloques existentes. El CSS personalizado solo cambia el estilo de los componentes existentes de tu formulario.

¿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 deshabilito la función?
Tus formularios volverán a tener el estilo estándar. Los nombres de tus clases de componentes se guardarán y restaurarán si vuelves a habilitar el CSS personalizado.