¿Alguna vez ha perdido clientes potenciales porque su formulario de contacto era lento y poco práctico? Esa es una historia que escuchamos con demasiada frecuencia. También hemos experimentado de primera mano lo frustrantes que pueden ser los formularios tradicionales de WordPress, tanto para nosotros como para nuestros lectores.
Los formularios AJAX resolvieron este problema y pueden hacer lo mismo por usted.
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 aplicado estos formularios muchas, muchas veces en los sitios web de nuestros clientes y socios, y los resultados hablan por sí solos.
En esta guía, compartiremos nuestro proceso probado de 4 pasos para crear un formulario AJAX de WordPress. Utilizaremos un plugin fácil de usar que simplifica los aspectos técnicos 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 de JavaScript que permite a los desarrolladores transferir datos sin recargar una página.
Se usa con mayor frecuencia en formularios web, lo que permite a los usuarios enviar datos del formulario sin recargar una página. Esto hace que el envío de formularios sea fácil y rápido, lo que mejora la experiencia general del usuario.
Además, las aplicaciones web como Gmail y Facebook utilizan ampliamente esta técnica para mantener a los usuarios interesados mientras hacen que todo funcione sin problemas en segundo plano.
Puede usar AJAX para formularios en su sitio de WordPress. Ahorrará a los usuarios recargas de página innecesarias y los mantendrá interesados en la página que están viendo actualmente.
Esto resulta útil cuando tienes una tienda en línea y quieres recopilar comentarios de los usuarios sin desviar su atención.
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 permitirá a los usuarios iniciar sesión sin una carga de página adicional.
Dicho esto, te mostraremos cómo crear fácilmente 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 📄
- Recursos extra: Más guías de formularios de WordPress
Empecemos.
Paso 1: Instala el plugin WPForms
Lo primero que debes hacer es instalar y activar un 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 también.
En WPBeginner, usamos WPForms para mostrar nuestro formulario de contacto, realizar encuestas anuales a nuestros 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 sobre este plugin.
Así que, instalemos y activemos WPForms. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
📝 Nota: Para crear un formulario AJAX, necesitarás la versión Pro del plugin. Pero hay una versión gratuita de WPForms que puedes consultar si quieres explorar su constructor de arrastrar y soltar y sus funciones básicas de formularios antes de actualizar.
Tras la activación, deberás visitar la página WPForms » Ajustes para introducir tu clave de licencia.
Después de introducir la clave de licencia, podrás recibir actualizaciones automáticas e instalar complementos.
Ahora estás listo para crear hermosos formularios AJAX en WordPress.
Paso 2: Crea tu primer formulario
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, aquí, nombramos nuestro formulario como '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, digamos que quieres usar WPForms AI. Entonces, todo lo que tienes que hacer es darle una indicación simple, y generará el formulario para ti en el área de vista previa.
Para este tutorial, sin embargo, estaremos creando un formulario de contacto. Pasa el cursor sobre el cuadro 'Formulario de Contacto Simple' y haz clic en 'Usar Plantilla'.
Ten en cuenta que puedes crear cualquier otro tipo de formulario que necesites; el proceso es prácticamente el mismo.
WPForms ahora cargará tu formulario con campos básicos ya agregados.
Desde aquí, simplemente puedes hacer clic en cualquier campo del formulario para editarlo.
También puedes agregar cualquier campo nuevo desde la columna izquierda simplemente haciendo clic en él.
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
WPForms no habilita la sumisión de formularios por AJAX por defecto, por lo que necesitarás habilitarla manualmente para tu formulario.
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 del envío del 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.
Dado que hemos habilitado la funcionalidad AJAX para el formulario, redirigir a los usuarios a otra página iría en contra del propósito de crear un formulario AJAX.
Necesitas seleccionar la opción de mensaje y editar el mensaje de confirmación. Siéntete libre de usar la barra de herramientas de formato en el editor o agregar uno o dos enlaces para indicar a los usuarios a dónde ir a continuación.
Después de eso, puedes configurar cómo te gustaría ser notificado sobre un envío de formulario.
Cambia a la pestaña ‘Notificaciones’ en la configuración del formulario y configura los ajustes de correo electrónico de notificación.
Una vez que hayas terminado, puedes guardar tu formulario y salir del constructor de formularios.
Paso 4: Agrega tu formulario habilitado para AJAX en WordPress
WPForms hace que sea súper fácil agregar formularios a tu sitio de WordPress, ya sea en una publicación, página o widgets 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 la configuración del bloque.
WPForms cargará inmediatamente una vista previa en vivo del formulario en el editor de contenido.
Ahora puedes guardar o publicar tu contenido y luego visitar 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 exportándolo 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 fácil. Simplemente ve a WPForms » Entradas, selecciona tu formulario, elige las opciones de exportación y descarga tus 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.
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.