WordPress : Crear Formulario de Contacto y Configurar SMTP - PHPMailer
Fecha Publicación:
01 de Julio de 2024
Fecha Modificación:
17 de Julio de 2024
Creando subcarpeta page-templates y moviendo archivos
Crear la subcarpeta page-templates dentro de tu tema actual y mover los siguientes archivos dentro de dicha subcarpeta creada:
Plantillas creadas en base al archivo page.php
- page-formulario-contactos.php
- page-gracias-por-su-consulta.php
Contenido de la plantilla - page-formulario-contactos.php
La plantilla - page-formulario-contactos.php es para la pagina contactenos
<?php
/**
* Template Name: Formulario de Contactos
*/
//https://decodecms.com/formulario-de-contacto-sin-plugins-en-wordpress/
//https://unidadvirtual.com/wordpress-defined-abspath-or-die-no-script-kiddies-please
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
get_header();?>
<main class="main-content">
<div class="container">
<?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>";
}
}
?>
<div class="row ctn_gral_contactenos">
<div class="col">
<h2>¿Deseas enviarnos un mensaje?</h2>
<hr class="milinea1">
<!-- INICIO AQUI IRA EL CODIGO PARA MOSTRAR EL FORMULARIO -->
<!--
https://unidadvirtual.com/wordpress-admin-post-process-form-y-admin-post-nopriv-process-form
https://unidadvirtual.com/wordpress-que-es-admin-post-php
-->
<form method="post" action="<?php echo esc_url(admin_url('admin-post.php')) ?>" class="miformulario1">
<input type="text" name="name" id="name" class="miclasetexto1 miformulario1_field" placeholder="Nombre" required>
<input type="email" name="email" id="email" class="miclasetexto1 miformulario1_field" placeholder="Correo electrónico">
<input type="celular1" name="celular1" id="celular1" class="miclasetexto1 miformulario1_field" placeholder="Su Telefono">
<textarea name="message" id="message" cols="100%" rows="9" class="miclasetextarea1 miformulario1_field" placeholder="Mensaje" required></textarea>
<!-- <p><input type="checkbox" id="terms" name="terms" required> Acepto los <a href="#">Términos y Condiciones</a></p> -->
<input type="hidden" name="action" value="process_form">
<!--
sintaxis:
wp_nonce_field( $accion_de_usuario, $nombre_del_nonce);
// $accion_de_usuario = muestra la acción principal por la que se creó el nonce
// $nombre_del_nonce = muestra un nombre definido por nosotros mismos para poder
// identificarlo luego si tenemos que hacer algún ajuste
ejemplo
wp_nonce_field( 'accion_de_usuario' , ‘nombre_del_nonce’);
https://unidadvirtual.com/wordpress-que-son-los-nonces
-->
<?php wp_nonce_field( 'accion_verificar_formulario_nonce_1' , 'nombre_del_nonce_formulario_1' ); ?>
<input type="submit" name="submit" class="miclase_boton_enviar1" value="Enviar Mensaje">
</form>
<!-- FIN AQUI IRA EL CODIGO PARA MOSTRAR EL FORMULARIO -->
</div> <!-- Fin Primera Columna -->
<div class="col"> <!-- Inicio Columna 2 -->
<div class="ctn_gral_contactenos_dere">
<h2>Distribuidores de Boxes - Dongles - Cables</h2>
<hr class="milinea1">
<ul class="lists">
<li class="mail"><span class="icon"></span>Responsable: <br>
<a href="mailto:markitos353@hotmail.com">ventas@gamatel-unlock.com</a>
</li>
<li class="iphone"><span class="icon"></span>
<a href="tel:51992510331"> 51992510331 </a>
</li>
<li class="location"><span class="icon"></span>
www.gamatel-unlock.com
</li>
<li class="chart"><span class="icon"></span>
Horario de atención : Lunes a Domingo 9 Am - 11 Pm
</li>
</ul>
<a href="https://api.whatsapp.com/send?phone=51992510331&text=Solicito+los+medios+de+pagos+para+este+Producto"
class="a_whatsapp_orden_button" role="button" target="_blank">
<button type="button" class="button_whatsapp_orden_button">Contactar vendedor</button>
</a>
</div> <!-- Fin contenido -->
</div> <!-- Fin Segunda Columna -->
</div>
</div> <!-- Fin container -->
</main>
<?php get_footer(); ?>
Ingresar fragmento codigo para configurar SMTP
Utilizar el Plugins Code Snippets / o otro plugins para copiar el contenido del archivo
Contenido del fragmento de codigo
//https://wordpress.stackexchange.com/questions/344009/how-to-use-phpmailer-in-a-function-in-wordpress
//https://decodecms.com/formulario-de-contacto-sin-plugins-en-wordpress/
//
//add_action( 'phpmailer_init', 'send_smtp_email', 10, 1);
//
// ------- INICIO Configuracion send_smtp_email
// Hook para PHPMailer
add_action( 'phpmailer_init', 'send_smtp_email');
// si hay un error revisar el archivo debug.log que se encuentra en la ruta = wp-content/debug.log
add_action( 'wp_mail_failed', function ( $error ) {
error_log( $error->get_error_message() );
} );
// function send_smtp_email - En esta función llamamos al parámetro isSMTP() para realizar la conexión SMTP (Simple Mail Transfer Protocol).
// Se establece el SMTPAuth en verdadero con el fin de permitir la autenticación segura para enviar mensajes de correo.
function send_smtp_email( $phpmailer ){
$phpmailer->isSMTP(); //Configura PHPMailer para usar SMTP para enviar correos electrónicos.
$phpmailer->Host = 'mail.gamatel-unlock.com';
$phpmailer->SMTPAuth = true; // Force it to use Username and Password to authenticate
$phpmailer->Port = 465;
$phpmailer->Username = 'ventas@gamatel-unlock.com';
$phpmailer->Password = 'Infantemarina$01$marcos-pesquero-$2024';
$phpmailer->SMTPSecure = 'ssl'; // Choose SSL or TLS, if necessary for your server
$phpmailer->From = 'ventas@gamatel-unlock.com';
//$phpmailer->FromName='ventas@gamatel-unlock.com';
}
// ------- FIN Configuracion send_smtp_email
//
//https://unidadvirtual.com/wordpress-admin-post-process-form-y-admin-post-nopriv-process-form
//https://unidadvirtual.com/wordpress-que-es-admin-post-php
//
//Hook admin-post
//Recuerda hay una sentencia en la plantilla del formulario contactenos que se trabaja
// con el archivo admin-post.php y este archivo trabaja en conjunto con un campo oculto que tiene como nombre
// action cuyo valor es = process_form
//
add_action( 'admin_post_process_form', 'send_mail_data' ); //Usuarios registrados
add_action( 'admin_post_nopriv_process_form', 'send_mail_data' ); //Visitantes
// Aqui es donde se procesa el formulario
function send_mail_data() {
//https://unidadvirtual.com/wordpress-que-son-los-nonces
if ( isset( $_POST['nombre_del_nonce_formulario_1'] ) && wp_verify_nonce( $_POST['nombre_del_nonce_formulario_1'], 'accion_verificar_formulario_nonce_1' ) ) {
// Aquí es donde podemos actuar de forma segura
$name = sanitize_text_field($_POST['name']);
$email = sanitize_email($_POST['email']);
$message = sanitize_textarea_field($_POST['message']);
//Cuerpo del mensaje
$saludo .= "Hola ".$name . "\n\n";
$saludo .= "su comentario es:" . "\n";
$saludo .= $message ."\n\n" ;
$saludo .= "Gracias Por su Consulta y/o Respuesta Estaremos analizandolo para su Aceptación." . "\n\n";
$saludo .= "Gracias por todo." . "\n\n" ;
$saludo .= "Sinceramente," . "\n\n" ;
$saludo .= "Distribuidores de Boxes - Dongles - Cables". "\n";
$saludo .= "https://gamatel-unlock.com/" . "\n";
$saludo .= "Correo : ventas@gamatel-unlock.com" . "\n";
$subject = "Formulario de contacto"; //asunto
$headers[] = "Content-type: text/plain; charset=utf-8";
$headers[] = "From: Ventas Gamatel-unlock <ventas@gamatel-unlock.com>"; //From: donde proviene el mensaje
$headers[]= "Cc: Ventas Gamatel-unlock <ventas@gamatel-unlock.com>"; // Cc: estamos enviando el mensaje con copia a otro destinatario
//$headers[]= "Bcc: Persona2 <persona2@midominio.com>"; // Bcc: enviamos de forma oculta a un segundo destinatario
$sendmail = wp_mail( $email, $subject, $saludo, $headers);
if ( $sendmail ) {
// si el correo se manda sin errores redirigimos al usuario a una página de gracias
//wp_redirect( home_url("/contactenos")."?sent=".$sendmail );
//wp_safe_redirect ( home_url("/contactenos")."?sent=".$sendmail );
//
// https://unidadvirtual.com/wordpress-wp-safe-redirect-vs-wp-redirect
//wp_safe_redirect realiza algunas comprobaciones de seguridad adicionales para asegurarse
//de que la URL de redirección sea segura antes de realizar la redirección.
//
wp_safe_redirect ( home_url("/gracias-por-su-consulta")."?sent=".$sendmail ."&email=". $email );
}
else {
//echo "hubo un error al enviar el email";
wp_safe_redirect ( home_url("/contactenos")."?sent=".$sendmail );
// si hay algún error al mandar el correo redirigimos al usuario de nuevo al formulario
} // fin if ( $sendmail )
} // Fin seguridad wp_verify_nonce
} // FIn function send_mail_data
1- el archivo page.php muestra paginas
2- para crear una plantilla de pagina necesita una cabecera especial
3- Los hook que se crearan nos va a retornar en la misma pagina
El propósito principal de los hooks de WordPress es ejecutar automáticamente una función.
4- hay una sentencia en la plantilla del formulario contactenos que se trabaja
con el archivo admin-post.php y este archivo trabaja
en conjunto con un campo oculto que tiene como nombre action cuyo valor es = process_form
<form method="post" action="<?php echo esc_url(admin_url('admin-post.php')) ?>">
process_form se utiliza en los hook para usuarios registrado y los visitantes
add_action( 'admin_post_process_form', 'send_mail_data' ); //Usuarios registrados
add_action( 'admin_post_nopriv_process_form', 'send_mail_data' ); //Visitantes
admin_post_process_form y admin_post_nopriv_process_form
-----------------------------------------------------------------------
procesar formularios en el área de administración (admin) y
en el área de administración no autenticada (admin no autenticado)
Desde el administrador de WordPress - Crear las paginas Contactenos y Gracias por su consulta
- Contactenos
- Gracias por su consulta
y asignarle a cada pagina su respectiva plantilla
ejemplo:
Pagina contactenos --> asignarle la plantilla (page-formulario-contactos.php)
Pagina Gracias por su consulta --> asignarle la plantilla (page-gracias-por-su-consulta.php)
Contenido de la plantilla page-gracias-por-su-consulta.php
<?php
/**
* Template Name: Gracias por su consulta
*/
//https://unidadvirtual.com/wordpress-defined-abspath-or-die-no-script-kiddies-please
// Exit if accessed directly
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
get_header();
?>
<main class="main-content">
<div class="container">
<div class="row ctn_gral_gracias_por_su_consulta">
<h2>Muchas gracias!, su consulta ha sido recibida con éxito.</h2>
<p style="text-align: center;">Te enviamos una copia de tu consulta al email
<span class="email"><?php echo $_GET['email'] ?> </span>
</p>
<div class="col-2">
<img src="/wp-content/uploads/2024/05/email.png" width="128" height="128" alt="email">
</div> <!-- Fin col 1 -->
<div class="col-10">
<p style="color:red;">Importante:</p>
<p>Verificá que el mensaje no sea bloqueado o clasificado como Correo No Deseado,
agregando el correo <span class="email">ventas@gamatel-unlock.com</span>
a tu lista blanca o de remitentes permitidos.</p>
</div> <!-- Fin col 2 -->
</div> <!-- Fin row -->
</div> <!-- Fin container -->
</main>
<?php get_footer(); ?>
Agregar en su menu el item Contactenos
En su menu crear el item contactenos y hacer referencia a la pagina contactenos
Agregando estilos css
Copiar los estilos del archivo → los-estilos-css.txt
Contenido de los estilos
/* ----------- INICIO _formulario_contactenos.scss --------- */
// Modo de uso
//<input type="text" name="name" id="name" class="miclasetexto1">
.ctn_gral_contactenos{margin-top: 80px; margin-bottom: 80px;background-color: #ffedd6; padding: 20px;}
.miformulario1 {}
// para todos los campos
.miformulario1_field {margin-top: 20px; position: relative;}
.button_whatsapp_orden_button{ padding: 12px 20px; color: #ffffff; background: #21bd5b;
box-shadow: 0 8px 25px -5px rgba(45, 62, 79, .3) !important;
border-style: solid;border-top-width: 0;border-right-width: 0;
border-left-width: 0; border-bottom-width: 0;
}
.button_whatsapp_orden_button:hover { background: #6AD46F;}
.button_whatsapp_orden_button::before {
content: url('/wp-content/uploads/2024/05/whatsapp-svg.svg');
color: #fff;font-size: inherit; font-weight: inherit !important; display: inline-block;
vertical-align: middle; align-items: center;margin-bottom: -9px;margin-top: -5px; width: 1.7em; height: auto;
margin-right: 10px;
}
//----------------------------
.miclasetexto1 {
background-color: #fff; border: 1px solid #46515d; width: 100%;
height: 42px; padding: 10px;border-radius: 3px;font-size: 14px;color: #000;
padding: 1.8em;
}
.miclasetexto1:hover { border-color: #2c6de8; -webkit-box-shadow: 0px 1px 5px #2c6de8;
box-shadow: 0px 1px 5px #2c6de8; }
//----------------------------
.miclasetextarea1 {
background-color: #fff; border: 1px solid #46515d; width: 100%;
padding: 10px;border-radius: 3px;font-size: 14px;color: #000; padding: 1.8em;
}
.miclasetextarea1:hover { border-color: #2c6de8; -webkit-box-shadow: 0px 1px 5px #2c6de8;
box-shadow: 0px 1px 5px #2c6de8; }
//----------------------------
.miclase_boton_enviar1 {width: 100%;
background-color:var(--color-base)!important;
border-color: var(--color-base);
color:white;font-size: 16px !important;
cursor: pointer;padding: 10px 20px;
border-style: solid;border-top-width: 0;border-right-width: 0;
border-left-width: 0; border-bottom-width: 0;margin-top: 10px;
}
.miclase_boton_enviar1:active , .miclase_boton_enviar1:hover {
background-color: var(--color-base-hover)!important;
}
//----------------------------
//---------INICIO Gracias por su consulta -------------
.ctn_gral_gracias_por_su_consulta{margin-top: 40px; margin-bottom: 40px;
h2 { text-align: center; font-weight: bold;margin-bottom: 20px }
.email { color:red;margin-left: 10px;font-weight: bold;}
}
//---------FIN Gracias por su consulta -------------
/* ----------- FIN _formulario_contactenos.scss --------- */Descarga codigo Fuente
Vea tambien
- WordPress : Page Templates o Plantillas de página
- Wordpress : Que es admin-post.php
- WordPress : admin_post_process_form y admin_post_nopriv_process_form
- WordPress : Qué son los nonces
- WordPress : defined(ABSPATH) or die( No script kiddies please)
- https://wordpress.stackexchange.com/questions/344009/how-to-use-phpmailer-in-a-function-in-wordpress
Articulo : 1100 - Veces Leidas