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. El HTML no compatible evita que se guarden los cambios, y el editor muestra un error que explica qué hay que corregir. Las secciones a continuación enumeran las etiquetas y los atributos compatibles y ejemplos comunes que no están permitidos.

Antes de empezar

Ten en cuenta lo siguiente antes de usar HTML personalizado:

• El bloque de HTML personalizado está disponible solo en los planes de pago de Klaviyo.
• Tu HTML se revisa por motivos de seguridad antes de guardarse. Las etiquetas y los atributos no compatibles, incluidos los scripts y los controladores de eventos, impiden que se guarden los cambios. Estas restricciones protegen a los visitantes del sitio contra código malicioso. Revisa las etiquetas y los atributos compatibles a continuación y corrige cualquier error que se muestre en el editor.
• 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. Selecciona Agregar bloques, busca el bloque HTML y arrástralo al formulario donde quieres 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

Reemplaza el HTML de marcador de posición en el editor de código con tu propio HTML; usa solo etiquetas y atributos compatibles. Los cambios se guardan automáticamente. Si el editor muestra un error, corrige el contenido no compatible antes de continuar.

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" rel="noopener noreferrer">See terms and conditions</a></p>

No se admiten los atributos style inline ni las etiquetas <style>. Para aplicar estilos a tu HTML, agrega tus propios nombres de class a los elementos y aplícales estilo con CSS personalizado. Por ejemplo, configura 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 formularios de registro para saber cómo habilitar y escribir CSS personalizado.

Etiquetas y atributos HTML compatibles

Por seguridad, el bloque HTML admite las siguientes etiquetas y atributos. Cualquier etiqueta o atributo que no esté en esta lista impedirá que se guarden los cambios.

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 las fuentes de imágenes (src) solo pueden usar estos esquemas de URL: http, https, mailto, tel y rutas relativas o anclas de #fragment. Las URL que usan cualquier otro esquema (como javascript: o data:) impiden que se guarden tus cambios. Cuando un enlace usa target="_blank", agrega rel="noopener noreferrer" para mantener el enlace seguro.

Etiquetas y atributos HTML no compatibles

Para proteger a los visitantes del sitio contra código malicioso, el bloque HTML rechaza etiquetas, atributos y URL no compatibles al guardar. Lo siguiente no está permitido, aunque es común en HTML:

• Scripts: <script> y <noscript>
• Controles de formulario: <form>, <input>, <button>, <select> y <textarea>. Usa los bloques estándar de entrada y botón del editor para recopilar registros.
• 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 no es posible guardar los cambios, usa el mensaje de error para encontrar y eliminar o reemplazar la etiqueta, el atributo o la URL no compatibles. Revisa el código comparándolo con la lista compatible anterior antes de continuar.

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. En un formulario con segmentación por URL, restríngelo a la página de prueba antes de publicarlo. Abre Segmentación y comportamiento de visualización > Segmentación. En URL, activa Mostrar solo en ciertas URL, selecciona Coincidencia exacta y reemplaza cualquier URL permitida existente por la URL completa de la página de prueba.
4. Publica el formulario en una página no pública para validar cómo se muestra en el sitio. Haz clic en Publicar o programar, selecciona 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 el formulario publicado para confirmar que todas las entradas y los botones sigan funcionando.
6. Restaura la configuración de segmentación prevista y luego usa Publicar o programar y Publicar ahora para publicar el formulario para la audiencia.

Editar o eliminar HTML personalizado

Para editar el HTML, selecciona el bloque de HTML y actualiza el código en la configuración del bloque. Previsualiza los cambios y luego publícalos para actualizar el formulario activo.

Para quitar el HTML personalizado, selecciona el bloque HTML y elimínalo. Esto quita el bloque y su contenido de tu formulario; el resto del formulario no se ve afectado. Quitar el bloque también es la forma más rápida de comprobar si un problema de visualización se debe a tu código personalizado. Publica el cambio para quitar el bloque del formulario en vivo.

Guía de solución de problemas

Mis cambios de HTML no se guardan.
Lee el error en la configuración del bloque de HTML. Elimina o reemplaza la etiqueta, el atributo o la URL no compatibles y, luego, confirma que el error se haya resuelto. Selecciona Más información sobre las etiquetas permitidas en el mensaje de error para revisar la lista compatible.

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 está disponible en los planes de pago de Klaviyo. Verifica que la cuenta tenga un plan de pago y, luego, busca HTML en Agregar bloques en el editor de formularios.

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é no puedo guardar HTML no compatible?
Klaviyo rechaza el HTML no compatible para proteger a los visitantes de tu sitio de código malicioso. Elimina las etiquetas y los atributos no compatibles, como scripts y controladores de eventos, y reemplaza las URL no seguras antes de continuar. Consulta los ejemplos de HTML no compatible anteriores.

¿Puedo agregar un <script> u otro JavaScript a mi formulario?
No. No se permiten scripts ni atributos de controladores de eventos, y el HTML que los contiene no se puede guardar. Esta restricción protege a los visitantes de tu sitio y 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.