Cómo agregar formularios HTML en WordPress (2 métodos)

¿Quieres escribir tu propio marcado de formulario en lugar de arrastrar campos en un constructor visual?

Buenas noticias: no necesitas escribir ningún PHP para que ese formulario funcione. Puedes dejar que un plugin ligero se encargue del procesamiento mientras tú escribes cada etiqueta tú mismo. Alternativamente, puedes construir el formulario visualmente y colocar HTML personalizado exactamente donde lo necesites.

En esta guía, te mostraremos cómo crear un formulario HTML personalizado que funcione en WordPress.

¿Qué son los formularios HTML y por qué crear uno?

Un formulario HTML recopila información del visitante, como nombres, correos electrónicos y comentarios, al igual que cualquier otro formulario en la web. Lo que lo distingue es *cómo* se construye. En lugar de depender de un editor visual de arrastrar y soltar, creas un formulario HTML con código plano. Esto significa que escribes los campos (como cuadros de texto, casillas de verificación y menús desplegables) tú mismo.

Las personas que usan formularios HTML en lugar de un creador de formularios de arrastrar y soltar, generalmente lo hacen para maximizar el rendimiento de su sitio web. Los formularios HTML simples mantienen las páginas de su sitio web cargando un poco más rápido. Más allá de la velocidad, escribir el código usted mismo le da un control total del diseño. En lugar de estar limitado por la configuración rígida de un creador, puede personalizar el diseño exactamente según sus necesidades.

La mayoría de los usuarios de WordPress encuentran que los complementos de creadores de formularios de arrastrar y soltar ofrecen la mejor experiencia de usuario. Obtiene personalización HTML completa sin la molestia de la configuración manual del servidor.

Aquí tienes todo lo que cubriremos en esta guía:

Método 1: Agregar formularios HTML en WordPress con un plugin

🎖️ Ideal para: Desarrolladores y administradores de sitios que desean control HTML completo con una solución ligera y enfocada en el rendimiento. El complemento enfatiza la simplicidad y la velocidad sobre los creadores de formularios visuales.

Puede agregar un formulario HTML a WordPress usando un complemento de formularios gratuito como HTML Forms. Este complemento administra el PHP y un poquito de JavaScript necesario para ejecutar un formulario HTML en WordPress, al mismo tiempo que le brinda total libertad para escribir el HTML usted mismo.

La versión gratuita cubre todo en este tutorial, incluido el envío de notificaciones por correo electrónico y el almacenamiento de sus envíos. La protección contra spam también es gratuita.

Para comenzar, instale el complemento en su sitio web de WordPress. Si necesita ayuda, siga nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, vaya a HTML Forms » Agregar Nuevo para empezar a crear su formulario.

Escriba un nombre para su formulario en el campo 'Título del formulario'. En esta guía, estamos creando un formulario de contacto simple, así que nombramos el nuestro 'Formulario de contacto'.

Luego, haga clic en el botón Crear formulario.

Una vez que haga eso, aparecerá la página 'Editar formulario' y podrá comenzar a personalizar su formulario HTML.

En la parte superior de la página, verá los detalles de su formulario, incluido el título del formulario, slug y shortcode. Debajo de estos detalles, encontrará cinco pestañas: 'Campos', 'Mensajes', 'Configuración', 'Acciones' y 'Envíos'.

La pestaña 'Campos' contiene diez botones que generan el código de su campo.

En la parte inferior de esta pestaña, encontrará un formulario HTML preconstruido junto con una vista previa.

El formulario predeterminado es bastante simple. Tiene 4 campos para que los usuarios escriban su nombre, dirección de correo electrónico, un asunto breve y un mensaje.

Para agregar un nuevo campo, haga clic en el botón correspondiente justo encima del cuadro 'Código del formulario'.

Reemplazaremos el campo Asunto con un campo desplegable en este tutorial.

Haga clic en 'Desplegable' para abrir su configuración. Luego, escriba su pregunta en el cuadro 'Etiqueta del campo' y agregue una opción por tipo de consulta, como 'Pregunta general', 'Ventas' y 'Soporte'.

Después de ingresar esta información, haga clic en 'Agregar campo al formulario'.

Luego verá la nueva etiqueta desplegable aparecer en el cuadro 'Código del formulario'. Simplemente desplácese hacia abajo para ver su marcado actualizado.

Para que el formulario sea fácil de usar, coloquemos el campo desplegable directamente debajo del campo 'Tu correo electrónico'. Dado que este complemento no tiene un constructor de arrastrar y soltar, necesitarás cortar el código del constructor de código y pegarlo donde quieras colocarlo.

Para eliminar el campo de Asunto, elimina todo el bloque de párrafo que contiene el campo de Asunto.

Una vez que hayas terminado, querrás revisar el panel 'Vista previa del formulario'.

Si no puedes verlo, haz clic en el enlace 'Mostrar vista previa del formulario'.

Esta vista previa en vivo te permite confirmar que tus cambios funcionaron sin romper el diseño.

Puedes verificar rápidamente que el campo de Asunto ha desaparecido y probar que tu nuevo menú desplegable funciona correctamente.

A continuación, haz clic en el botón azul 'Guardar cambios'.

Ahora, es posible que desees revisar la configuración del formulario. Haz clic en la pestaña 'Mensajes' para ver cómo HTML Forms configura los mensajes de confirmación de envío del formulario.

Esta pestaña te permite personalizar los mensajes de confirmación que verán los usuarios.

Si estás satisfecho con el texto predeterminado, puedes dejarlo. De lo contrario, haz tus ediciones y luego haz clic en Guardar cambios.

Por defecto, un nuevo formulario guarda tus entradas en la base de datos, pero no te enviará un correo electrónico cuando alguien lo envíe.

Para solucionar esto, haz clic en la pestaña Acciones. Verás un aviso que dice 'No hay acciones de formulario configuradas para este formulario'.

Haz clic en 'Enviar correo electrónico'.

Los campos 'De', 'Para' y 'Mensaje' son obligatorios. Puedes usar los campos variables que se enumeran directamente debajo del cuadro de Mensaje para insertar automáticamente información que el visitante escribió en tu formulario.

Después de completar esos campos, haz clic en 'Guardar cambios'. Ahora recibirás un correo electrónico cada vez que alguien envíe tu formulario.

Una vez que todo esté configurado, todo lo que necesitas hacer es publicar tu formulario HTML. Ve a la página o publicación donde deseas incrustar el formulario. Luego, pasa el cursor sobre el área donde deseas insertar el formulario y haz clic en el botón '+'.

Desde aquí, comienza a escribir 'HTML Forms' en la barra de búsqueda. Cuando aparezca el bloque correcto, haz clic para agregarlo a tu página o publicación.

Dentro del bloque HTML Forms, haz clic en el menú desplegable y elige el formulario que deseas mostrar.

Una vez que hayas seleccionado el formulario del menú desplegable, haz clic en el botón 'Actualizar'.

Tu formulario de contacto ahora está en vivo. Así es como se verá para tus visitantes:

Antes de promocionar el formulario en cualquier lugar, te recomendamos que lo pruebes tú mismo enviando una entrada de muestra. Así es como confirmas que el formulario no solo se muestra, sino que realmente se entrega.

Después de enviar una entrada de prueba, ve a HTML Forms » Todos los formularios. Aquí, haz clic en el enlace 'Envíos' de tu formulario.

Esto muestra todos los envíos de tu formulario. Tu entrada de prueba aparecerá en la tabla, y también deberías recibir una notificación en tu bandeja de entrada.

La tabla 'Envíos' se abre con una columna 'Marca de tiempo' que te indica cuándo se envió el formulario, seguida de una columna por cada campo.

Método 2: Agregar HTML personalizado a formularios con arrastrar y soltar

🎖️ Lo mejor para: Cualquiera que quiera crear un formulario visualmente pero aún necesite insertar HTML específico, como una información sobre herramientas, un enlace o una nota formateada.

Cuando se trata de crear formularios, recomendamos WPForms. Te ofrece un constructor de arrastrar y soltar y, al mismo tiempo, te permite insertar tu propio marcado, para que un enlace, una nota formateada o una información sobre herramientas aterricen exactamente donde quieres.

Usamos WPForms en nuestros propios sitios web para formularios de contacto, generación de leads, encuestas anuales y más.

WPForms Lite es completamente gratuito, pero el campo HTML utilizado en este método es una función de pago. Está disponible en el plan Básico (39,60 $/año) o superior.

En este método, te mostraremos cómo agregar fragmentos de código HTML para personalizar tus formularios de WordPress usando WPForms.

Para empezar, instala y activa WPForms.

Una vez hecho esto, puedes empezar a crear formularios y agregar HTML personalizado. Para esta guía, te mostraremos cómo agregar una información sobre herramientas simple a tu formulario de contacto.

Para comenzar, vamos a crear el formulario de contacto yendo a WPForms » Agregar Nuevo.

En el panel de Configuración, comienza por darle un nombre a tu formulario.

Este nombre es solo para referencia interna, por lo que puedes usar lo que quieras.

El siguiente paso es decidir cómo quieres construir tu formulario. Con WPForms, puedes empezar desde una plantilla predefinida, construir desde cero o describir lo que necesitas y dejar que el constructor de formularios con IA lo arme por ti.

Si quieres usar el constructor impulsado por IA, simplemente ingresa una indicación simple. La IA creará el formulario por ti en unos segundos.

Para este tutorial, usaremos una plantilla preconstruida.

Como hay más de 2100 plantillas de formularios para elegir, puedes usar la barra de búsqueda para filtrarlas rápidamente. Para hacerlo, simplemente escribe ‘Formulario de Contacto’ y espera a que se complete la búsqueda.

Para ver más de cerca una plantilla, puedes usar la función de vista previa integrada. Simplemente pasa el cursor sobre cualquier plantilla de formulario y haz clic en ‘Ver demostración’.

Una vez que hayas encontrado el formulario de contacto perfecto para tus necesidades, pásale el cursor por encima una vez más y haz clic en 'Usar plantilla'.

Esto iniciará el constructor de formularios. Verás todas las herramientas de personalización en el panel izquierdo y una vista previa en vivo a la derecha.

Puedes arrastrar elementos desde el panel izquierdo y soltarlos en la vista previa en vivo. También puedes reorganizar elementos en la vista previa usando arrastrar y soltar.

Desplázate hacia abajo en el panel izquierdo hasta el grupo Campos de fantasía, luego arrastra y suelta el campo HTML directamente en tu formulario.

Después de agregar el campo HTML, haz clic en él para abrir sus opciones de personalización.

Para empezar, escribe una ‘Etiqueta’ para ayudarte a identificar este campo. Esto es solo para tu referencia y no se muestra a los visitantes, por lo que puedes usar lo que quieras. También puedes dejar el campo vacío.

Luego, insertarás el código HTML personalizado en el campo 'Código'.

Para crear un tooltip, puedes usar la etiqueta <span> o simplemente copiar el siguiente código y pegarlo en el campo ‘Código’:

<span title="We have cool stuff to share every week. :)">Hi there! We have an email newsletter you might want to subscribe to. Let us know in the Comment or Message field, and we'll sign you up.</span>

Este es solo un código de ejemplo, así que siéntete libre de editarlo para que se ajuste a tus necesidades. La parte title="" del código es exactamente lo que le dice al navegador web que cree el efecto emergente al pasar el cursor, para que obtengas la información sobre herramientas sin agregar ningún CSS a tu sitio.

Ten en cuenta que WPForms no muestra el código HTML en la vista previa del constructor de formularios. Para probar la información sobre herramientas, haz clic en ‘Vista previa’.

Esto abrirá una nueva pestaña.

Aquí, puedes probar que el fragmento de código HTML para tu información sobre herramientas funcione correctamente al pasar el cursor sobre el texto. Después de unos momentos, debería aparecer la información sobre herramientas.

Cuando estés satisfecho con los resultados, puedes volver al creador de formularios para finalizar tu formulario.

WPForms configura automáticamente tus ajustes de notificación y confirmación por ti. Sin embargo, si deseas personalizarlos, selecciona ‘Ajustes’ y luego ‘Notificaciones’ o ‘Confirmaciones’.

En la sección ‘Notificaciones’, puedes agregar varios destinatarios para la presentación de tu formulario de contacto.

Para agregar varios destinatarios, separa las direcciones de correo electrónico con comas, como correo1@ejemplo.com, correo2@ejemplo.com, correo3@ejemplo.com.

Una vez que hayas personalizado tus notificaciones y otros ajustes, es hora de publicar e incrustar el formulario de WordPress.

Haz clic en el botón ‘Incrustar’ en la esquina superior derecha del creador de formularios.

WPForms te preguntará si deseas agregar el formulario a una página existente o a una nueva página.

En esta guía, elegiremos ‘Seleccionar página existente’.

En la siguiente ventana emergente, elige una página de la lista de páginas disponibles. Después de eso, puedes hacer clic en ‘¡Vamos!’ para abrir el editor de bloques.

Ahora, coloca el cursor sobre el área donde deseas agregar el formulario y haz clic en el botón ‘+’. Luego, selecciona el bloque WPForms.

Ahora puedes elegir el formulario que deseas mostrar, usando el menú desplegable.

Después de seleccionar tu formulario, WPForms lo cargará en el editor de bloques.

Cuando estés satisfecho con cómo está todo configurado, haz clic en el botón ‘Actualizar’.

¡Y listo! Ha agregado HTML personalizado a su formulario de contacto de WPForms y lo ha publicado en su sitio web de WordPress.

Antes de enviar visitantes reales al formulario, recomendamos enviar una entrada de prueba rápida para asegurarte de que todo funcione.

Después de enviar una prueba, ve a WPForms » Todos los Formularios. Aquí, coloca el cursor sobre tu formulario de contacto y haz clic en ‘Entradas’ cuando aparezca.

En la siguiente pantalla, verás todas las presentaciones de tu formulario.

La tabla muestra cada dato que los usuarios enviaron, junto con la hora exacta del envío.

Preguntas frecuentes: Cómo agregar formularios HTML en WordPress

¿Por qué mi formulario HTML no funciona en WordPress?

Lo más probable es que WordPress esté mostrando tu formulario pero no lo esté procesando. Simplemente pegar un formulario HTML en una página no es suficiente para que funcione.

Si bien el formulario puede mostrarse correctamente, WordPress no procesa automáticamente los envíos del formulario. A diferencia de un sitio HTML básico, no hay un script incorporado para manejar los datos cuando alguien hace clic en Enviar.

Para que el formulario sea funcional, necesitarás agregar código PHP personalizado para procesar los envíos o usar un plugin que se encargue de esto por ti.

¿Aún puedo personalizar mis formularios si uso HTML?

Sí, absolutamente. Usar HTML te da control total sobre cómo se ve y funciona tu formulario. Solo ten en cuenta que también serás responsable de todo lo demás, como:

• Estilizar el formulario con tu propio CSS
• Agregar validación, mensajes de error o lógica condicional con código personalizado
• Asegurarse de que el formulario funcione correctamente en diferentes dispositivos y navegadores

Así que sí, tienes total flexibilidad, pero también total responsabilidad.

Recursos adicionales: Más guías de formularios de WordPress

Esperamos que este artículo te haya ayudado a aprender cómo agregar formularios HTML en WordPress. A continuación, quizás quieras consultar nuestras guías sobre:

• Cómo exportar entradas de formularios de WordPress a CSV y Excel
• Cómo personalizar y dar estilo a tus formularios de WordPress
• Los Mejores Plugins de Formularios de Contacto para WordPress

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.