X
Jhon Marreros Guzmán

Formulario de contacto sin plugins en WordPress

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:

 

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.

 

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.

 

Artículos Relacionados

Categorías: Themes
Etiquetas: funcionalidad

Ver comentarios (69)

  • 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

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

  • 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.

  • 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.

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

  • 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.

    • 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.

  • 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

  • ¡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

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

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

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

    • 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

  • 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.

Deja un comentario