Cómo agregar contenido HTML personalizado en formularios de WordPress

Los formularios no son solo campos de entrada. A veces necesitas explicar algo, dividir secciones, mostrar una imagen o añadir contexto entre preguntas. El contenido HTML personalizado transforma los formularios estáticos en experiencias guiadas. Aquí te explicamos cómo añadir contenido enriquecido a tus formularios de WordPress.

¿Qué es el bloque HTML?

Definición

El bloque HTML es un elemento de formulario especial que muestra contenido sin recopilar información. Representa HTML entre los campos del formulario, lo que permite añadir texto, imágenes, vídeos, separadores y más.

Bloque HTML vs. Campos regulares

¿Por qué utilizar bloques HTML?

1. Instrucciones y orientación

Ayude a los usuarios a comprender qué hacer:

• Explicar preguntas complejas
• Proporcionar contexto
• Requisitos de la lista
• Guía a través de las secciones

2. Organización visual

Dividir formas largas:

• Encabezados de sección
• Divisores horizontales
• Separadores visuales
• Contenido agrupado

3. Medios enriquecidos

Añade elementos visuales:

• Imágenes e iconos
• Vídeos incrustados
• Infografía (Infographic)
• Diagramas

4. Legal y Cumplimiento

Mostrar información importante:

• Texto de términos y condiciones
• Avisos de privacidad
• Renuncias de Responsabilidad
• Divulgaciones obligatorias

5. Marca

Refuerza tu marca:

• Logotipos
• Colores de la marca
• Estilo personalizado
• Mirada consistente

Agregar un bloque HTML

Paso 1: Agregar el campo

1. Abra su formulario en AFB
2. Encuentre Bloque de HTML en la lista de campos
3. Arrástrelo a la posición deseada en su formulario

Paso 2: Agrega tu contenido

1. Haga clic en el bloque HTML para seleccionarlo
2. Abrir el panel de configuración
3. Ingrese su contenido HTML
4. Vista previa para verificar la apariencia

Paso 3: Posición y estilo

1. Arrastre para reordenar si es necesario
2. Agregar estilos o clases en línea
3. Prueba en el frontend

Usos comunes de los bloques HTML

1. Encabezados de sección

Información personal Proporcione sus datos de contacto a continuación.

Resultado:

Información Personal
Proporcione sus datos de contacto a continuación.

2. Divisor horizontal

Resultado: Una línea limpia que separa secciones.

3. Caja de instrucciones

 Importante: Tenga a mano su número de pedido antes de continuar.

4. Instrucciones con viñetas

Antes de enviar, asegúrese de: Todos los campos obligatorios están completos Su dirección de correo electrónico es correcta Has revisado los términos a continuación

5. Imagen

6. Vídeo incrustado

7. Cuadro de advertencia/alerta

 ⚠️ Advertencia: Los envíos no se pueden editar después de enviarlos.

8. Cuadro de éxito/información

 ✓ Tu progreso se guarda automáticamente.

9. Aviso de privacidad

Su información está protegida por nuestra Política de Privacidad . Nunca compartiremos sus datos con terceros.

10. Resumen de términos y condiciones

 Condiciones de servicio Al enviar este formulario, usted acepta...

Ejemplos de diseño de formularios

Formulario de varias secciones

[Bloque HTML: Sección 1 - Encabezado Información personal] Campo de nombre Campo de correo electrónico Campo de teléfono [Bloque HTML: Divisor] [Bloque HTML: Sección 2 - Encabezado Detalles del proyecto] Menú desplegable Tipo de proyecto Área de texto Descripción Campo Presupuesto [Bloque HTML: Divisor] [Bloque HTML: Sección 3 - Encabezado Pasos finales] Carga de archivo Casilla de verificación Condiciones Botón Enviar

Formulario de instrucción

[Bloque HTML: Mensaje de bienvenida e instrucciones] [Bloque HTML: Indicador del paso 1] Pregunta 1 Pregunta 2 [Bloque HTML: Indicador del paso 2] Pregunta 3 Pregunta 4 [Bloque HTML: Recordatorio de revisión] Botón Enviar

Formulario de Aplicación

[Bloque HTML: Logotipo de la empresa] [Bloque HTML: Título y descripción del puesto] Campo de nombre Campo de correo electrónico [Bloque HTML: Instrucciones "Cargue su currículum" con requisitos de formato] Campo de carga de archivos [Bloque HTML: Declaración de igualdad de oportunidades] Botón Enviar

Dar estilo a los bloques HTML

Estilos en línea

Añadir estilos directamente a los elementos:

Tu contenido estilizado aquí.

Propiedades de estilo comunes

Fondo: background: #f5f5f5; Relleno: padding: 15px; Margen: margin: 20px 0; Borde: border: 1px solid #ddd; Radio del borde: border-radius: 5px; Tamaño de fuente: font-size: 14px; Color: color: #333; Alineación del texto: text-align: center;

Creación de cuadros con estilo

Cuadro de información (azul):

 ℹ️ Mensaje de información aquí

Cuadro de éxito (verde):

 ✓ Mensaje de éxito aquí

Cuadro de advertencia (amarillo):

 ⚠️ Mensaje de advertencia aquí

Cuadro de error (rojo):

 ✕ Error o alerta importante aquí

Consejos de diseño adaptativo

Imágenes

Utilice siempre el ancho máximo para imágenes adaptables:

Videos

Utilice un contenedor responsivo para vídeos incrustados:

Legibilidad del texto

• Utilice tamaños de fuente relativos (em, rem)
• Mantenga las longitudes de línea legibles
• Acolchado adecuado en el móvil

BUENAS PRÁCTICAS

1. Mantenlo conciso

• Texto breve y escaneable
• Viñetas sobre párrafos
• Sólo información esencial

2. Jerarquía visual

• Encabezados claros
• Estilo consistente
• Flujo lógico

3. Accesibilidad

• Texto alternativo para imágenes
• suficiente contraste de color
• HTML semántico (h2, h3, p, ul)
• No confíes sólo en el color para obtener significado

4. No se exceda

• Demasiado contenido abruma
• Equilibrar el contenido con los campos de entrada
• Propósito de cada bloque HTML

5. Pruebe a fondo

• Vista previa en computadoras de escritorio y dispositivos móviles
• Comprueba que todos los enlaces funcionan
• Verificar la carga de imágenes
• Prueba en diferentes navegadores

Ideas avanzadas de bloques HTML

Indicador de progreso

1  2  3 Paso 2 de 3: Detalles del proyecto

Diseño de dos columnas

Opción A Descripción de la opción A... Opción B Descripción de la opción B...

Sección plegable (Detalles/Resumen)

Haga clic para leer los términos completos Texto completo de términos y condiciones aquí...

Lista de Iconos

✓ Envío gratuito en pedidos superiores a $50 ✓ Garantía de devolución de dinero de 30 días ✓ Atención al cliente 24/7

Cuenta regresiva/Urgencia

 🔥 Oferta por tiempo limitado: ¡envíe su solicitud antes del viernes para calificar!

Consideraciones de Seguridad

¿Qué es seguro?

• Etiquetas HTML estándar (p, div, h1-h6, ul, li, etc.)
• Estilos en línea
• Imágenes de fuentes confiables
• Vídeos incrustados de las principales plataformas

Qué evitar

• JavaScript en bloques HTML (puede eliminarse)
• Guiones externos
• Fuentes de iframe no confiables
• Elementos de formulario dentro de bloques HTML

Nota sobre las restricciones de script

La mayoría de los creadores de formularios desinfectan el HTML para evitar ataques XSS. JavaScript y ciertas etiquetas pueden eliminarse automáticamente por seguridad.

Localización de averías

HTML no se procesa

• Comprobar errores de sintaxis
• Verificar que las etiquetas estén correctamente cerradas
• Algunas etiquetas pueden estar restringidas

Estilo no aplicado

• Comprobar la sintaxis del estilo en línea
• El CSS del tema puede anularse
• Utilice estilos más específicos o !importante

Las imágenes no se muestran

• Verificar que la URL de la imagen sea correcta
• Comprobar permisos de imagen
• Utilice la URL completa (https://…)

Diseño que rompe en dispositivos móviles

• Añadir ancho máximo: 100% a las imágenes
• Utilice diseños flexibles (flexbox)
• Prueba en un dispositivo móvil real

Resumen

Agregar contenido HTML personalizado a los formularios:

1. Agregar bloque HTML – Arrastre a su formulario
2. Introducir contenido – HTML en el panel de configuración
3. Posición adecuada – Entre campos relevantes
4. Estilo según sea necesario – Estilos o clases en línea
5. Mantener accesible – Texto alternativo, contraste, HTML semántico
6. Prueba de forma responsiva – Escritorio y móvil

Conclusión

Los bloques HTML transforman los formularios de simples cuestionarios en experiencias guiadas. Añade contexto donde los usuarios lo necesiten, organiza formularios largos en secciones lógicas e incluye contenido multimedia para atraer e informar. Ya sea un encabezado de sección, un cuadro de instrucciones o un vídeo incrustado, el contenido HTML personalizado hace que tus formularios sean más efectivos e intuitivos.

Constructor de formularios automático Incluye el tipo de campo Bloque HTML, lo que le permite agregar cualquier contenido HTML entre los campos de su formulario. Cree formularios profesionales e informativos que guíen a los usuarios durante el proceso de envío.

¿Estás listo para mejorar tus formularios? Descargar Auto Form Builder y comience a agregar contenido personalizado hoy mismo.