¿Quieres crear un formulario de contacto AJAX en WordPress?

Los formularios de contacto de AJAX permiten a los usuarios enviar formularios sin recargar la página. Esto le permite aumentar la participación de los usuarios mientras les brinda una mejor experiencia de envío de formularios.

Esto es útil cuando ejecuta un sitio de comercio electrónico y desea recopilar comentarios de los usuarios sin distraerlos.

También puede usar la misma funcionalidad de AJAX para otros formularios personalizados en su sitio web. Por ejemplo, un formulario de inicio de sesión de usuario personalizado permitirá a los usuarios iniciar sesión sin cargas de página adicionales.

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

Crear un formulario de contacto Ajax en WordPress

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

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

Se usa más comúnmente en formularios web para permitir a los usuarios enviar datos de formulario sin recargar la página. Esto hace que el envío de formularios sea rápido y fácil, mejorando la experiencia general del usuario.

Esta técnica es ampliamente utilizada por aplicaciones web como Gmail y Facebook para mantener a los usuarios interesados ​​mientras todo funciona sin problemas en segundo plano.

También puede usar Ajax para sus formularios de WordPress. Salvará a los usuarios de recargas de página innecesarias y los mantendrá en la página que están viendo actualmente.

Habiendo dicho eso, veamos cómo hacer fácilmente un formulario de contacto de WordPress Ajax en 4 sencillos pasos.

1. Instale el complemento WPForms

Lo primero que debe hacer es instalar y activar el complemento WPForms. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.

WPForms es el mejor complemento de creación de formularios de WordPress en el mercado. También le permite crear fácilmente formularios controlados por Ajax.

Después de la activación, debe acceder WPForms » Configuración para ingresar su clave de licencia.

Clave de licencia de WPForms

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

Ahora está listo para crear hermosos formularios ajax en WordPress.

2. Crea tu primer formulario

Pasemos a crear su primer formulario.

solo visita WPForms » Agregar nuevo Páginas en el área de administración de WordPress. Se le pedirá que proporcione un título para el formulario y elija una plantilla como punto de partida.

Elija una plantilla de formulario

A los efectos de este tutorial, crearemos un formulario de contacto. Sin embargo, puede crear cualquier otro tipo de formulario que desee.

WPForms ahora cargará su formulario con los campos básicos ya agregados. Puede editar cualquier campo de formulario simplemente apuntándolo y haciendo clic en él.

Editar campos de formulario en WPForms

También puede agregarlo haciendo clic en cualquier campo de formulario nuevo en la columna izquierda. El nuevo campo aparecerá encima del botón Enviar en la parte inferior del formulario.

Haga clic para agregar un nuevo campo de formulario

Puede arrastrar y soltar fácilmente campos de formulario para moverlos hacia arriba y hacia abajo en el formulario.

Una vez que termine de editar el formulario, puede continuar con el siguiente paso.

3. Habilite la función de envío de formularios Ajax

WPForms no habilita el envío de formularios Ajax de forma predeterminada. Deberá habilitarlo manualmente para su formulario.

Simplemente cambie a la pestaña “Configuración” en el generador de formularios y marque la casilla junto a la opción “Habilitar el envío de formularios AJAX”.

Activar la funcionalidad de formulario Ajax

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

Ahora configuremos lo que sucede después de que se envía el formulario.

Primero, cambie a la pestaña Confirmación en la configuración. Aquí es donde notifica al usuario que ha recibido el formulario que envió.

Confirmar configuración

WPForms le permite hacer esto de diferentes maneras. Por ejemplo, puede redirigir a los usuarios a una URL, mostrarles una página específica o simplemente mostrar un mensaje en la pantalla.

Dado que tenemos Ajax habilitado para el formulario, redirigir al usuario a otra página anula el propósito de crear el formulario Ajax.

Debe seleccionar la opción de mensaje y editar el mensaje de confirmación. Siéntase libre de usar la barra de herramientas de formato en el editor o agregue uno o dos enlaces para decirle al usuario a dónde ir a continuación.

Después de eso, puede establecer cómo recibir notificaciones sobre los envíos de formularios.

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

Configuración de correo electrónico de notificación de formulario

Cuando haya terminado, puede guardar el formulario y salir del generador de formularios.

4. Agregue formularios habilitados para Ajax en WordPress

WPForms hace que sea muy fácil agregar formularios a sus publicaciones, páginas y widgets de la barra lateral de WordPress.

Simplemente edite la publicación o página donde desea agregar el formulario e inserte el bloque WPForms en su área de contenido.

Agregue bloques de WPForms a las publicaciones o páginas de WordPress

Después de eso, debe seleccionar el formulario que acaba de crear desde la configuración del bloque. WPForms cargará inmediatamente una vista previa en vivo del formulario en el editor de contenido.

Elige tu forma

Ahora puede guardar o publicar su contenido, luego visitar su sitio web para probar la funcionalidad ajax del formulario.

Vista previa del formulario de contacto de Ajax

También puede agregar formularios a los widgets de la barra lateral en WordPress.Para ello, visite Apariencia » Widgets página y agregue el widget WPForms a la barra lateral.

Agregue su formulario controlado por ajax al widget de la barra lateral

Seleccione el formulario que creó anteriormente y haga clic en el botón Guardar para almacenar la configuración del widget. Ahora puede visitar su sitio web para ver su formulario controlado por Ajax en acción.

Esperamos que este artículo le haya ayudado a aprender cómo crear un formulario de contacto de WordPress Ajax para su sitio web. También puede consultar nuestra guía sobre cómo crear una ventana emergente de formulario de contacto en WordPress.

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

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.