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

Objetivos del artículo

Descubre cómo usar el bloque HTML personalizado para agregar tu propio marcado a los formularios de registro de Klaviyo, además de los bloques disponibles en el editor de formularios. El bloque HTML te brinda control detallado del contenido y el diseño: encabezados personalizados, texto con formato, listas, tablas, imágenes y enlaces, para que los formularios coincidan exactamente con tu marca y tus mensajes.

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

Antes de empezar

Ten en cuenta lo siguiente antes de usar HTML personalizado:

• El bloque de HTML personalizado está disponible solo en planes de pago de Klaviyo. Esta función se está implementando gradualmente, así que es posible que todavía no la veas en la cuenta.
• Tu HTML se sanea automáticamente por seguridad. El bloque HTML conserva solo las etiqueta y los atributos compatibles, y elimina todo lo demás, incluidos los scripts y los controladores de eventos, cuando se renderiza el formulario. Esto protege a los visitantes del sitio contra código malicioso. Como resultado, es posible que parte del HTML que escribas no aparezca en el sitio si no es compatible. Consulta la lista de etiquetas compatibles a continuación.
• El bloque de HTML personalizado solo agrega contenido nuevo. El bloque de HTML te permite agregar tus propios elementos a un formulario. No puedes usarlo para editar el HTML de los bloques existentes del formulario.
• El soporte de Klaviyo no puede solucionar problemas de código personalizado. Los problemas causados por HTML personalizado (p. ej., diseños dañados, contenido que no se muestra, problemas de estilo) son tu responsabilidad: debes depurarlos y corregirlos. Si un formulario con HTML personalizado no se muestra o no funciona correctamente, primero elimina el bloque de HTML para comprobar si tu código es la causa.
• Haz una prueba antes de publicar. El HTML personalizado puede afectar el diseño y la usabilidad del formulario. Siempre previsualiza y prueba el formulario tanto en computadora como en dispositivos móviles antes de publicar.

Agrega un bloque HTML al formulario

Para agregar HTML personalizado a un formulario:

1. Ve 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 su configuración. En la barra lateral del bloque, aparece un editor de código.

El bloque de HTML funciona como cualquier otro bloque en el editor de formularios: puedes agregar más de uno, cambiar su posición y eliminarlos. El HTML personalizado se contiene dentro de su bloque, por lo que no afecta el resto de la estructura del formulario.

Escribe tu HTML

El editor de código empieza vacío. Ingresa tu HTML directamente, usando solo etiquetas y atributos compatibles. Las etiquetas y los atributos no compatibles se eliminan automáticamente cuando se renderiza tu 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, agrega tus propios nombres de class a los elementos y aplícales estilo 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 formulario de registro para saber cómo habilitar y escribir CSS personalizado.

Etiquetas y atributos HTML compatibles

Por seguridad, el bloque de HTML admite las siguientes etiquetas y atributos. Cualquier etiqueta o atributo que no esté en esta lista se elimina cuando se muestra el formulario.

Atributos globales —se permiten en todas las etiquetas compatibles: id, class, dir, lang, role y aria-* (atributos de accesibilidad).

Las tablas a continuación 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

Los enlaces (href) y los orígenes de imágenes (src) solo pueden usar estos esquemas de URL: http, https, mailto, tel y rutas relativas o anclas #fragment. Se eliminan las URL que usen cualquier otro esquema (como javascript: o data:). Cuando un enlace usa target="_blank", se aplica automáticamente rel="noopener noreferrer" para mantener el enlace seguro.

Etiquetas y atributos eliminados por seguridad

Para proteger tu sitio y a tus visitantes, el bloque HTML elimina automáticamente cualquier elemento que pudiera ejecutar código o secuestrar tu formulario, una clase de ataque conocida como cross-site scripting (XSS). Lo siguiente siempre se elimina, aunque sea común en HTML:

• Scripts: <script> y <noscript>
• Atributos del controlador de eventos: cualquier atributo cuyo nombre empiece con 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 la etiqueta <style>
• 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 heredadas o en desuso: <marquee>, <bgsound>, <keygen>, <isindex>, <xmp>, <listing>, <plaintext>, <template>, <noembed>

Si parte del 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 compatibilidad anterior.

Vista previa y publicar

Después de escribir el HTML:

1. Usa la vista previa del editor para comprobar la apariencia del formulario.
2. Verifica el formulario tanto en escritorio como en dispositivos móviles, ya que el HTML personalizado puede afectar a cada uno de manera diferente.
3. Publica el 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 el formulario publicado para confirmar que todas las entradas y los botones sigan funcionando.
5. Publica el formulario de forma pública.

Editar o eliminar HTML personalizado

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

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

Guía de solución de problemas

Parte de mi HTML no aparece.
El bloque HTML elimina cualquier etiqueta o atributo que no sea compatible cuando se renderiza el formulario. Revisa el código en comparación con las etiquetas y los atributos compatibles anteriores, y confirma que no estés usando una etiqueta o un atributo que se elimina por seguridad.

Mi formulario se ve dañado.
Revisa el HTML para detectar etiquetas sin cerrar o que no coincidan, además de reglas de diseño que reubiquen o superpongan otros bloques. Como el código está en su propio bloque, puedes eliminar el bloque de HTML para confirmar que es la causa, luego volver a agregarlo y probar cambios más pequeños.

No se está aplicando el estilo a mi HTML.
Confirma que los nombres de class en tu HTML coincidan con los selectores en 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 estás en un plan de pago y aún no lo ves, vuelve a revisar pronto.

Preguntas frecuentes

¿Puedo editar el HTML de los bloques existentes de mi formulario?
N.º El bloque HTML te permite agregar contenido personalizado nuevo a un formulario. No cambia el HTML de los bloques existentes del formulario.

¿Por qué se eliminó parte de mi código?
Por seguridad, el bloque HTML solo conserva las etiquetas y los atributos compatibles, y elimina todo lo demás (como scripts y controladores de eventos) para evitar que se ejecute código malicioso en tu sitio. Consulta la lista de etiquetas y atributos eliminados por seguridad arriba.

¿Puedo agregar un <script> u otro JavaScript al formulario?
No. Los scripts y los atributos del controlador de eventos siempre se eliminan para proteger a los visitantes del sitio. Esto no se puede desactivar.

¿Puedo dar estilo a mi bloque HTML?
Sí. Agrega tus propios nombres de class a los elementos HTML y dirígete a ellos con CSS personalizado. Consulta Cómo usar CSS personalizado en formularios de registro.

¿Klaviyo Support me ayudará a escribir o corregir mi HTML?
No. Klaviyo Support 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 de HTML para descartarlo antes de que Klaviyo Support pueda investigar más.