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

¿Alguna vez has agregado un formulario HTML a tu sitio de WordPress, solo para descubrir que se ve bien pero en realidad no funciona? No estás solo.

Muchos propietarios de sitios se encuentran con este frustrante problema, preguntándose por qué su formulario no envía envíos o no se conecta correctamente.

La razón es simple: WordPress no trata los formularios de la misma manera que un sitio web HTML estándar. Por lo tanto, si simplemente copias y pegas un formulario HTML sin procesar, generalmente no funcionará sin pasos adicionales.

En nuestros propios sitios, usamos el plugin WPForms porque se encarga de toda la configuración interna por nosotros. Aun así, sabemos que muchos usuarios prefieren trabajar con formularios HTML personalizados para mantener las cosas ligeras, mantener el control total sobre el código y reducir la dependencia de los plugins.

En esta guía, te mostraremos 2 formas probadas de agregar formularios HTML a WordPress, y nos aseguraremos de que funcionen. Ya sea que recién estés comenzando o te sientas cómodo con el código, podrás crear un formulario funcional sin todos los intentos y errores. 💡

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

Los formularios HTML funcionan de manera muy similar a otros formularios de sitios web. Permiten a los visitantes escribir y enviar información como nombres, direcciones de correo electrónico, comentarios, pedidos y más.

Lo que los diferencia es que los formularios HTML se crean usando código HTML en lugar de un editor visual de arrastrar y soltar como un plugin de formularios. Por lo tanto, necesitarás definir campos como cuadros de texto, casillas de verificación, botones de radio y menús desplegables tú mismo. Tú decides cómo se ven y estableces reglas específicas para su funcionamiento.

Aquí hay algunas ventajas de crear formularios desde cero usando HTML:

• Rendimiento optimizado. Los formularios HTML tienden a cargarse más rápido y usan menos memoria porque el código es ligero.
• Control. Tendrás control total sobre el diseño y la funcionalidad del formulario porque no estás limitado por las características de un constructor de formularios.
• Personalización. Los formularios HTML se pueden adaptar exactamente a tus necesidades, ofreciendo una personalización de formularios más flexible.

Si bien crear formularios HTML desde cero es una excelente manera de aprender y practicar codificación, tiene sus propios desafíos.

Podrías tener problemas con la compatibilidad entre navegadores, donde el formulario funciona de manera diferente en distintos navegadores web.

Además, según nuestra experiencia, manejar la validación de formularios con JavaScript puede ser complicado. Requiere pruebas exhaustivas para asegurar que puedes recopilar y procesar todas las entradas del usuario correctamente.

Dicho esto, hay formas de agregar formularios HTML sin estas complejidades. Por lo tanto, sin importar si administras un blog de WordPress, un sitio de negocios o una tienda en línea, puedes agregar fácilmente formularios HTML a tu sitio sin tener que codificar desde cero.

En las siguientes secciones, te mostraremos cómo agregar formularios HTML a WordPress. Aquí tienes un resumen rápido de los 2 métodos que cubriremos en esta guía:

• Método 1: Agregar formularios HTML en WordPress usando el plugin HTML Forms (Fácil)
• Método 2: Agregar HTML personalizado a formularios de WordPress con WPForms
• Consejo adicional: Subir una página HTML personalizada a WordPress
• Preguntas frecuentes: Cómo agregar formularios HTML en WordPress
• Recursos adicionales: Más guías de formularios de WordPress

¿Listo? Empecemos.

Método 1: Agregar formularios HTML en WordPress usando el plugin HTML Forms (Fácil)

Una forma fácil de agregar un formulario HTML a un sitio web de WordPress es usar un plugin de formularios gratuito como HTML Forms. Es una gran herramienta para crear y configurar formularios HTML en un solo lugar, por lo que no tendrás que lidiar con ninguna configuración del lado del servidor.

En esta guía, usaremos la versión gratuita del plugin, que incluye todo lo que necesitas para crear un formulario HTML.

Para empezar, asegúrate de tener el plugin instalado en tu sitio web de WordPress. Si necesitas ayuda, puedes seguir nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Al activarlo, puedes navegar a Formularios HTML » Añadir Nuevo en tu panel de administración de WordPress para empezar a crear tu formulario de contacto.

Esto te redirigirá a la página ‘Añadir Nuevo Formulario’.

Desde aquí, lo primero que necesitarás hacer es nombrar tu formulario escribiendo simplemente el nombre en el campo ‘Título del Formulario’. Por ejemplo, nosotros nombramos nuestro formulario ‘Suscripción al Boletín’.

A continuación, haz clic en el botón ‘Crear Formulario’ debajo del campo.

Una vez que hagas eso, aparecerá la página ‘Editar Formulario’ y podrás empezar a personalizar tu formulario de contacto HTML.

En la parte superior de la pestaña, verás los detalles de tu formulario, incluyendo el título del formulario, el slug y el shortcode. No tienes que memorizar estos detalles, ya que estarán disponibles en el panel de Formularios HTML cuando los necesites.

Debajo de estos detalles, encontrarás las pestañas del menú. En la pestaña ‘Campos’, puedes ver varios botones de campo, como ‘Texto’, ‘Fechas’, ‘Casillas de verificación’ y ‘Botones de radio’, para añadir a tus formularios.

Desplazámonos un poco más hacia abajo.

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

Este formulario de contacto 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.

Ahora, digamos que quieres añadir un nuevo campo con una suscripción a un boletín de correo electrónico. Luego, simplemente haz clic en uno de los botones de campo encima de ‘Código del Formulario’.

Por ejemplo, usaremos un campo desplegable y crearemos una opción de ‘Sí/No’.

Desde aquí, querrás hacer clic en ‘Dropdown’ (Desplegable), y esto abrirá las opciones de configuración del campo desplegable. Puedes empezar a completar los detalles, que incluyen la etiqueta y las opciones del campo.

Después de ingresar los detalles, puedes hacer clic en ‘Add Field to Form’ (Agregar campo al formulario).

Luego, deberías ver la etiqueta del campo desplegable en la sección ‘Form Code’ (Código del formulario). Simplemente desplázate hacia abajo en la pestaña para revisarlo.

El siguiente paso es reorganizar el formulario de contacto.

Para mantener un buen flujo, querrás que el campo desplegable esté justo debajo del campo ‘Email’ (Correo electrónico).

Para moverlo, puedes cortar la etiqueta del campo desplegable desde la primera etiqueta

hasta la última

El campo predeterminado ‘Subject’ (Asunto) podría no ser necesario para un formulario de suscripción a boletines. Por lo tanto, recomendamos eliminar el campo.

Puedes hacer esto eliminando su etiqueta desde el primer

hasta el último

Después de mover y eliminar etiquetas, querrás desplazarte hacia abajo en la pestaña hasta la sección ‘Form Preview’ (Vista previa del formulario).

En esta sección, puedes verificar si has movido y eliminado los campos con éxito sin romper nada. También puedes verificar si el menú desplegable funciona correctamente.

Cuando estés satisfecho con los resultados, haz clic en el botón azul ‘Save Changes’ (Guardar cambios) debajo de la sección ‘Form Code’.

Una vez que el proceso de guardado haya terminado, deberías ver una notificación ‘Form updated.’ (Formulario actualizado) en la parte superior de esta página.

Ahora, es posible que desees revisar la configuración del formulario. Pasemos a la pestaña ‘Messages’ (Mensajes) para ver cómo HTML Forms configura los mensajes de confirmación de envío del formulario.

Simplemente haz clic en ‘Mensajes’ para abrir la pestaña.

Esta pestaña te permite editar el texto predefinido para cuando el envío del formulario de un usuario sea exitoso y otras situaciones similares.

Si todo se ve bien para ti, entonces puedes dejarlo como está. Si realizaste algún cambio, no olvides hacer clic en el botón ‘Guardar Cambios’ para no perder tu progreso.

A continuación, vamos a la pestaña ‘Configuración’.

Por defecto, HTML Forms establecerá 'Sí' para guardar cada envío de formulario y 'No' para ocultar el formulario después de un envío exitoso. Puedes personalizar esto según sea necesario.

Luego, en 'Redirigir a URL después de registros exitosos', puedes copiar y pegar la URL de una página web activa de tu sitio web de WordPress. O, escribe 0 en el campo para mantener a los usuarios en la página después de un envío de formulario exitoso.

Cuando todo esté configurado, lo único que queda por hacer es agregar el formulario de contacto HTML a una página de WordPress.

Dirijámonos a Entradas o Página » Todas las Entradas o Todas las Páginas desde el panel de administración de WordPress.

Para esta guía, agregaremos el formulario HTML a nuestra página de 'Contacto'.

Así que, pasaremos el cursor sobre la página 'Contacto' en la lista y haremos clic en 'Editar' cuando aparezca.

Esto iniciará el editor de bloques de la página 'Contacto'.

En el editor, puedes comenzar a elegir un área para agregar el formulario. Luego, simplemente pasa el cursor sobre él y haz clic en el botón '+' para agregar el bloque de Formularios HTML.

Ahora, puedes escribir 'Formularios HTML' en la barra de búsqueda para encontrar rápidamente el bloque. Una vez que tengas el resultado de la búsqueda, haz clic en él.

Verás un menú desplegable en el bloque 'Formularios HTML'. Simplemente expándelo y selecciona el formulario que deseas mostrar. Aquí, estamos eligiendo el formulario 'Registro de Boletín' que acabamos de crear.

El formulario aparecerá cuando publiques tu contenido. Así que, una vez que hayas seleccionado el formulario del menú desplegable, puedes hacer clic en el botón 'Actualizar'.

¡Ahí lo tienes! Tu formulario ahora está en vivo y los usuarios pueden registrarse para tu boletín.

Así es como podría verse en tu sitio web:

Para ver los envíos de formularios, primero puedes ir a Formularios HTML » Todos los formularios. Esto te llevará a la lista de todos tus formularios HTML.

Luego, simplemente pasa el cursor sobre un formulario y haz clic en el botón ‘Envíos’ cuando aparezca.

Desde aquí, puedes ver todos los envíos de tu formulario.

La tabla de ‘Envíos’ detalla toda la información que los usuarios completaron en tu formulario. Luego, está la columna ‘Marca de tiempo’, que te dice cuándo enviaron el formulario.

Por ejemplo, aquí, el primer envío fue realizado por ‘Usuario 1’.

De la tabla, podemos ver que el usuario envió el formulario el 25 de junio alrededor de la 1 p.m. Además, ‘Usuario 1’ respondió ‘Quizás más tarde’ a la pregunta ‘¿Quieres suscribirte a nuestro boletín?’. Por lo tanto, en este caso, no deberías agregar su dirección de correo electrónico a tu lista de correo.

Método 2: Agregar HTML personalizado a formularios de WordPress con WPForms

Otro enfoque para crear formularios HTML es usar un creador de formularios. Si bien este método no te permite codificar tus formularios desde cero, te permite personalizarlos agregando fragmentos de código HTML.

Por ejemplo, podrías usar HTML personalizado para mostrar un breve mensaje de advertencia en un formulario de pago con un enlace a tu página de ‘Política de reembolsos y devoluciones’. O puedes agregar una barra de progreso para que los usuarios sepan cuánto les falta para completar el formulario. El HTML personalizado incluso te permite insertar emojis o agregar una información sobre herramientas.

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

En nuestro sitio WPBeginner, confiamos en él para formularios de contacto, encuestas anuales y solicitudes de migración de sitios. Obtenga más información sobre este plugin en nuestra reseña detallada de WPForms.

WPForms viene con completos complementos de un clic e integraciones de terceros. Por ejemplo, puede instalar el complemento de Abandono de Formularios para rastrear y reducir el abandono de formularios y ¡mucho más!

Por lo tanto, WPforms hace que extender la funcionalidad de su formulario sea más fácil que si codificara su formulario de WordPress desde cero.

Antes de empezar, asegúrate de tener WPForms instalado y activado en tu sitio web de WordPress. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, puedes ir a WPForms » Ajustes para introducir tu código de licencia. Después de introducir la clave, simplemente haz clic en el botón ‘Verificar clave’ para iniciar la verificación.

Una vez hecho esto, puedes empezar a crear tu formulario y añadir HTML personalizado. Para esta guía, te mostraremos cómo añadir un simple tooltip a tu formulario de contacto.

Un tooltip es como una pequeña caja emergente que aparece cuando pasas el ratón sobre un elemento web. Es útil porque permite a los usuarios obtener más información sobre un elemento web específico sin hacer clic ni abandonar la página en la que se encuentran.

Pero primero, creemos el formulario de contacto. Simplemente ve a WPForms » Añadir nuevo desde tu área de administración de WordPress para empezar.

Esto abrirá el panel ‘Configuración’, donde primero deberás nombrar tu formulario. Este nombre es solo para tu referencia, así que puedes usar lo que quieras.

El siguiente paso es seleccionar cómo quieres construir tu formulario.

Con WPForms, puedes crear formularios usando el constructor de formularios con IA, una plantilla predeterminada o desde cero.

Si quieres usar el constructor con IA, solo tienes que ingresar una indicación sencilla. La IA creará el formulario por ti en pocos segundos.

Sin embargo, para este tutorial, lo demostraremos usando una plantilla preconstruida.

Como hay más de 2,000 plantillas de formularios para elegir, puedes usar la barra de búsqueda para filtrarlas rápidamente. Para hacer esto, simplemente escribe 'Formulario de contacto' y espera a que la búsqueda se complete.

Si quieres explorar cada resultado de búsqueda para ver cómo es el formulario, puedes aprovechar la función de vista previa. Simplemente pasa el cursor sobre la plantilla del 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.

Ahora, todas las herramientas de personalización están en el panel izquierdo, y la vista previa en vivo del formulario está en el lado derecho de tu pantalla.

En toda esta página, puedes usar la función de arrastrar y soltar para agregar elementos del panel de personalización a la vista previa en vivo. También puedes usar la función para mover campos en la vista previa en vivo.

Intentemos agregar el campo HTML al formulario. Todo lo que tienes que hacer es desplazarte hacia abajo en el panel izquierdo y luego arrastrar y soltar 'HTML' sobre el formulario.

Después de insertar el campo HTML, puedes hacer clic en él para abrir sus opciones de personalización. Aquí, lo primero que debes hacer es completar la 'Etiqueta' del campo. También puedes dejarla vacía.

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

Para crear una información sobre herramientas (tooltip), puedes usar la función '' 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 editar nuestra copia para que se ajuste mejor a tus necesidades.

Ten en cuenta que WPForms no muestra el código HTML en la vista previa del constructor de formularios. Para previsualizar el campo y asegurarte de que todo esté correcto, puedes guardar los cambios primero y hacer clic en 'Vista previa'.

Esto te llevará a una nueva pestaña.

Ahora, probemos si el fragmento de código HTML para tu tooltip funciona correctamente. Simplemente pasa el cursor sobre el texto y espera a que aparezca el tooltip durante unos segundos.

Cuando estés satisfecho con el resultado, puedes volver al constructor de formularios para finalizar tu formulario.

Tu configuración de notificación y confirmación de formularios ya está configurada en WPForms. Sin embargo, si deseas personalizarlas, ve a ‘Configuración’ y luego a ‘Notificaciones’ o ‘Confirmaciones’.

En la sección ‘Notificaciones’, puedes agregar múltiples destinatarios para el envío de tu formulario de contacto.

Verás una breve instrucción si pasas el cursor sobre el botón de signo de interrogación junto al campo ‘Enviar a dirección de correo electrónico’. Querrás seguirla para asegurarte de que tu notificación se envíe a las direcciones de correo electrónico correctas.

También puedes editar el texto predeterminado para la línea de asunto de tu correo electrónico.

Por ejemplo, nosotros cambiamos el nuestro de ‘Nueva entrada: Formulario de contacto’ a ‘Tienes correo: Nuevo contacto’.

Una vez que hayas personalizado tus notificaciones, querrás pasar al panel de ‘Confirmación’.

Por defecto, WPForms establece tu tipo de confirmación en ‘Mensaje’ y tiene el texto predeterminado listo para ti. Definitivamente puedes cambiar estas configuraciones si lo deseas.

Además de mostrar un mensaje de confirmación, puedes redirigir a los usuarios a una nueva página o a una URL específica.

Una vez que todo esté configurado, es hora de publicar y incrustar el formulario de WordPress.

Haz clic en el botón ‘Incrustar’ para comenzar a publicar. WPForms te preguntará si deseas agregar el formulario a una página existente o a una nueva. En esta guía, elegiremos ‘Seleccionar página existente’.

En la siguiente ventana emergente, elegirá una página de la lista de páginas disponibles. Después de eso, puede hacer clic en ‘¡Vamos!’ para ir al editor de bloques de la página.

Ahora, puede pasar el cursor sobre el área donde desea colocar el formulario y hacer clic en el botón ‘+’. Continúe y seleccione el bloque WPForms.

Luego, puede elegir un formulario del menú desplegable del bloque WPForms.

Una vez que haya seleccionado un formulario, WPForms lo cargará en el área de contenido seleccionada. Si desea mostrar el título del formulario, puede ir a la pestaña ‘Bloque’ en el panel derecho y activar el control deslizante ‘Mostrar título’.

Cuando esté satisfecho con todo, continúe y presione 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.

Ahora, los usuarios pueden comenzar a completar el formulario y posiblemente suscribirse a su boletín informativo por correo electrónico.

Para ver todas las entradas de formulario de WPForms, deberá navegar a WPForms » Todos los formularios.

Luego, puede pasar el cursor sobre ‘Formulario de contacto’ o cualquier formulario de la lista y hacer clic en ‘Entradas’ cuando aparezca el botón.

En la siguiente pantalla, debería poder ver todas las entradas de su formulario.

La tabla detalla toda la información que los usuarios enviaron con el formulario, así como la hora del envío.

Por ejemplo, el 2 de julio alrededor de las 8 a. m., ‘Usuario 3’ dijo que quería suscribirse al boletín informativo por correo electrónico y dejó una pregunta sobre cómo contactar a nuestro equipo de atención al cliente.

También podemos ver la columna de ‘Acciones’. En esta columna, hay varios botones: ‘Ver’, ‘Editar’, ‘Spam’ y ‘Papelera’.

Si haces clic en ‘Ver’, WPForms te llevará a una página de resumen dedicada de una entrada. En esta página, el plugin te anima a activar dos complementos.

El primero es el complemento de Geolocalización para rastrear dónde el usuario envía el formulario. El segundo es el complemento de Recorrido del Usuario, que puede ayudarte a analizar el camino del usuario a través de tu sitio hasta que presiona el botón ‘Enviar’.

Recomendamos instalar y activar estos complementos para un rendimiento más optimizado del formulario.

Los botones ‘Spam’ y ‘Basura’ son útiles para marcar envíos falsos y eliminarlos de tu entrada. Para obtener más información sobre cómo reducir los envíos falsos de formularios, puedes leer nuestra guía sobre cómo bloquear el spam de formularios de contacto.

Consejo adicional: Subir una página HTML personalizada a WordPress

Es posible que también estés buscando una forma de subir una página HTML personalizada a tu sitio de WordPress. Esto puede ser útil si tienes una plantilla estática que deseas usar o una página HTML de un sitio web antiguo.

La regla general es subir una sola página HTML sin archivos CSS o de imágenes separados. Sin embargo, si la página que deseas subir incluye archivos CSS e imágenes separados, entonces debes colocarlos en una estructura de directorios.

AIOSEO, el mejor plugin de SEO para WordPress, puede ayudarte con esto.

Para obtener más información, consulta nuestra guía para principiantes sobre cómo subir una página HTML a WordPress sin errores 404.

Preguntas frecuentes: Cómo agregar formularios HTML en WordPress

Hemos respondido algunas preguntas comunes para ayudarte a agregar formularios HTML a WordPress con facilidad.

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

Es un problema común. WordPress no procesa automáticamente los envíos de formularios como lo haría un sitio HTML normal cuando se combina con scripts del lado del servidor. Por lo tanto, si simplemente pegas un formulario HTML básico, puede verse bien, pero en realidad no hará nada cuando alguien presione "enviar".

Esto se debe a que WordPress no incluye ningún manejo integrado para los datos de los formularios. En un sitio HTML estándar, los desarrolladores suelen conectar los formularios a scripts como form-handler.php para procesar la entrada. En WordPress, necesitarás agregar tu propio código PHP personalizado o usar un plugin para que el formulario sea funcional.

En resumen, mostrar el formulario es fácil, pero hacerlo funcionar requiere un poco de configuración adicional.

¿Cómo puedo asegurarme de que mis envíos de formularios se procesen correctamente?

La forma más fácil es usar un plugin de formularios de contacto como WPForms y Formidable Forms. Se encarga de todo lo que sucede en segundo plano, como el manejo de envíos, el envío de notificaciones y el bloqueo de spam, para que no tengas que configurarlo todo manualmente.

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

¡Absolutamente! Si te sientes cómodo trabajando con código, usar HTML puro te da control total sobre la estructura de tu formulario. Solo ten en cuenta:

• Necesitarás escribir tu propio CSS para estilizar cosas como diseños, colores y espaciado.
• La validación de formularios, los mensajes de error o la lógica condicional requerirán JavaScript personalizado o código del lado del servidor.
• Y tú también eres responsable de asegurarte de que el formulario funcione en diferentes navegadores y dispositivos.

Así que sí, tienes total libertad, 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 crear un formulario de RSVP en WordPress
• Cómo crear un formulario de reserva en línea en WordPress
• Cómo crear un formulario de WordPress con un selector de fechas
• Cómo crear formularios multilingües en WordPress
• Cómo Crear Formularios Conversacionales en WordPress
• Cómo estilizar y personalizar tus formularios de WordPress
• Cómo exportar entradas de formularios de WordPress a CSV y Excel
• Guía definitiva para usar formularios de WordPress

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