¿Quieres crear un formulario de contacto AJAX en WordPress?
Los formularios de contacto de AJAX permiten a los usuarios enviar el formulario sin recargar una página. Esto le permite aumentar la participación de los usuarios al tiempo que ofrece una mejor experiencia de envío de formularios a sus usuarios.
Esto es útil cuando ejecuta un sitio web de comercio electrónico y desea recopilar comentarios de los usuarios sin desviar la atención del usuario.
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 una carga de página adicional.
En este artículo, le mostraremos cómo crear fácilmente un formulario de contacto de WordPress AJAX con instrucciones paso a paso.
¿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 una página.
Se usa más comúnmente en formularios web que permiten a los usuarios enviar datos de 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.
Las aplicaciones web como Gmail y Facebook utilizan esta técnica de forma generalizada para mantener a los usuarios interesados mientras hacen que todo funcione a la perfección en segundo plano.
También puede usar Ajax para sus formularios de WordPress. Evitará que los usuarios vuelvan a cargar la página innecesariamente y los mantendrá interesados en la página que están viendo actualmente.
Dicho esto, echemos un vistazo a cómo hacer fácilmente un formulario de contacto de WordPress Ajax en 4 simples pasos.
1. Instale el complemento WPForms
Lo primero que debe hacer es instalar y activar el WPForms enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento 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 con tecnología Ajax.
Tras la activación, debe visitar WPForms » Configuración para ingresar su clave de licencia.
Después de ingresar la clave de licencia, podrá recibir actualizaciones automáticas e instalar complementos.
Ahora está todo listo para crear hermosos formularios ajax en WordPress.
2. Crea tu primer formulario
Avancemos y creemos su primer formulario.
Simplemente visite WPForms » Agregar nuevo 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, crearemos un formulario de contacto. Sin embargo, puede crear cualquier otro tipo de formulario que necesite.
WPForms ahora cargará su formulario con campos básicos ya agregados. Simplemente puede apuntar y hacer clic en cualquier campo de formulario para editarlo.
También puede agregar cualquier campo de formulario nuevo desde la columna de la izquierda simplemente haciendo clic en él. El nuevo campo aparecerá en la parte inferior de su formulario, justo encima del botón de enviar.
Puede arrastrar y soltar fácilmente campos de formulario para moverlos hacia arriba y hacia abajo en el formulario.
Una vez que haya terminado de editar el formulario, puede pasar al siguiente paso.
3. Active 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’.
Al marcar la casilla, se activará la funcionalidad Ajax para este formulario.
Ahora configuremos lo que sucede después del envío del formulario.
Primero, cambie a la pestaña ‘Confirmación’ en la configuración. Aquí es donde informa a sus usuarios que ha recibido el envío de su formulario.
WPForms le permite hacerlo 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 hemos habilitado la funcionalidad Ajax para el formulario, redirigir a los usuarios a otra página anulará el propósito de crear un 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 decirles a los usuarios a dónde ir a continuación.
Después de eso, puede configurar cómo le gustaría recibir una notificación sobre el envío de un formulario.
Cambie a la pestaña Notificaciones en la configuración del formulario y configure los ajustes de correo electrónico de notificación.
Una vez que haya terminado, puede guardar su formulario y salir del generador de formularios.
4. Agregue su formulario habilitado para Ajax en WordPress
WPForms hace que sea muy fácil agregar formularios en sus publicaciones, páginas y widgets de la barra lateral de WordPress.
Simplemente edite la publicación o la página donde desea agregar el formulario e inserte el bloque WPForms en su área de contenido.
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.
Ahora puede guardar o publicar su contenido y luego visitar su sitio web para probar la funcionalidad ajax del formulario.
También puede agregar su formulario a un widget de barra lateral en WordPress. Para hacer eso, vaya a Apariencia » Widgets página y agregue el widget WPForms a una 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 potenciado 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 ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.