En artículos anteriores habíamos visto cómo realizar un formulario de contacto sin plugins en WordPress, en este artículo veremos cómo mejorar la experiencia de usuario cambiando el código para que use Ajax y evite la recarga de la página.
Resultado Final
Al final obtendremos algo similar a la siguiente imagen:
Generalidades
La funcionalidad de Ajax en WordPress se logra combinando código PHP con código Javascript. WordPress tiene ya algunas funciones que nos permiten capturar peticiones Ajax.
Código PHP para el formulario con Ajax
El siguiente código puedes agregarlo como parte de tu archivo functions.php de tu tema hijo:
En el código anterior:
- Primero encolamos el archivo Javascript que tendrá la lógica para trabajar con Ajax desde el navegador del cliente
- Usamos el Hook the_content para construir el HTML del formulario y que se mostrará sólo en la página de contacto
- La parte final del código hace referencia a Hooks de Ajax que trabajarán integrados con el código Javascript
- El procesamiento por Ajax se hace a través de una petición post, se obtienen los datos y se envía el correo
- Finalmente se envía una respuesta a la petición Ajax
Código Javascript
El siguiente código complementa el código PHP anterior, puedes crear una carpeta js y dentro un archivo script.js como parte de tu tema hijo.
En el código anterior:
- Usamos el evento submit del formulario y usamos la función ajax de JQuery
- Construimos la petición con la acción dcms_ajax_frm_contact y los datos del formulario
- Finalmente codificamos eventos antes y luego del envío de datos
Código CSS
Este código es opcional y lo puedes colocar como parte del archivo style.css de tu tema hijo.
Conclusión
Como hemos podido comprobar, puedes realizar un formulario de contacto usando Ajax y mejorar la experiencia del usuario, este código puede ser la base de un plugin o puedes colocarlo directamente como parte de tu tema.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores:
Artículos Relacionados
(1 votos, promedio: 5,00 de 5)
Cargando...