Cómo construir un formulario AJAX de WordPress (en 4 sencillos pasos)

¿Quieres construir un formulario de contacto AJAX en WordPress?

Los formularios de contacto AJAX permiten a los usuarios enviar el formulario sin recargar una página. Esto le permite aumentar la participación de los usuarios y al mismo tiempo ofrecerles una mejor experiencia de envío de formularios.

Esto es útil cuando se dirige un sitio web de comercio electrónico y se quiere recoger la opinión 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 personalizado de inicio de sesión de usuario permitirá a los usuarios iniciar sesión sin necesidad de cargar una página adicional.

En este artículo, te mostraremos cómo construir fácilmente un formulario de contacto AJAX de WordPress con instrucciones paso a paso.

¿Qué es Ajax y por qué lo usa para sus formularios?

Ajax, abreviatura de Asynchronous Javascript and XML, es una técnica de programación en JavaScript que permite a los desarrolladores transferir datos sin recargar una página.

Se utiliza más comúnmente en los formularios de la web, que permiten a los usuarios presentar datos de los formularios 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.

Las aplicaciones web como Gmail y Facebook utilizan ampliamente esta técnica para mantener a los usuarios comprometidos mientras hacen que todo funcione perfectamente en segundo plano.

También puedes usar Ajax para tus formularios de WordPress. Esto le ahorrará a los usuarios la recarga innecesaria de la página y los mantendrá ocupados en la página que están viendo actualmente.

Dicho esto, veamos cómo hacer fácilmente un formulario de contacto de WordPress Ajax en 4 simples pasos.

1. Instalar el plugin WPForms

Lo primero que tienes que hacer es instalar y activar el plugin WPForms. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

WPForms es el mejor plugin de construcción de formularios de WordPress del mercado. Te permite crear fácilmente también formas potenciadas por Ajax.

Una vez activada, debes visitar la página de configuración de WPForms " Settings para introducir tu clave de licencia.

Después de introducir la clave de licencia, podrás recibir actualizaciones automáticas e instalar complementos.

Ya está todo listo para hacer hermosas formas ajax en WordPress.

2. Crea tu primer formulario

Vamos a crear tu primera forma.

Simplemente visita WPForms " Agregar nueva página en el área de administración de WordPress. Se le pedirá que proporcione un título para su formulario y seleccione una plantilla como punto de partida.

Por el bien de este tutorial, vamos a crear un formulario de contacto. Sin embargo, puedes crear cualquier otro tipo de formulario que necesites.

WPForms ahora cargará su formulario con los campos básicos ya añadidos. Puedes simplemente apuntar y hacer clic en cualquier campo del formulario para editarlo.

También puedes añadir cualquier nuevo campo de formulario de la columna izquierda con sólo hacer clic en él. El nuevo campo aparecerá en la parte inferior de su formulario, justo encima del botón de envío.

Puedes arrastrar y soltar fácilmente los campos de la forma para moverlos hacia arriba y hacia abajo en la forma.

Una vez que termine de editar el formulario, puede pasar al siguiente paso.

3. Encienda la función de presentación de formularios de Ajax

WPForms no permite el envío de formularios Ajax por defecto. Necesitará habilitarlo manualmente para su formulario.

Simplemente cambia a la pestaña de Configuración en el constructor de formularios y marca la casilla junto a la opción "Habilitar el envío de formularios AJAX".

Al marcar la casilla se activará la funcionalidad de Ajax para este formulario.

Ahora vamos a establecer lo que pasa después de la presentación del formulario.

Primero, cambie a la pestaña "Confirmación" en la configuración. Aquí es donde informas a tus usuarios que has recibido su formulario de envío.

WPForms te permite hacerlo 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 pantalla.

Ya que hemos habilitado la funcionalidad de Ajax para el formulario, el redirigir a los usuarios a otra página anulará el propósito de crear un formulario de Ajax.

Debes seleccionar la opción de mensaje y editar el mensaje de confirmación. No dudes en utilizar la barra de herramientas de formato del editor o en añadir uno o dos enlaces para indicar a los usuarios dónde deben ir a continuación.

Después de eso, puede establecer cómo le gustaría ser notificado sobre la presentación de un formulario.

Cambie a la pestaña Notificaciones en los ajustes del formulario y configure los ajustes del correo electrónico de notificación.

Una vez que hayas terminado, puedes guardar tu forma y salir del constructor de formas.

4. Añade tu formulario habilitado para Ajax en WordPress

WPForms hace que sea muy fácil añadir formularios a tus publicaciones, páginas y widgets de WordPress.

Simplemente edita el post o la página donde quieres añadir el formulario e inserta el bloque WPForms en tu área de contenido.

Después de eso, tienes que seleccionar la forma que acabas de crear de 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 página web para probar la funcionalidad del formulario ajax.

También puedes añadir tu formulario a un widget de la barra lateral en WordPress. Para ello, ve a la página Apariencia " Widgets y añade el widget WPForms a una barra lateral.

Selecciona el formulario que has creado anteriormente y haz clic en el botón Guardar para guardar la configuración del widget. Ahora puedes visitar tu sitio web para ver tu formulario potenciado por Ajax en acción.

Esperamos que este artículo te haya ayudado a aprender a crear un formulario de contacto de WordPress Ajax para tu sitio web. También puede que quieras ver nuestra guía sobre cómo crear un formulario de contacto emergente en WordPress.

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir