• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Themes / Formulario de contacto sin plugins en WordPress
Anuncio banner webservi

Formulario de contacto sin plugins en WordPress

Formulario de contacto sin plugins

[ 14 marzo 2018 ] [ Actualizado: 25 noviembre 2019 ]
[ 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

  • Exportar / importar  la configuración del personalizador de temas en WordPressExportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommercePersonalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPressConfigura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamenteAbrir enlaces externos en un nuevo tab automáticamente
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (7 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.

  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.

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

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Abrir enlaces externos en un nuevo tab automáticamente

Agregar super administrador a multisitio de WordPress

Modificar elementos en página de producto de WooCommerce

Qué son los Plugins Dependientes en WordPress

Recientes

  • Exportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamente
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad