Cómo usar un bloque HTML personalizado en formularios de registro

Qué aprenderás

Aprende a usar el bloque HTML personalizado para añadir tu propio marcado a los formularios de registro de Klaviyo, más allá de los bloques disponibles en el editor de formularios. El bloque HTML te ofrece un control detallado sobre el contenido y el diseño (títulos personalizados, texto con formato, listas, tablas, imágenes y enlaces) para que tus formularios puedan coincidir exactamente con tu marca y tus mensajes.

Por seguridad, el bloque HTML solo admite un conjunto específico de etiquetas y atributos. Cualquier cosa fuera de ese conjunto se elimina automáticamente cuando tu formulario se renderiza, por lo que no todo el HTML que escribas aparecerá en el sitio. En las secciones siguientes se enumeran las etiquetas y los atributos que se admiten y que siempre se eliminan.

Antes de empezar

Ten en cuenta lo siguiente antes de usar HTML personalizado:

• El bloque HTML 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.
• Tus HTML se desinfectan automáticamente por seguridad. El bloque HTML mantiene solo las etiquetas y los atributos admitidos y elimina todo lo demás, incluidos los scripts y los controladores de eventos, cuando se renderiza tu formulario. Esto protege a los visitantes de tu sitio de código malicioso. Como resultado, es posible que parte del HTML que escribas no aparezca en el sitio si no es compatible. Puedes consultar la lista de etiquetas de asistencia a continuación.
• El bloque HTML personalizado solo añade contenido nuevo. El bloque HTML te permite añadir tus propios elementos a un formulario. No puedes usarlo para editar el HTML de los bloques existentes de tu formulario.
• La asistencia de Klaviyo no puede solucionar los problemas de código personalizado. Los problemas causados por HTML personalizado (por ejemplo, diseños rotos, contenido que no se muestra, problemas de estilo) son tu responsabilidad de depurar y corregir. Si un formulario con HTML personalizado no se muestra o se comporta correctamente, elimina primero el bloque HTML para comprobar si el código es la causa.
• Haz una prueba antes de publicarla. El HTML personalizado puede afectar al diseño y la facilidad de uso de los formularios. Previsualiza y prueba siempre el formulario tanto en ordenadores como en dispositivos móviles antes de publicarlo.

Añade un bloque HTML a tu formulario

Para añadir HTML personalizado a un formulario, sigue estos pasos:

1. Dirígete a Formularios de registro y abre el formulario en el editor.
2. En el panel de bloques, busca el bloque HTML y arrástralo al formulario donde quieras que aparezca el contenido personalizado.

3. Selecciona el bloque HTML para abrir sus ajustes. Aparecerá un editor de códigos en la barra lateral del bloque.

El bloque HTML funciona como cualquier otro bloque del editor de formularios: puedes añadir más de uno, reposicionarlo y eliminarlo. El HTML personalizado está contenido dentro de su bloque, por lo que no afecta al resto de la estructura de tu formulario.

Escribe tu HTML

El editor de códigos comienza vacío. Introduce tu código HTML directamente, utilizando solo etiquetas y atributos compatibles. Las etiquetas y los atributos no compatibles se eliminarán automáticamente cuando se muestre el formulario.

Ejemplo

<h2 class="promo-heading">Join our list</h2>
<p>Sign up for <strong>15% off</strong> your first order, plus:</p>
<ul>
  <li>Early access to new drops</li>
  <li>Members-only offers</li>
</ul>
<p><a href="https://www.example.com/terms" target="_blank">See terms and conditions</a></p>

Para aplicar estilo a tu HTML, añade tus propios nombres de class a los elementos y selecciónalos con CSS personalizado. Por ejemplo, establece class="promo-heading" en el encabezado y luego aplica estilo a .promo-heading en el editor de CSS personalizado. Consulta Cómo usar CSS personalizado en el formulario de registro para saber cómo habilitar y escribir CSS personalizado.

Etiquetas y atributos HTML admitidos

Por seguridad, el bloque HTML admite las siguientes etiquetas y atributos. Cualquier etiqueta o atributo que no esté en esta lista se eliminará cuando tus formularios se muestren.

Atributos globales: se permiten en todas las etiquetas admitidas: id, class, dir, lang, roley aria-* (atributos de accesibilidad).

En las tablas siguientes se enumeran los atributos adicionales permitidos en etiquetas específicas, más allá de los atributos globales anteriores.

Texto y formato

Encabezados

Listas

Tablas

Medios y enlaces

Esquemas de URL permitidos

Enlaces (href) y fuentes de imagen (src) solo puede usar estos esquemas de URL: http, https, mailto, tely rutas relativas o #fragment anclas. URL que utilizan cualquier otro esquema (como javascript: o data:) se eliminan. Cuando un enlace usa target="_blank", rel="noopener noreferrer" se aplica automáticamente para mantener el enlace seguro.

Se han eliminado etiquetas y atributos por seguridad

Para proteger tu sitio y a tus visitantes, el bloque HTML elimina automáticamente cualquier cosa que pueda ejecutar código o secuestrar tu formulario, una clase de ataque conocido como cross-site scripting (XSS). Los siguientes elementos siempre se eliminan, aunque sean comunes en HTML:

• Guiones: <script> y <noscript>
• Atributos del controlador de eventos: cualquier atributo cuyo nombre comience por on (por ejemplo, onclick, onload, onerror, onmouseover)
• Marcos e incrustaciones: <iframe>, <frame>, <frameset>, <object>, <embed>, <applet>, <portal>
• Etiquetas vectoriales y de lenguaje de marcado: <svg>, <math>
• Etiquetas de documentos y recursos: <base>, <meta>, <link>y el <style> etiqueta
• Esquemas de URL peligrosos en enlaces o fuentes: javascript:, vbscript:, data:, filesystem:
• Atributos de anulación de envío de formulario: formaction, formmethod, formtarget, formenctype
• Etiquetas antiguas o obsoletas: <marquee>, <bgsound>, <keygen>, <isindex>, <xmp>, <listing>, <plaintext>, <template>, <noembed>

Si parte de tu código desaparece cuando se renderiza el formulario, lo más probable es que haya usado una etiqueta o un atributo que no esté en la lista de arriba admitidos.

Previsualizar y publicar

Después de escribir tu HTML:

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 HTML personalizado puede afectar a cada uno 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.

Editar o eliminar HTML personalizado

Para editar tu HTML, selecciona el bloque HTML y actualiza el código en su configuración.

Para eliminar HTML personalizado, selecciona el bloque HTML y elimínalo. Esto eliminará el bloque y su contenido de tu formulario; el resto de tu formulario no se verá afectado. Eliminar el bloque es también la forma más rápida de comprobar si un problema de visualización es causado por tu código personalizado.

Solución de problemas

Parte de mi HTML no aparece.
El bloque HTML elimina cualquier etiqueta o atributo que no se admita cuando se muestre tu formulario. Comprueba tu código con las etiquetas y los atributos admitidos anteriores y confirma que no estés usando una etiqueta o un atributo que se haya eliminado por seguridad.

Mi formulario parece roto.
Revisa tu HTML para ver si hay etiquetas no cerradas o no coincidentes y reglas de diseño que reposicionen o superpongan otros bloques. Debido a que tu código vive en su propio bloque, puedes eliminar el bloque HTML para confirmar que es la causa, luego volver a añadirlo y probar cambios más pequeños.

Mi estilo no se aplica a mi HTML.
Comprueba que los nombres de class de tu HTML coincidan con los selectores de tu CSS personalizado, que el CSS personalizado esté activado y que hayas publicado la versión más reciente del formulario. Consulta Cómo usar CSS personalizado en el formulario de registro.

No veo el bloque HTML.
El HTML 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.

Preguntas frecuentes

¿Puedo editar el HTML de los bloques existentes de mi formulario?
No. El bloque HTML te permite añadir nuevo contenido personalizado a un formulario. No cambia el HTML de los bloques existentes de tu formulario.

¿Por qué se ha eliminado parte de mi código?
Por seguridad, el bloque HTML mantiene solo etiquetas y atributos compatibles y elimina todo lo demás, como los scripts y los controladores de eventos, para evitar que se ejecute código malicioso en tu sitio. Consulta la lista de etiquetas y atributos eliminados para obtener más información sobre seguridad.

¿Puedo añadir un <script> ¿Quieres añadir JavaScript a mi formulario?
No. Los scripts y los atributos del controlador de eventos siempre se eliminan para proteger a los visitantes de tu sitio. Esta opción no se puede desactivar.

¿Puedo aplicar estilo a mi bloque HTML?
Sí. Añade tus propios nombres de class a tus elementos HTML y oriéntalos con CSS personalizado. Consulta Cómo utilizar CSS personalizado en formularios de registro.

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