¿Alguna vez ha perdido clientes potenciales porque su formulario de contacto era lento o requería que toda la página se recargara? Esa es una historia que escuchamos con demasiada frecuencia.
También hemos visto de primera mano lo frustrantes que pueden ser los formularios tradicionales de WordPress, tanto para los propietarios de sitios como para sus visitantes. Los formularios AJAX resuelven este problema y pueden hacer lo mismo para el suyo.
Estos formularios modernos envían datos al instante sin recargar la página. Crean una experiencia más fluida que ayuda a mantener a los visitantes interesados.
Hemos implementado estos formularios muchas veces en sitios web de clientes y socios, y los resultados hablan por sí solos.
En esta guía, compartiremos un proceso simple de 4 pasos para crear un formulario AJAX de WordPress. Usaremos un plugin fácil de usar que simplifica el trabajo técnico para que pueda seguirlo fácilmente. 🙌
¿Qué es AJAX y por qué usarlo para sus formularios?
AJAX, que significa Asynchronous JavaScript and XML (JavaScript y XML asíncronos), es una técnica de programación que permite a las páginas web enviar y recibir datos sin recargarse.
Se usa comúnmente en formularios web, lo que permite a los usuarios enviar datos del formulario sin recargar la página. Esto hace que el envío del formulario sea fácil y rápido, lo que mejora la experiencia general del usuario.
Las aplicaciones web como Gmail y Facebook también utilizan esta técnica de forma extensiva para mantener a los usuarios interactuando mientras las tareas en segundo plano se ejecutan sin problemas.
Puede usar AJAX para formularios en su sitio de WordPress para evitar recargas innecesarias de página y mantener a los usuarios interactuando en la página que están viendo actualmente.
Esto es especialmente útil si tiene una tienda en línea y desea recopilar comentarios de los usuarios sin interrumpir la experiencia de compra.
También puedes usar la misma funcionalidad AJAX para otros formularios personalizados en tu sitio web. Por ejemplo, un formulario de inicio de sesión de usuario personalizado puede permitir a los usuarios iniciar sesión sin una carga de página adicional.
Teniendo esto en cuenta, te mostraremos cómo crear un formulario de contacto AJAX de WordPress en 4 sencillos pasos.
- Paso 1: Instala el plugin WPForms
- Paso 2: Crea tu primer formulario
- Paso 3: Activa la función de envío de formularios AJAX
- Paso 4: Agrega tu formulario habilitado para AJAX en WordPress
- Consejo extra: Exporta las entradas del formulario a CSV o Excel 📄
- Preguntas frecuentes: Formularios AJAX de WordPress
- Recursos extra: Más guías de formularios de WordPress
Empecemos.
Paso 1: Instala el plugin WPForms
El primer paso es instalar y activar un plugin constructor de formularios.
Para este tutorial, usaremos el plugin WPForms. Es el mejor constructor de formularios de contacto de WordPress del mercado, y te permite crear fácilmente formularios con tecnología Ajax.
En WPBeginner, usamos WPForms para mostrar nuestro formulario de contacto, realizar encuestas anuales a lectores y gestionar solicitudes de servicios de migración, entre otras cosas.
Ha sido una gran experiencia, y puedes ver nuestra reseña completa de WPForms para obtener más información.
Para empezar, es posible que desees crear una cuenta de WPForms. En el sitio web de WPForms, haz clic en el botón 'Obtener WPForms ahora', elige un plan y completa el proceso de pago.
📝 Nota: Para crear un formulario AJAX, puedes usar la versión gratuita de WPForms. Pero si necesitas funciones más avanzadas como lógica condicional, carga de archivos o integraciones con herramientas de Google, necesitarás WPForms Pro.
Hecho esto, deberías tener tu propio panel de cuenta de WPForms, donde puedes descargar tu archivo zip de WPForms Pro y copiar tu clave de licencia.
A continuación, instalemos y activemos el plugin WPForms.
En tu área de administración de WordPress, puedes ir a Plugins » Añadir nuevo plugin.
Luego, puedes usar la barra de búsqueda para encontrar rápidamente el plugin.
Cuando lo veas, haz clic en ‘Instalar ahora’ y luego una vez más en ‘Activar’.
Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Después de la activación, ve a la página WPForms » Ajustes para introducir tu clave de licencia.
Una vez verificado, podrás recibir actualizaciones automáticas e instalar complementos. Ya estás listo para empezar a crear formularios AJAX en WordPress.
Paso 2: Crea tu primer formulario
Ahora vamos a crear tu primer formulario de WordPress.
Simplemente visita la página WPForms » Agregar Nuevo en el área de administración de WordPress.
En la siguiente pantalla, primero puedes nombrar tu nuevo formulario, por ejemplo, ‘Formulario de contacto’.
Después de eso, elegirás cómo construirás tus formularios.
Con WPForms, puedes construir tus formularios desde cero, usar el creador de formularios con IA, o elegir entre más de 2,000 plantillas prehechas.
Por ejemplo, si quieres usar WPForms AI, solo necesitas introducir una indicación simple y generará el formulario por ti en el área de vista previa.
Para este tutorial, sin embargo, estaremos creando un formulario de contacto usando una plantilla prehecha.
Vayamos al cuadro 'Formulario de contacto simple' y hagamos clic en 'Usar plantilla'. Ten en cuenta que puedes crear cualquier otro tipo de formulario que necesites; el proceso es el mismo.
WPForms ahora cargará tu formulario con campos básicos ya añadidos.
Desde aquí, simplemente puedes hacer clic en cualquier campo del formulario para editarlo.
También puedes añadir nuevos campos de formulario desde la columna izquierda haciendo clic en ellos.
El nuevo campo aparecerá en la parte inferior de tu formulario, justo encima del botón Enviar.
Luego puedes arrastrar y soltar los campos del formulario para reorganizar su orden.
Una vez que hayas terminado de personalizar el formulario, puedes pasar al siguiente paso.
Paso 3: Activa la función de envío de formularios AJAX
Dependiendo de tu configuración, es posible que WPForms no tenga la opción de envío de formularios AJAX habilitada por defecto, así que verifiquemos eso ahora.
Para hacer esto, simplemente cambia a la pestaña ‘Configuración’ en el constructor de formularios.
En la pestaña de configuración ‘General’, haz clic en el interruptor junto a la opción ‘Habilitar envío de formularios AJAX’.
Ahora configuremos qué sucede después de que alguien envíe el formulario.
Primero, puedes cambiar a la pestaña ‘Confirmación’ en la configuración. Aquí es donde informas a tus usuarios que has recibido su envío de formulario.
WPForms te permite hacer eso de diferentes maneras. Por ejemplo, puedes redirigir a los usuarios a una URL, mostrarles una página específica o simplemente mostrar un mensaje en la pantalla.
Si bien puedes redirigir a los usuarios a una nueva página, eso requiere una carga de página. Para obtener el máximo beneficio de AJAX, recomendamos simplemente mostrar un 'Mensaje' para que el usuario permanezca en la misma página.
Debes seleccionar la opción de mensaje y editar el mensaje de confirmación. Puedes usar la barra de herramientas de formato o añadir enlaces para guiar a los usuarios sobre qué hacer a continuación.
A continuación, configura cómo te gustaría ser notificado sobre los nuevos envíos de formularios.
Cambia a la pestaña ‘Notificaciones’ en la configuración del formulario y configura los ajustes de correo electrónico de notificación.
Cuando hayas terminado, puedes guardar tu formulario y salir del constructor de formularios.
Paso 4: Agrega tu formulario habilitado para AJAX en WordPress
WPForms facilita la adición de formularios a tu sitio de WordPress, ya sea en una publicación, página o widget de barra lateral.
Simplemente edita la publicación o página donde deseas agregar el formulario e inserta el bloque WPForms en tu área de contenido.
Después de eso, necesitas seleccionar el formulario que acabas de crear desde el menú desplegable dentro del bloque WPForms.
WPForms cargará inmediatamente una vista previa en vivo del formulario en el editor de contenido.
Ahora puedes guardar o publicar tu contenido, luego visita tu sitio web de WordPress para probar la funcionalidad AJAX del formulario.
Aquí tienes un vistazo rápido al ejemplo de formulario AJAX de WordPress de nuestro sitio de demostración:
También puedes agregar tu formulario a un widget de barra lateral en WordPress.
Para hacer eso, ve a la página Apariencia » Widgets y agrega el bloque de widget de WPForms a una barra lateral.
Selecciona el formulario que creaste anteriormente y haz clic en el botón "Actualizar" para guardar la configuración del widget. Ahora puedes visitar tu sitio web para ver tu formulario con tecnología AJAX en acción.
Consejo extra: Exporta las entradas del formulario a CSV o Excel 📄
Una vez que tu formulario AJAX esté funcionando, es posible que desees mantener un registro de todas las presentaciones. Especialmente si estás recopilando leads, consultas de clientes o información de registro.
La forma más fácil de hacer esto es exportando tus entradas como un archivo CSV o Excel.
Esto facilita la organización y el análisis de las respuestas en herramientas de hojas de cálculo como Google Sheets o Microsoft Excel. También es útil para compartir informes con tu equipo o para hacer copias de seguridad de los datos del formulario fuera de WordPress.
Si estás usando WPForms, exportar las entradas del formulario es sencillo: ve a WPForms » Entradas, selecciona tu formulario, elige tus opciones de exportación y descarga los datos como un archivo CSV o Excel.
¿Quieres configurar esto? Sigue nuestra guía completa sobre cómo exportar entradas de formularios de WordPress a CSV y Excel.
Preguntas frecuentes: Formularios AJAX de WordPress
Antes de terminar, aquí tienes algunas preguntas comunes que surgen cuando las personas empiezan a usar formularios AJAX en WordPress.
¿Cómo uso AJAX para el envío de formularios?
La forma más fácil es usar un plugin de formularios que ya soporte AJAX, como WPForms. Simplemente activas la opción AJAX en la configuración del formulario y el plugin se encarga de todo por ti.
Si estás creando un formulario personalizado, necesitarías usar JavaScript y los ganchos AJAX de WordPress. Pero para la mayoría de los sitios, un plugin es mucho más simple y confiable.
¿Dónde encuentro la configuración AJAX en WPForms?
En WPForms, la opción AJAX se encuentra dentro de la configuración del formulario. Después de abrir tu formulario en el constructor, ve a Configuración » General, luego busca la casilla de verificación Habilitar envío de formulario AJAX. Una vez activada, el formulario se enviará sin recargar la página.
¿Cuáles son las desventajas de AJAX?
AJAX depende de JavaScript, por lo que puede entrar en conflicto con plugins de caché agresivos que minifican o posponen scripts. Si tu formulario ‘gira’ pero no se envía, intenta limpiar tu caché o revisar la configuración de tu plugin de optimización.
También puede causar problemas con constructores de páginas o temas antiguos si no está configurado correctamente. Por eso es importante probar tus formularios después de habilitar AJAX.
Recursos extra: Más guías de formularios de WordPress
Esperamos que este artículo te haya ayudado a aprender cómo crear un formulario de contacto AJAX de WordPress para tu sitio web. A continuación, también puedes consultar nuestros artículos sobre:
- Cómo crear un popup de formulario de contacto en WordPress
- Cómo usar formularios de contacto para hacer crecer tu lista de correo electrónico
- Cómo crear formularios de contacto con varios destinatarios
- Cómo crear un formulario de contacto seguro en WordPress
- Cómo bloquear spam de formularios de contacto en WordPress
- Cómo rastrear y reducir el abandono de formularios
- La 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.
¿Tienes alguna pregunta o sugerencia? Por favor, deja un comentario para iniciar la discusión.