Formulario de contacto sin plugins en WordPress

[ 14 marzo 2018 ] [ Autor: Jhon Marreros Guzmán ] [ Themes - Avanzado] [ ]

funcionalidad

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>
	<input type="hidden" name="action" value="process_form">
	<input type="submit" name="submit" value="Enviar">
</form>

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.

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.

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

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.

Valora este artículo : (4 votos, promedio: 5,00 de 5)

Cargando…