• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Formulario de contacto con Ajax en WordPress

Formulario de contacto con Ajax en WordPress

Formulario de contacto con Ajax en WordPress

[ hace 5 meses ] [ Autor: Jhon Marreros Guzmán ][ Themes - Avanzado] [ ]

funcionalidad

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Formulario de contacto Ajax en WordPress resultado

 

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.

Si quieres aprender cómo funciona Ajax en WordPress revisa Ajax en WordPress de manera correcta.

El repositorio completo en Github lo puedes ver en Contact Form 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:

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar recaptcha v3 en formulario de contactoAgregar recaptcha v3 en formulario de contacto
  • Guardar datos de formulario de contacto sin pluginsGuardar datos de formulario de contacto sin plugins
  • Formulario de contacto sin pluginsFormulario de contacto sin plugins en WordPress
  • Mostrar menú diferente para usuarios registrados¿Cómo mostrar un menú diferente para usuarios registrados?
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (1 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Desactivar la actualización para plugins específicos

Habilitar comentarios en el inicio de WordPress

Posts relacionados sin plugins en WordPress

Leer más y Extracto en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados