• 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 sin plugins en WordPress

Formulario de contacto sin plugins en WordPress

Formulario de contacto sin plugins

[ 14 marzo 2018 ] [ Actualizado: 21 abril 2021 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Avanzado] [ ]

funcionalidad

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

En este artículo aprenderás cómo construir un formulario contacto en WordPress sin usar plugins, para lograrlo usaremos plantillas de página y código adicional en el archivo functions.php

 

Resultado Final

Al mostrar un ítem de menú con la página de contacto veremos un formulario como se muestra en la siguiente imagen:

Resultado final formulario de contacto

 

Plantilla de página

En el artículo de Plantillas de Página en WordPress, habías visto cómo crear una plantilla de página. Para nuestro formulario de contacto necesitamos construir la vista HTML a través de una plantilla de página, usaremos como base el siguiente código de formulario.


<?php
if ( isset($_GET['sent']) ){
	if ( $_GET['sent'] == '1'){
		echo "<p> ✔ Formulario enviado correctamente</p><br>";
	}
	else {
		echo "<p> Hubo un error al enviar</p><br>";
	}
}
?>

<form method="post" action="<?php echo admin_url( 'admin-post.php' ) ?>" >
	<label for="name">Nombre:</label>
	<input type="text" name="name" id="name" required>

	<br>
	<label for="email">Correo:</label>
	<input type="email" name="email" id="email" required>

	<br>
	<label for="message">Mensaje:</label>
	<textarea name="message" id="message" cols="30" rows="10" required></textarea>

	<br>
	<p><input type="checkbox" id="terms" name="terms" required> Acepto los <a href="#">Términos y Condiciones</a></p>

	<br>
	<input type="hidden" name="action" value="process_form">
	<input type="submit" name="submit" value="Enviar">
</form>

 

Ten en cuenta que este código debe ir acompañado de un código similar a lo que tienes en el archivo page.php de tu theme. Usualmente el código adicional mostrará la cabecera y footer de tu theme.
Puedes colocar todo el código en un archivo llamado : t_page_contacto.php, como parte de los archivos de tu theme, por ejemplo para el theme Twenty Seventeen puedes ver el archivo en el siguiente enlace

En el código anterior:

  • Hay una comprobación si se enviaron los datos correctamente, esto a través de $_GET, ya que cuando confirmamos el envío del correo redireccionaremos a la misma url con un parámetro
  • Luego viene el código del formulario, aquí lo importante es que estamos haciendo referencia al archivo : admin-post.php
  • Creamos los controles de nombre, correo y mensaje y lo más importante un campo oculto llamado action, que en conjunto con admin-post.php permitirán procesar el formulario

 
Luego que tengas el archivo, crea una página en WordPress, la puedes llamar “contacto”, y asigna la plantilla de página, tal como se muestra en la siguiente imagen.

Asignación de plantilla de página

 

En la imagen anterior se asume que la plantilla de página se llama : Página Contacto, si tienes dudas, revisa Plantillas de Página en WordPress

 

Código en functions.php

Debido a que en el código anterior hemos usado la llamada a admin-post.php para que procese el formulario, será necesario construir los hooks y funciones callbacks en el archivo functions.php.

Si no hubiéramos usado la arquitectura de WordPress para procesar el formulario (archivo admin-post.php), podríamos haber colocado todo en el mismo archivo de template de página

Como te comenté anteriormente, hemos usado un campo oculto llamado action con el valor process_form, por lo tanto la lógica para construir los hooks es similar a la que vimos en el artículo de Ajax en WordPress.

Los hooks que usaremos serán:

admin_post_XXX
admin_post_nopriv_XXX

Reemplazando XXX por el valor del campo action que es process_form

Recuerda que admin_post_XXX es el hook para usuarios registrados, y admin_post_nopriv_XXX para visitantes

Por lo tanto nuestro código quedaría:


// Hooks admin-post
add_action( 'admin_post_nopriv_process_form', 'send_mail_data' );
add_action( 'admin_post_process_form', 'send_mail_data' );

// Funcion callback
function send_mail_data() {

	$name = sanitize_text_field($_POST['name']);
	$email = sanitize_email($_POST['email']);
	$message = sanitize_textarea_field($_POST['message']);

	$adminmail = "destino@dominio.com"; //email destino
	$subject = 'Formulario de contacto'; //asunto
	$headers = "Reply-to: " . $name . " <" . $email . ">";

	//Cuerpo del mensaje
	$msg = "Nombre: " . $name . "\n";
	$msg .= "E-mail: " . $email . "\n\n";
	$msg .= "Mensaje: \n\n" . $message . "\n";

	$sendmail = wp_mail( $adminmail, $subject, $msg, $headers);

	wp_redirect( home_url("/contacto/")."?sent=".$sendmail ); //asumiendo que existe esta url
}

En el código anterior

  • Los hooks hacen referencia a la función send_mail_data
  • En la función obtenemos los datos de los diferentes campos y los validamos
  • Definimos el email destino, asunto y cabeceras
  • Construimos el cuerpo del mensaje en la variable $msg
  • Finalmente usamos wp_mail para enviar el correo
  • Esta variable devuelve un booleano, por lo tanto al hacer la redirección pasamos la variable

 

Conclusión

Hemos visto que podemos crear un formulario con plantillas de página y usar el poder de WordPress para procesarlo, esto puede extendenderse no sólo a la creación de un formulario de contacto sino a cualquier tipo de formulario y construir algo personalizado.

 
¿Aún con dudas?, en el siguiente video se detalla como implementar los puntos anteriores.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Formulario de contacto con Ajax en WordPressFormulario de contacto con Ajax en WordPress
  • 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
  • Agregar ubicación de menú WordPressAñadir una nueva ubicación de menú a un theme WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (10 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Eduardo

    23 marzo, 2018

    Hola, felicidades por tu sitio. Hice el procedimiento correcto, según creo, y el formulario se envió correctamente, pero no recibí el correo en cuenta. Algunada recomendación que puedas darme.
    Muchas gracias,
    Eduardo

    • Jhon Marreros Guzmán

      23 marzo, 2018

      Hola, prueba configurando para recibir en un correo de de tu propio domino y no un correo público como gmail o hotmail.

  2. fredderick.m@hotmail.com

    26 marzo, 2018

    Brother, eres el mejor. ¡Muchas Gracias!

  3. claudia

    18 mayo, 2018

    Hola, me gustaría saber como integrar en “atributos de página” la opción “plantilla”, solo me aparece superior y orden.
    Muchas gracias,
    Saludos.

    • Jhon Marreros Guzmán

      19 mayo, 2018

      No le veo relación a tu consulta con este artículo artículo, te sugiero revisar: https://decodecms.com/plantillas-pagina-wordpress/

  4. Juan

    9 diciembre, 2018

    Artículo genial, bien explicado y el código funciona correctamente.

    Tengo una duda que seguro que se resuelve fácilmente por alguien con experiencia como tú, pero que probablemente habrá más personas que al leer este artículo se topen con la misma cuestión que yo:

    ¿Qué debería hacer si quiero crear distintos formularios de contacto? Por ejemplo, uno para la página “Contacto” y otro para la página “Colaboraciones” (en este ejemplo, me interesa tener dos páginas bien diferenciadas en vez de aglomerarlo todo en el mismo formulario).

    Las consultas hechas en el formulario de la página “Contacto” serían enviadas a una dirección de correo, mientras que las realizadas en el formulario de la página “Colaboraciones” se enviarían a otra dirección de correo diferente.

    • Jhon Marreros Guzmán

      10 diciembre, 2018

      Hola, mejor envíame información adicional a través del formulario de contacto, tu código y el error que te aparece.

  5. Jesus

    8 marzo, 2019

    Un post interesante, aunque no me ha funcionado. Al realizar el envio lleva a una pagina que no encuentra o simplemente la muestra en blanco (“dominio”/wp-admin/admin-post.php). No me interesa la parte del mail puesto que mi idea es usar esos datos para una consulta a una base de datos externa(La consulta me funciona correctamente) ¿A que puede deberse el error?¿Sera por no usar la plantilla predeterminada? Espero su respuesta, gracias.

    • Jhon Marreros Guzmán

      11 marzo, 2019

      Hola te lleva al admin-post.php porque así esta programado, prueba primero con el código original sin modificaciones, enviando mail y verifica si te funciona, es posible que si obtienes una página en blanco se este generando errores 500 que debes revisar en tu error_log.

  6. Andres Hoyos

    1 abril, 2019

    Muy bueno me has ayudado mucho, tengo un problemita, el diseño de mi página tiene el formulario de contacto en el footer, agregué las funciones y el código php a mi theme pero al enviar los datos, no los envía, me redirige a una página que no tengo en el theme y tampoco me lanza errores, Por favor necesito tu ayuda, soy nuevo en esto y de eso depende mi trabajo

    • Jhon Marreros Guzmán

      3 abril, 2019

      Hola, a qué página te redirige?, si sigues con problemas mejor envíame tu consulta a través del formulario de contacto. https://decodecms.com/contacto/

  7. Luis

    8 abril, 2019

    ¡Hola!
    Primero, felicidades por la claridad del post.
    Tengo la duda de cómo hacer para:
    1. Ya se enviaron los datos del formulario
    2. Ya los recibí en variables en functions.php y se procesaron, quedando el resultado almacenado en $resultado
    Mi duda es: ¿cómo puedo mostrar en otra página “../resultado/ el valor de $resultado?
    Espero mi duda aplique bien con el tema, muchas gracias

    • Jhon Marreros Guzmán

      8 abril, 2019

      Hola, en el código php final hay una redirección, podrías pasar la variable $resultado en la url

  8. Angel

    9 mayo, 2019

    Hola mucho gusto, disculpa pero solo me redirecciona al admin-post.php y no hace mas nada, que puedo hacer? gracias

  9. Kelly

    6 junio, 2019

    Hola buen dia, si yo no quisiera enviarlo a un correo sino directamente a mi whatsapp, ¿Còmo serìa?

    • Jhon Marreros Guzmán

      11 junio, 2019

      Hola, dependes de una aplicación para esto, ya sea tu aplicación de movil o el navegador, si no quieres una aplicación tendrías que usar la API de whatsapp, veo que hay algunos servicios externos que la usan podrías revisar: http://wassame.com

  10. geovanni

    4 julio, 2019

    Hola, buena explicación, me gustaría saber como transformar esa misma plantilla en un plugin, intente realizar esa conversión pero no resulta como esperaba, y no se si pudieras ayudarme con ese problema, de antemano muchas gracias y felicitaciones por tu post.

    • Jhon Marreros Guzmán

      5 julio, 2019

      Hola, no sigue la estructura de un plugin, podrías rescatar algo de la lógica pero para aplicarla podrías crear un shortcode, para la estructura de un plugin revisa: https://decodecms.com/generador-de-plugins-base-para-wordpress/ , para hacer un shortcode: https://decodecms.com/que-son-los-shortcodes-en-wordpress-y-como-usarlos/

  11. Ruth

    6 septiembre, 2019

    Muchas Gracias, no sabes la cantidad de códigos y nada. Con el tuyo súper fácil y de una.

    • Jhon Marreros Guzmán

      7 septiembre, 2019

      Gracias Ruth. Saludos.

  12. Nekane

    25 noviembre, 2019

    Hola:
    Excelente articulo. Me pongo ahora mismo con ello, pero me surge un problema me gustaría cumplir con la ley de protección de datos y que incluyera un checkbox seria posible que incluyeras el código que habría que poner.
    Muchísimas gracias

    • Jhon Marreros Guzmán

      25 noviembre, 2019

      Hola Nekane, gracias por la sugerencia, he agregado el checkbox en el código del formulario, sólo tendrías que cambiar el # por la url de tu página de términos y condiciones.

  13. Nekane

    26 noviembre, 2019

    Agradecer lo rápido que me has contestado dando una solución y felicitarte por la excelente web que nos ofreces. Me ha funciona perfecto, visualmente se me montan un poco las casillas y no sé muy bien como modificarlo, pero estoy encantada de haberlo hecho sin usar un plugin.
    Sigo dando una vuelta a todos tus contenidos, que te explicas genial y tengo mucho por aprender.
    Mil gracias

  14. Neil González

    17 diciembre, 2019

    Hola Jhon !
    Gracias por el aporte, intenté usar dos formularios y cambiar algunos nombres en el hooks de functions pero sólo envía el primer formulario creado y vació, del segundo creado ni sus luces, como es la correcta definición de los valores? o si este segundo hook queda fuera de functions.php?

    • Jhon Marreros Guzmán

      18 diciembre, 2019

      Hola, ambos formularios aparecen en la misma página?, mejor asegúrate primero que funcione un solo formulario y que te llegue el contenido, sino actualmente sólo te llega el asunto del mensaje sin contenido, revisa la variable $msg.

  15. vladimir

    21 enero, 2020

    Hola Jhon- muchas gracias por tu post. Quiero saber como hacer para que al final de ejecutar mi código de la función php, el cual genera un pdf con la información del formulario e implementando la libreria mpdf, no me quede en la url …/wp-admin/admin-post.php

    Muchas gracias

    • Jhon Marreros Guzmán

      21 enero, 2020

      Hola, en tu caso en lugar de enviar el mensaje final de enviado correctamente, tendrías que colocar en ese lugar tu código o la referencia a un archivo en donde esta tu código o una redirección. Es decir tendrías que remplazar este código:

      echo "

      ✔ Formulario enviado correctamente


      ";
  16. Isabel

    23 enero, 2020

    Hola!
    me va saliendo todo, pero cuando pongo el código del formulario tal cual aparece en este tutorial y refresco el sitio, en lugar de salirme el formulario como tal me sigue apareciendo “codigo de formulario”, le he dado mil vueltas pero no se donde está el error.

    Estoy usando un tema propio de underscore.

    • Jhon Marreros Guzmán

      23 enero, 2020

      Hola, en donde agregaste el código?, si lo agregas en el functions.php no debería mostrarse el código, sino ejecutarse. Saludos.

      • Isabel

        23 enero, 2020

        Lo he agregado en t_page_contacto.php tal y como se indica en el video.

        Un saludo!

        • Jhon Marreros Guzmán

          25 enero, 2020

          Hola agregaste al inicio del archivo:

  17. jose

    24 marzo, 2020

    Hola, Quisiera agregar el formulario de contacto en un widget seria lo mismo, es decir de ves de colocar el codigo en una plantilla de página lo puedo colocar en un widget que voy a crear, seguiria funcionando igual??

    Un saludo!

    • Jhon Marreros Guzmán

      26 marzo, 2020

      Hola
      Si vas a usar un Widget lo ideal sería que no te recargue la página, creo que tendrías que manejarlo con Ajax, el código de este artículo es con recarga de página, no lo veo muy aplicable a un Widget.

  18. Margarida

    8 mayo, 2020

    Hola,
    He seguido tus explicaciones y genial, me ha salido a la primera. Quisiera preguntarle para dejarlo acabado como añadir el capcha y un enlace a la pagina con los terminos y condiciones.
    Salidos

    • Jhon Marreros Guzmán

      9 mayo, 2020

      Hola, tendrías que agregar como parte del código HTML en el archivo de contacto.php código adicional, revisa la documentación oficial: https://blog.argentinareseller.com/2019/06/22/como-incluir-captcha-en-tus-formularios-web/ , sólo la parte del body, el script tendrías que insertarlo tal como se comenta en el punto 3 de este artículo: https://decodecms.com/insertar-javascript-en-wordpress-de-forma-correcta/

  19. Margarida

    10 mayo, 2020

    Hola,
    Gracias por su ayuda. Añadir el captcha me ha costado un poco pero creo que lo he conseguido, solo faltaria añadir al formulario que solicite que el campo sea requerido. ¿Como añadir al fichero el campo requerido?
    Saludos

  20. Jonathan

    3 junio, 2020

    Excelente aporte amigo. Solo tengo una duda, como puedo obtener la información de los formularios en MySQL o en alguna otra base de datos. Me gusto como se recibe la información en gmail, pero también la quisiera poder visualizar y extraer desde una base de datos. Espero haya sido claro y me puedas resolver esta duda.
    Saludos.

    • Jhon Marreros Guzmán

      3 junio, 2020

      Hola, supongo que te refieres a guardarlos en alguna tabla de la base de datos, en al funcionalidad de envío sería agregar esto, tomo nota para actualizar o hacer un nuevo artículo sobre esto.

    • Jhon Marreros Guzmán

      21 abril, 2021

      Hola, he realizado un artículo para guardar la información enviada por el formulario en la base de datos de WordPress

  21. wilfredo Arcia

    21 julio, 2020

    Hola amigo, gracias por tu aporte, realmente bueno, una consulta, tiene alguna limitacion usar esto con un shortcode, ya que al hacerlo solo me funciona para usuarios registrados, mil gracias

    • Jhon Marreros Guzmán

      22 julio, 2020

      Hola, no debería haber problema, asegúrate de usar ambos hooks: admin_post_nopriv_process_form y admin_post_process_form

  22. Angelike Augsten

    23 septiembre, 2020

    Cómo puedo crear un formulario que me sirva para que el que se registra pueda recibir un pdf a su correo?

    • Jhon Marreros Guzmán

      25 septiembre, 2020

      Hola, la función de WordPress wp_mail() que sirve para enviar correo, tiene un parámetro opcional de adjuntos (attachments), revisa esta discusión: https://wordpress.stackexchange.com/questions/50264/using-wp-mail-with-attachments-but-no-attachments-received/50382

  23. juan

    29 enero, 2021

    Hola, amigo ya inplemetento el proyecto ami sito y todo bien, pero tengo una duda. ¿Como puedo modificar los textos?, “✔ Formulario enviado correctamente” & “Hubo un error al enviar” con css para darle un poco de color y estilos, intete modificrlo pero mi web se cae y tengo que modificar el archivo desde el cpanel si me puedes ayudar gracias.

    • juan

      29 enero, 2021

      Hola amigo ya pude resolver el problema era super simple, pero aun no me adapto a php estoy recien comensando en esto asi que ya supe como hacerlo para borres mi comentario gracias.

  24. Alejandro

    6 mayo, 2021

    Buenas! Muy buena la guía! Muchas gracias!
    Seguí todo al pie de la letra, pero al intentar enviar el mail desde local, me tira error.
    En sí al no tener hosting para probar, necesito resolverlo de esta forma.
    Probé con un plugin (Contact Form 7) y funciona, pero no de esta manera.
    Alguna sugerencia? Estoy utilizando para el envío de correos local a Mercury.
    Gracias!

    • Jhon Marreros Guzmán

      7 mayo, 2021

      Hola, desde local no podrás enviar correo al menos tengas salida SMTP o algún software interceptor de correos para probar.
      Saludos.

  25. PatenteChile

    6 junio, 2021

    Excelente fue de mucha ayuda para mi sitio que estoy empezando y no tenía espacio para instalar plugins.

  26. famoraless

    15 julio, 2021

    Hola consulta el formulario no debería variar si lo hago desde un custom post type? para mostrarlo en mi landing? porque no me esta resultando 🙁 me envía el mensaje de error

    • Jhon Marreros Guzmán

      16 julio, 2021

      Hola, no debería variar, sin embargo prueba primero tal como lo hago y verifica, ya que igual es un problema con el envío del correo.

  27. Jose

    31 enero, 2022

    Hola amigo una pregunta ¿Como puedo hacer que los datos no sean persistentes sin plugins? es decir, si refresco la pagina o si omito el formulario y accedo a la url donde estan los datos pues que no se los muestre si no hacer el proceso del formulario.

    • Jhon Marreros Guzmán

      1 febrero, 2022

      Hola, tienes que capturar el valor, por ejemplo con $_GET, revisa este artículo en donde el valor de la búsqueda es persistente: https://decodecms.com/shortcode-para-busqueda-en-tabla-personalizada-en-wordpress/

  28. Dania

    25 abril, 2022

    hola, he probado el código y me salta el mensaje de que no se ha podido enviar el mensaje y no entiendo por qué. El código es igual al tuyo

    • Jhon Marreros Guzmán

      27 abril, 2022

      Revisa si desde otras partes de tu sitio puedes enviar mensajes correctamente.

  29. Lucia

    29 mayo, 2022

    Hola, me pasa lo mismo que Dania, he copiado y pegado tu código adaptándolo y me aparece que hubo un error al enviar, estoy añadiendo una dirección de gmail, no se si será eso, también lo estoy haciendo en localhost. Llevo ya dos días intentando esto, por favor si me puedes ayudar D:

    • Jhon Marreros Guzmán

      31 mayo, 2022

      Hola, si estas en localhost es probable que no tengas configurado un servidor de correos de manera local.
      Podrías probar configurar algún plugin de SMTP y configurar un servidor externo.
      Saludos.

  30. Marcos

    7 julio, 2022

    Hola John conocía tu página desde hace ya tiempo pero alguna vez e intentado hacer un tutorial pero sin éxito ahora con algún poco de conocimiento sobre desarrollo he probado este ya que siempre me fallaban los plugins de contacto y chapeu lo hecho y perfecto lo único hacer recapcha o algo para que no llege spam?? Tienes algo?? Sin plugins??

    • Jhon Marreros Guzmán

      7 julio, 2022

      Hola Marcos
      Tengo pendiente hacer un artículo para agregar recaptcha a este formulario, espero tenerlo listo próximamente por lo que permanece atento.

    • Jhon Marreros Guzmán

      20 julio, 2022

      Hola Marcos, he creado un artículo recientemente sobre cómo implementar recaptcha, revisa: https://decodecms.com/agregar-recaptcha-v3-en-formulario-de-contacto/

  31. Joan

    4 agosto, 2022

    Excelente, facil y liviana solución sin plugins. Y me llega el mensaje al correo sin problema 🙂
    Yo dejé el código del form en page.php (anidado dentro de un IF) y a través de un campo personalizado decido si aparecerá el formulario en la página o no.
    ¡Muchas gracias! 👏

    • Jhon Marreros Guzmán

      4 agosto, 2022

      Hola Joan, si, es una buena forma también de mostrarlo sólo en las páginas que lo necesites. Saludos.

  32. Manuel

    5 octubre, 2022

    Hola, gracias por compartir, una duda como puedo agregar datos adjuntos al formulario, la parte de html la tengo clara, pero en el código que va en el en functions.php no, gracias

    • Jhon Marreros Guzmán

      6 octubre, 2022

      Hola, si deseas adjuntos de correos lo haces en la función wp_mail(), revisa la documentación de la función, espero hacer un artículo sobre cómo agregar adjuntos próximamente.

  33. JRMora

    26 octubre, 2022

    Hola, Jhon, gracias por el tutorial lo he seguido hoy con éxito para desprenderme por fin de otro plugin. Ahora voy a meterle mano a lo del captcha 😛

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

Copiar al portapapeles en WordPress sin plugins

Exportar / importar la configuración del personalizador de temas en WordPress

Fijar Widget lateral en WordPress sin plugins

Ajax sin usar jQuery en WordPress

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