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

Tienes un formulario HTML listo para usar, pero agregarlo a WordPress se convierte en un ensayo y error.

La razón es simple: WordPress no maneja los formularios de la misma manera que un sitio web HTML normal. Si simplemente copias y pegas el código del formulario, a menudo no funcionará correctamente sin algunos pasos adicionales.

En nuestros propios sitios, usamos el plugin WPForms porque se encarga de toda la configuración por nosotros. Dicho esto, sabemos que muchos usuarios prefieren usar formularios HTML personalizados para mantener las cosas ligeras, tener control total sobre su código o evitar agregar otro plugin.

En esta guía, te mostraremos 2 maneras fáciles de agregar formularios HTML en WordPress, para que tu formulario aparezca correctamente, funcione como se espera y no rompa tu sitio. 💡

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

Los formularios HTML funcionan de manera 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 distingue es que los formularios HTML se crean usando código en lugar de un editor visual de arrastrar y soltar como un plugin de formularios. Esto significa que debes definir campos como cuadros de texto, casillas de verificación, botones de radio y menús desplegables tú mismo.

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:

¿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 básico.

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’.

A partir de aquí, lo primero que deberás hacer es nombrar tu formulario escribiendo el nombre en el campo 'Título del formulario'. Por ejemplo, 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 página, verás los detalles de tu formulario, incluido 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.

Ahora, desplázate 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 agregar 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 'Sí/No' para la suscripción al boletín.

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).

Dado que este plugin no tiene un constructor de arrastrar y soltar, deberás mover el código manualmente. Continúa y corta el código del campo desplegable (desde la etiqueta de apertura hasta la etiqueta de cierre
).

Luego, simplemente pega ese fragmento de código justo después de la etiqueta de cierre del campo 'Email'.

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 te parece bien, puedes dejarlo así. Si realizas 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, todo lo que queda por hacer es agregar el formulario 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'.

Tu formulario ahora está en vivo y los usuarios pueden registrarse en tu boletín. Aquí tienes cómo podría verse en tu sitio:

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 es usar un constructor de formularios de contacto visual. Esta es la mejor opción si deseas crear el formulario visualmente pero necesitas insertar elementos HTML específicos, como un enlace, un formato de texto o una información sobre herramientas, usando código.

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 tu formulario sea más fácil que si codificaras tu formulario de WordPress desde cero.

Antes de comenzar, 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 de ‘Configuración’, donde primero deberás nombrar tu formulario. Este nombre es solo para referencia interna, 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, usaremos 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 esta página, puedes usar la función de arrastrar y soltar para agregar elementos del panel izquierdo 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 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 código de ejemplo, así que siéntete libre de editar el texto para que coincida con 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 formularios de WPForms, navega 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 desde dónde envía el usuario 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 haga clic en el botón ‘Enviar’.

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

Los botones ‘Spam’ y ‘Papelera’ son útiles para marcar envíos falsos y eliminarlos de tus entradas. 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.

Como regla general, puedes subir una sola página HTML sin archivos CSS o de imágenes separados directamente.

Pero, si la página que deseas subir incluye archivos CSS e imágenes separados, deberás subirlos en una carpeta, manteniendo la misma estructura de directorios utilizada en tu archivo HTML.

AIOSEO, el mejor complemento SEO para WordPress, puede ayudar a los motores de búsqueda a encontrar tu página HTML personalizada agregándola a tus sitemaps XML.

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?

Este es un problema común. En WordPress, simplemente pegar un formulario HTML generalmente 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.

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

La opción más fácil es usar un plugin de formulario de contacto como WPForms o Formidable Forms. Estos plugins se encargan de todo detrás de escena, incluido el guardado de entradas, el envío de notificaciones por correo electrónico y el bloqueo de spam, para que no tengas que configurarlo tú mismo.

¿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:

• Dar estilo al 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 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.