Resumen de IA
¿Quieres agregar fragmentos de código HTML personalizados en tus formularios de contacto de WordPress? Agregar HTML personalizado a tu formulario es una excelente manera de ser creativo y mejorar tus formularios.
La forma más rápida de hacerlo es con el campo HTML en WPForms. Agregas el campo a tu formulario, pegas tu código y guardas. No necesitarás tocar los archivos de tu tema ni instalar un plugin por separado.
Así que en este tutorial, te guiaré a través de la instalación de WPForms, la creación de un formulario, la adición de un bloque HTML y la pegada de tu propio código. También compartiré algunos fragmentos de HTML para copiar y pegar que puedes usar de inmediato.
¡Añade HTML personalizado a tu formulario de WordPress! :)
Por qué añadir HTML personalizado a tu formulario de contacto
Quizás te preguntes por qué deberías añadir HTML a tus formularios de WordPress. En muchos casos, un usuario avanzado o un desarrollador web querrá ampliar la funcionalidad de un formulario.
Uno de los principales beneficios de añadir HTML personalizado a tu formulario es que te ayuda a que tu formulario destaque del resto del contenido.
En el ejemplo a continuación, puedes ver lo fácil que es añadir un enlace a una Política de Privacidad en algún texto de tu formulario de contacto.
Por lo tanto, cuando tus visitantes lleguen a la página donde está tu formulario de contacto, podrán ver algo como esto a continuación:
Además, puedes añadir una imagen a tu formulario usando código HTML personalizado para hacer el formulario más atractivo visualmente o para mostrar productos y opciones de productos personalizadas.
Y al añadir estas características adicionales a tus formularios, puedes hacer que el formulario destaque en la página, lo que ayuda a captar la atención de tus visitantes.
Cómo añadir código HTML personalizado a tu formulario de contacto de WordPress
También he compartido un vídeo a continuación que describe todas las instrucciones que necesitas seguir para añadir código HTML a tu formulario en WordPress.
Si prefieres leer el tutorial, sigue estas instrucciones para crear un espacio en tus formularios donde poner tu código HTML personalizado.
Paso 1: Instalar el plugin WPForms
Lo primero que necesitas hacer para empezar es instalar y activar el plugin WPForms. Es un constructor de formularios fácil de usar que te permite crear cualquier cosa, desde formularios sencillos hasta formularios avanzados.
Lo que diferencia a WPForms es cómo maneja el HTML personalizado. A diferencia de otros constructores de formularios que restringen lo que puedes añadir, WPForms te da control total sobre tu contenido HTML manteniendo todo seguro y funcional.
El campo HTML forma parte de la colección de Campos Elegantes de WPForms, lo que significa que necesitarás al menos el plan Básico para acceder a él. Si eres nuevo en la descarga de plugins, aquí tienes una guía paso a paso sobre cómo instalar un plugin de WordPress.
¡Actualiza a WPForms Pro ahora! :)
Paso 2: Crea un formulario y añade campos básicos
El siguiente paso es crear tu primer formulario. Puedes elegir cualquier formulario al que desees añadir un HTML personalizado, pero para este ejemplo, crearemos un formulario de contacto sencillo usando el desafío de WPForms.
Dale a tu formulario un nombre descriptivo como “Formulario de contacto con HTML personalizado” para que puedas encontrarlo fácilmente más tarde. Puedes empezar con una plantilla como Formulario de contacto sencillo para ahorrar tiempo.
Una vez que estés en el creador de formularios, verás la configuración familiar con las opciones de campos a la izquierda y la vista previa de tu formulario a la derecha, con campos cruciales como Nombre, Correo electrónico y Mensaje ya añadidos.
Esto te proporciona una base sólida para trabajar antes de añadir tus elementos HTML personalizados. Genial. Ahora, añadamos el campo que aceptará HTML personalizado a continuación.
Paso 3: Añade un bloque HTML a tu formulario
Ahora llega la parte divertida de añadir HTML personalizado a tu formulario. Busca el campo HTML en la sección Campos de fantasía en el lado izquierdo del creador de formularios y arrástralo al área de vista previa de tu formulario.
Puedes colocar el campo HTML en cualquier lugar dentro de la estructura de tu formulario. Yo suelo colocarlo donde quiero que aparezca contenido personalizado.
Quizás en la parte superior para un mensaje de bienvenida, entre secciones de campos como divisor, o en la parte inferior para información adicional.
Paso 4: Inserta tu código HTML personalizado
Ahora que tu cuadro de HTML personalizado está en tu formulario de contacto, puedes añadir tu fragmento de código HTML personalizado. Ve a tu formulario a la derecha y haz clic en el campo Bloque HTML / Código que acabas de añadir.
Luego, dirígete al panel izquierdo donde verás el cuadro de Código HTML en Opciones de campo. Aquí es donde puedes añadir tu fragmento de código HTML personalizado.
Así que adelante y pega tu HTML personalizado en ese campo. Puedes añadir cualquier tipo de fragmento de código HTML personalizado a tu formulario. Cuando hayas terminado, pulsa el botón Guardar en la esquina superior derecha.
Paso 5: Publica tu formulario con HTML personalizado
Antes de publicar tu formulario, necesitas probar todo para asegurarte de que tu HTML personalizado se muestra correctamente y no interfiere con el envío del formulario.
Haz clic en el bot ildeoacute;n Vista previa en el creador de formularios para ver exactamente c ilde{o}mo aparecer ilde{a} tu formulario para los visitantes. Si todo funciona como esperas, puedes proceder a agregarlo a tu sitio web. Haz clic en el bot ildeo}n Incrustar.
Ahora, cuando aparezca la notificaci ilde{o}n Incrustar en una p ilde{a}gina, haz clic en el bot ildeo}n Crear p ilde{a}gina nueva. A continuaci ilde{o}n, WPForms te pedir ilde{a} que le pongas un nombre a tu p ilde{a}gina.
Para nuestro ejemplo, estamos agregando este formulario de contacto HTML personalizado a una p ilde{a}gina de contacto, as ilde{i} que la llamaremos Cont ilde{a}ctanos. Escribe el t ilde{i}tulo de la p ilde{a}gina que deseas en el cuadro y haz clic en ¡Vamos!
As ilde{i} que ahora ver ilde{a}s la p ilde{a}gina nueva con tu formulario de contacto HTML personalizado. Puedes continuar y presionar el bot ilde{o}n Publicar en la esquina superior derecha de tu p ilde{a}gina.
Y luego dale un vistazo a tu nuevo formulario. Lo has logrado. Has terminado de configurar un formulario de contacto de WordPress con un campo HTML personalizado.
¡Añade HTML personalizado a tu formulario de WordPress! :)
Ejemplos de código HTML que puedes copiar y pegar
Aquí tienes algunas de mis ideas preferidas, junto con el código real que puedes pegar directamente en el campo HTML. Cada una utiliza HTML plano y CSS en línea, por lo que no hay nada adicional que instalar.
El fragmento que más utilizo es una simple línea de política de privacidad. Añade una nota breve con un enlace, lo que mantiene tu formulario de contacto compatible con el RGPD.
<p style="font-size: 14px; color: #666666;">
By submitting this form, you agree to our
<a href="https://example.com/privacy-policy/">Privacy Policy</a>.
</p>Si prefieres recopilar un consentimiento formal, puedes añadir un campo de acuerdo RGPD en lugar de un simple enlace.
Para hacer tu formulario más atractivo, puedes incrustar un vídeo de YouTube directamente en él. Sustituye VIDEO_ID por el ID del vídeo en la URL y se mostrará en el formulario.
<iframe width="100%" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video" frameborder="0" allowfullscreen>
</iframe>En una página de contacto, un mapa de Google incrustado ayuda a la gente a encontrar tu negocio en persona. Obtén el enlace para incrustar de Google Maps usando la opción Compartir y luego Incrustar un mapa, y pégalo en lugar de TU_CODIGO_PARA_INCRUSTAR.
<iframe
src="https://www.google.com/maps/embed?pb=YOUR_EMBED_CODE"
width="100%" height="300" style="border: 0;"
loading="lazy" allowfullscreen>
</iframe>¿Tienes un formulario de pedidos? Un cuadro con estilo es una buena forma de destacar un descuento o una oferta por tiempo limitado. Incluso puedes combinarlo con lógica condicional para que solo aparezca cuando alguien selecciona una opción determinada.
<div style="background: #f0f7ff; border: 1px solid #cce0ff; padding: 16px; border-radius: 6px;">
<strong>Limited-time offer:</strong> Use code SAVE10 at checkout for 10% off your order.
</div>Para formularios más largos, un encabezado y un divisor facilitan la agrupación de campos relacionados en secciones claras.
<h3 style="margin-top: 24px;">Shipping Details</h3>
<hr style="border: 0; border-top: 1px solid #e0e0e0;">Y si quieres un botón de llamada a la acción que coincida con tu marca, puedes estilizar un enlace para que parezca un botón sin tocar tu tema.
<a href="https://example.com/"
style="display: inline-block; background: #e27730; color: #ffffff; padding: 10px 18px; border-radius: 4px; text-decoration: none;">
Learn More
</a>Preguntas frecuentes sobre c ilde{o}mo agregar HTML personalizado a tus formularios de WordPress
Añadir código HTML personalizado a un formulario de contacto de WordPress plantea algunas preguntas comunes. Aquí tienes las respuestas que me hacen con más frecuencia.
ext问}Qu ilde{e} tipos de c ilde{o}digo HTML puedo agregar a WPForms?
Puedes agregar casi cualquier elemento HTML est ilde{a}ndar al campo HTML. Esto incluye encabezados, p ilde{a}rrafos, divisores, im ilde{a}genes, videos incrustados, cuadros de texto con estilo, enlaces e incluso tablas HTML simples.
Tambi ilde{e}n puedes usar CSS en l ilde{i}nea para dar estilo a estos elementos exactamente como deseas que se vean. El campo HTML admite la mayor ilde{i}a de las etiquetas HTML comunes.
ext问}El HTML personalizado afectar ilde{a} la funcionalidad de env ilde{i}o del formulario?
No, agregar HTML a tu formulario no interferir ilde{a} en absoluto con los env ilde{i}os del formulario. El campo HTML es ext{p}uramente para fines de visualizaci ilde{o}n y no recopila ning ext{u}n dato que se env ilde{i}e con el formulario.
Tus campos de formulario habituales (como Nombre, Correo electr ilde{o}nico, Mensaje) seguir ilde{a}n funcionando exactamente como siempre lo han hecho. El HTML personalizado simplemente mejora la presentaci ilde{o}n visual y la experiencia del usuario sin tocar la funcionalidad real de procesamiento del formulario.
ext问}Puedo usar JavaScript en el campo HTML?
No, el código JavaScript se filtra automáticamente del campo HTML por motivos de seguridad. WPForms elimina las etiquetas <script> y los manejadores de eventos de JavaScript para proteger tu sitio de posibles vulnerabilidades de seguridad.
Si necesitas una funcionalidad interactiva m ilde{a}s all ilde{a} de lo que HTML y CSS pueden proporcionar, podr ilde{i}as explorar las funciones integradas de WPForms, como la l ilde{o}gica condicional, que puede crear un comportamiento din ilde{a}mico del formulario sin necesidad de JavaScript personalizado.
ext问}Cu ilde{a}l es la diferencia entre el campo HTML y el campo de Contenido?
El campo HTML te permite añadir cualquier código HTML personalizado con control total de estilo, mientras que el campo de Contenido está diseñado para contenido de texto simple con opciones de formato básicas. El campo HTML te da mucha más flexibilidad para elementos de diseño personalizados.
Si solo necesitas agregar texto sin formato o contenido con formato simple, el campo de Contenido puede ser m ilde{a}s f ilde{a}cil de usar. Pero cuando deseas un estilo personalizado, medios incrustados o dise ext{n}os complejos, el campo HTML es definitivamente la mejor opci ilde{o}n.
ext问}Hay un l ilde{i}mite en la cantidad de c ilde{o}digo HTML que puedo agregar?
No hay un límite estricto de caracteres en el campo HTML, pero es una buena práctica mantener tu código conciso y enfocado. Cantidades muy grandes de HTML pueden ralentizar el tiempo de carga de tu formulario y dificultar su gestión.
Recomiendo dividir el HTML complejo en secciones más pequeñas y lógicas utilizando varios campos HTML si es necesario. Esto hace que tu formulario sea más fácil de editar más tarde y ayuda al rendimiento general y a la velocidad de carga del formulario.
¿Puedo crear un formulario de contacto de WordPress solo con código HTML?
Puedes codificar manualmente un formulario de contacto en HTML puro, pero no enviará ni almacenará envíos por sí solo. El HTML solo maneja el diseño, por lo que aún necesitarías PHP o un servicio de gestión de formularios para procesar lo que la gente envía. Por eso la mayoría de la gente utiliza un creador de formularios para gestionar los envíos y luego añade HTML personalizado para los toques de diseño.
¿Cómo añado código HTML a un formulario de contacto sin un plugin?
Sin un plugin, agregarías el HTML de tu formulario directamente a una página usando el bloque HTML personalizado de WordPress, y luego escribirías PHP para manejar el envío y enviarlo por correo electrónico. Funciona, pero es más técnico y tú eres responsable de la protección contra spam y la validación. El campo HTML en un plugin de formularios te brinda el mismo control creativo sobre tu marcado mientras se encarga del lado del envío seguro por ti.
¿Necesito saber programar para usar el campo HTML?
El campo HTML no requiere ningún conocimiento de programación real. Si puedes copiar y pegar, puedes usarlo, y los ejemplos anteriores en esta guía están listos para usar una vez que cambies el texto de marcador de posición por el tuyo. HTML básico y un poco de CSS en línea cubren la mayor parte de lo que querrás hacer.
¿Funciona el campo HTML en la versión gratuita de WPForms?
El campo HTML es parte de la colección Fancy Fields, por lo que necesitarás al menos el plan Básico para usarlo. La versión gratuita WPForms Lite cubre campos estándar como nombre, correo electrónico y mensaje, lo cual es suficiente para un formulario de contacto básico. Una vez que desees HTML personalizado, menús desplegables de imágenes o cargas de archivos, es cuando entra en juego un plan de pago.
¿Puedo agregar el mismo HTML a varios formularios de WordPress?
Sí, pero el campo HTML se agrega por formulario, por lo que no hay una configuración global que lo aplique en todas partes. El enfoque más sencillo es guardar tu fragmento en algún lugar conveniente y pegarlo en el campo HTML de cada formulario que lo necesite. Si reutilizas el mismo bloque con frecuencia, mantener un pequeño archivo de texto con tus fragmentos habituales ahorra tiempo.
A continuación, aprende a estilizar tus formularios de WordPress
Ahora que has añadido HTML personalizado a tu formulario, deberías echar un vistazo a nuestra guía sobre cómo estilizar formularios de contacto en WordPress para asegurarte de que tu código personalizado se vea como deseas.
Crea tu formulario de WordPress ahora
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.
