Skip to Navigation
HTML es un lenguaje de programación del lado del cliente y, debido a esto, no puede enviar emails. Naturalmente, también es imposible enviar emails directamente desde un formulario HTML.
Sin embargo, puede usar un formulario HTML para recopilar datos y enviarlos a un script o servicio del lado del servidor. El script del lado del servidor procesará los datos y enviará el email.
En este tutorial, veremos todos los pasos necesarios para escribir scripts del lado del servidor y formularios HTML, validar los emails y enviarlos de forma segura.
¿Por qué es imposible enviar emails directamente desde un formulario HTML?
Si conoce las vulnerabilidades de seguridad de los lenguajes del lado del cliente, puede saltarse esta sección y comenzar a leer cómo crear un formulario HTML.
Como lenguaje de programación del lado del cliente, el código HTML se muestra en el dispositivo del usuario final y es interpretado por los navegadores.
Si un formulario HTML enviara emails directamente sin ningún tipo de encriptación del lado del servidor, revelaría las direcciones de email y otros datos del formulario a cualquiera que viera el código fuente de la página. Esta información podría ser utilizada de manera indebida por personajes maliciosos, generando problemas significativos de seguridad.
Otras razones por las que HTML no puede enviar emails incluyen:
- Lógica de envío de emails inexistente. HTML, por sí mismo, no puede enviar emails a través de llamadas API o conectándose al servidor SMTP. La programación del lado del servidor es absolutamente necesaria para ese proceso;
- Abuso de recursos. HTML tampoco tiene límites de tasa, lo que dificulta controlar cuántos emails se envían en un corto período de tiempo. Si se abusa de esto, puede agotar fácilmente los recursos proporcionados por el servidor de hosting o los servicios de email.
¿Existe un código HTML para enviar emails desde un formulario?
La única opción para enviar un email directamente desde un formulario HTML es el link mailto:. Y aunque suena como una solución enviada del cielo, este enfoque también es problemático.
Los link mailto: se pueden establecer como una acción del formulario, pero no envían emails por sí mismos. En su lugar, activan un software de email (como el cliente de email predeterminado en su computadora, por ejemplo Microsoft Outlook o Apple Mail). Esto puede interrumpir el engagement del sitio web y la experiencia del usuario.
Verá, no todos los visitantes del sitio web usan un programa de email predeterminado. Algunos de ellos dependen de webmail. Al hacer clic en el enlace mailto:, es posible que tengan que descargar un software que no tienen intención de usar. Y forzar a los usuarios a cambiar entre el sitio web y las aplicaciones de email no es lo más amigable que puede hacer. Eso es, si el navegador soporta esta función y abre un cliente de email.
Además, mailto: es bastante limitado en funcionalidad. No permite agregar archivos adjuntos ni tener control sobre el formato del email.
Se puede agregar un asunto de email o el cuerpo para que estos se completen previamente en la ventana emergente del cliente de email. Sin embargo, esto puede hacer que la URL sea demasiado larga. Si el navegador tiene limitaciones en la longitud de las URL, mailto: puede ser manejado incorrectamente o mostrarse de manera incorrecta.
Aquí hay un ejemplo simple de mailto: en caso de que aún quiera probarlo:
<a href="mailto:masteryoda@starwars.com">Me encanta Star Wars</a>Y así es como se vería con Cc, Bcc, asunto y cuerpo del email:
<a href="mailto:masteryoda@starwars.com? cc=skywalker@starwars.com& bcc=leia@starwars.com& subject=Que%20la%20Fuerza%20te%20acompañe&body=Que%20la%20Fuerza%20nos%20acompañe%20a%20todos%3A%0D%0A%0D%0ASaludos%2C%0D%0ACliente%20Feliz">Me encanta Star Wars</a> ¿Se puede enviar emails usando un formulario HTML con JavaScript?
No, no se puede. JavaScript es un script del lado del cliente – enviar emails desde él revelaría las mismas vulnerabilidades que HTML.
Sin embargo, puede usar Javascript para validar los campos del formulario, como la dirección de email. Luego, enviar el formulario a través de un lenguaje del lado del servidor. La opción más común es PHP. Explicaremos cómo usar esa combinación a continuación.
Cómo crear un formulario HTML
Antes de construir un script de envío de email, primero debemos crear un simple formulario de contacto HTML. Para simplificar nuestros ejemplos, no usaremos ningún estilo CSS. Sí, nuestro formulario se verá como el dibujo de un niño pequeño, pero no estamos tratando de ser Picassos de la programación.
El código de un formulario HTML simple se verá algo así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formulario de Contacto</title>
</head>
<body>
<h2>Contáctanos</h2>
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Dirección de Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="message">Mensaje:</label>
<textarea id="message" name="message" required></textarea>
<br>
<button type="submit">Enviar</button>
</form>
</body>
</html>Y esto es lo que verán los usuarios:
Cómo enviar emails usando un formulario HTML con PHP
Para enviar emails desde un formulario HTML usando PHP, también tenemos que validar la entrada del formulario. Esto es necesario para evitar direcciones inválidas como masteryoda\@starwars o masteryoda.starwars.com.
Para la validación, tiene dos opciones – la validación incorporada de HTML5 y validate.js de JavaScript.
Validación y envío de emails usando HTML5 y PHP
HTML5 es la última versión de HTML. Valida la entrada del formulario usando atributos como required, pattern, type, etc. Por lo tanto, se puede usar para ejecutar validaciones del lado del cliente.
El siguiente código es un ejemplo de un formulario HTML con validación HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formulario de Contacto</title>
</head>
<body>
<form action="send_email.php" method="post">
<label for="firstName">Nombre:</label>
<input type="text" id="firstName" name="firstName" required>
<br>
<label for="email">Dirección de Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="message">Mensaje:</label>
<textarea id="message" name="message" required></textarea>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>En este script, el método del formulario se define con POST, lo que significa que debe enviar una solicitud POST al servidor. El atributo required hace que los campos, como nombre, dirección de email y mensaje sean obligatorios. Si alguno de estos campos está vacío y usted hace clic en Enviar, verá un mensaje que dice Por favor, rellene este campo.
input type="email" verifica si la dirección de email ingresada tiene un formato válido, mientras que form action="send_email.php" apunta al script PHP que procesará la solicitud y enviará el email.
Ahora es momento de agregar una validación del lado del servidor. El código a continuación verifica si los campos de nombre, email y mensaje están vacíos. Si el campo de email no está vacío, verifique si la dirección proporcionada es válida o no. El array $errors contendrá mensajes de error correspondientes a cualquier campo de entrada inválido o faltante.
<?php
$errors = [];
if (!empty($_POST)) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
if (empty($name)) {
$errors[] = 'El nombre está vacío';
}
if (empty($email)) {
$errors[] = 'El email está vacío';
} else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = 'El email no es válido';
}
if (empty($message)) {
$errors[] = 'El mensaje está vacío';
}
}En este punto, podemos comenzar a escribir un script de envío de email en PHP.
Nota: PHP usa la función mail() para enviar emails. Utiliza el servidor de email local configurado en el servidor en el que se está ejecutando PHP. No recomendamos usarlo ya que no es un método seguro para enviar emails. PHPMailer es una opción mucho más segura y confiable, discutiremos esto más adelante en la siguiente sección.
Cree un nuevo archivo PHP con el nombre especificado en el código HTML. En este caso, será send_email.php. El script tomará los datos del formulario como nombre, email y mensaje si la solicitud es POST. Luego, validará los campos del formulario.
Si todo es correcto, el script enviará un email a la dirección de destinatario especificada. Si la solicitud no es POST, se mostrará un error 403 forbidden.
<?php
$errors = [];
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Obtener datos POST
$name = isset($_POST['name']) ? strip_tags(trim($_POST['name'])) : '';
$email = isset($_POST['email']) ? trim($_POST['email']) : '';
$message = isset($_POST['message']) ? strip_tags(trim($_POST['message'])) : '';
// Validar campos del formulario
if (empty($name)) {
$errors[] = 'El nombre está vacío';
}
if (empty($email)) {
$errors[] = 'El email está vacío';
} else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = 'El email no es válido';
}
if (empty($message)) {
$errors[] = 'El mensaje está vacío';
}
// Si no hay errores, enviar email
if (empty($errors)) {
// Dirección de email del destinatario (reemplace con la suya)
$recipient = "destinatario@ejemplo.com";
// Encabezados adicionales
$headers = "From: $name <$email>";
// Enviar email
if (mail($recipient, $message, $headers)) {
echo "¡Email enviado exitosamente!";
} else {
echo "Error al enviar el email. Por favor, inténtelo más tarde.";
}
} else {
// Mostrar errores
echo "El formulario contiene los siguientes errores:<br>";
foreach ($errors as $error) {
echo "- $error<br>";
}
}
} else {
// No es una solicitud POST, mostrar error 403 forbidden
header("HTTP/1.1 403 Forbidden");
echo "No tiene permiso para acceder a esta página.";
}
?>Consulte este artículo del blog o mire este video para aprender más sobre el envío de emails con PHP.
Usted puede usar un formulario de contacto PHP para crear una página de contacto en WordPress o Drupal. Sin embargo, si no está dispuesto a hacer algo con códigos, hay múltiples plugins de constructor de formularios disponibles.
Envío de emails desde formulario web HTML usando PHPMailer
PHPMailer es una alternativa segura a la función mail de PHP ya que envía emails a través de un servidor SMTP y cumple con los estándares de seguridad modernos. Puede instalarlo vía composer usando la siguiente línea de código:
composer require phpmailer/phpmailerTambién necesitaremos un servidor SMTP para enrutar nuestros emails. Para este ejemplo, usaremos Email API/SMTP de Mailtrap – una infraestructura de email con altas tasas de entregabilidad por diseño. Tiene servicios de Email API y SMTP para una configuración rápida y fácil.
Para acceder a las credenciales SMTP, diríjase a https://mailtrap.io/es/ y cree una cuenta.
Navegue hasta Sending Domains y agregue su dominio de envío. Luego verifíquelo siguiendo las instrucciones en el video a continuación.
Una vez que esté listo, vaya a la pestaña API and SMTP y elija el stream de envío (Transactional o Bulk) que desea usar, luego SMTP o API.
Tome nota de las credenciales SMTP y vuelva a construir el código PHPMailer.
Así es como se verá el script PHPMailer para la página HTML anterior:
<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'vendor/autoload.php';
$errors = [];
$errorMessage = ' ';
$successMessage = ' ';
echo 'sending ...';
if (!empty($_POST))
{
$name = $_POST['firstName'];
$email = $_POST['email'];
$message = $_POST['message'];
if (empty($name)) {
$errors[] = 'El nombre está vacío';
}
if (empty($email)) {
$errors[] = 'El email está vacío';
} else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = 'El email no es válido';
}
if (empty($message)) {
$errors[] = 'El mensaje está vacío';
}
if (!empty($errors)) {
$allErrors = join ('<br/>', $errors);
$errorMessage = "<p style='color: red; '>{$allErrors}</p>";
} else {
$fromEmail = 'sunombre@ejemplo.com';
$emailSubject = 'Nuevo email de su formulario de contacto';
// Cree una nueva instancia de PHPMailer
$mail = new PHPMailer(exceptions: true);
try {
// Configure la instancia de PHPMailer
$mail->isSMTP();
$mail->Host = 'live.smtp.mailtrap.io';
$mail->SMTPAuth = true;
$mail->Username = 'api';
$mail->Password = 'su_contraseña_smtp';
$mail->SMTPSecure = 'tls';
$mail->Port = 587;
// Establezca el remitente, destinatario, asunto y cuerpo del mensaje
$mail->setFrom($email);
$mail->addAddress($email);
$mail->setFrom($fromEmail);
$mail->Subject = $emailSubject;
$mail->isHTML( isHtml: true);
$mail->Body = "<p>Nombre: {$name}</p><p>Email: {$email}</p><p>Mensaje: {$message}</p>";
// Envíe el mensaje
$mail->send () ;
$successMessage = "<p style='color: green; '>Gracias por contactarnos :)</p>";
} catch (Exception $e) {
$errorMessage = "<p style='color: red; '>Ups, algo salió mal. Por favor intente nuevamente más tarde</p>";
echo $errorMessage;
}
}
}
?>No olvide sustituir los placeholders con las variables reales.
Si quiere profundizar en las peculiaridades de PHPMailer, lea nuestro dedicated blog post.
Mientras envía sus primeros emails con Email API/SMTP de Mailtrap, monitoree su rendimiento con análisis procesables. Verifique las estadísticas de apertura, clics y bounce rates para mantener el control de su infraestructura.
Validación y envío de emails usando código JavaScript y PHP
Necesitaremos instalar validate.js para validar las entradas del formulario de email HTML con JavaScript. Esto se puede hacer añadiendo la librería desde CDN.
<script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script> El script de validación se verá así:
<script>
const constraints = {
name: {
presence: { allowEmpty: false }
},
email: {
presence: { allowEmpty: false },
email: true
},
message: {
presence: { allowEmpty: false }
}
};
const form = document.getElementById('contact-form');
form.addEventListener('submit', function (event) {
const formValues = {
name: form.elements.name.value,
email: form.elements.email.value,
message: form.elements.message.value
};
const errors = validate(formValues, constraints);
if (errors) {
event.preventDefault();
const errorMessage = Object
.values(errors)
.map(function (fieldValues) { return fieldValues.join(', ')})
.join("\n");
alert(errorMessage);
}
}, false);
</script>El código anterior define el objeto constraints con reglas para validar los campos del formulario. Los campos de nombre, email y mensaje no pueden estar vacíos, y el campo de email debe ser completado con una entrada válida.
La constante form se asigna al elemento de formulario HTML con el ID contact-form usando document.getElementById.
Una función es activada cuando se envía el formulario. Extrae los datos de los campos y los almacena en el objeto formValues. Luego, valida formValues usando la función validate(). Si hay errores de validación, evita que el formulario se envíe usando event.preventDefault().
Los mensajes de error se combinan en una sola string errorMessage y se muestran usando la función alert().
La validación del backend será la misma que en nuestro ejemplo anterior.
A continuación, puede ver un ejemplo de código completo que contiene validación PHP y JavaScript, además del formulario de email con formato HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Envío de formulario de contacto</title>
</head>
<body>
<form method="post" id="contact-form">
<h2>Contáctanos</h2>
<?php
$errorMessage = ''; // Definir $errorMessage
echo(!empty($errorMessage) ? $errorMessage : '');
?>
<p>
<label>Nombre:</label>
<input name="name" type="text"/>
</p>
<p>
<label>Dirección de Email:</label>
<input style="cursor: pointer;" name="email" type="text"/>
</p>
<p>
<label>Mensaje:</label>
<textarea name="message"></textarea>
</p>
<p>
<input type="submit" value="Enviar"/>
</p>
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
<script>
const constraints = {
name: {
presence: { allowEmpty: false }
},
email: {
presence: { allowEmpty: false },
email: true
},
message: {
presence: { allowEmpty: false }
}
};
const form = document.getElementById('contact-form');
form.addEventListener('submit', function(event) {
const formValues = {
name: form.elements.name.value,
email: form.elements.email.value,
message: form.elements.message.value
};
const errors = validate(formValues, constraints);
if (errors) {
event.preventDefault();
const errorMessage = Object.values(errors)
.map(function(fieldValues) {
return fieldValues.join(', ');
})
.join("\n");
alert(errorMessage);
}
}, false);
</script>
</body>
</html>Envío de emails desde formulario HTML con PHPMailer
Vamos a sustituir PHP con PHPMailer una vez más, pero esta vez también añadiremos reCAPTCHA.
Vaya a la página de Google reCAPTCHA y elija su versión. A menos que quiera reescribir todo el código y activar reCAPTCHA manualmente desde el frontend, le recomendamos usar el Challenge (v2). Puede manejarlo en el backend y enviarlo con el formulario.
Google proporciona dos tipos de reCAPTCHA v2:
- Casilla de verificación “No soy un robot” que valida las solicitudes con la casilla “No soy un robot”;
- Insignia invisible de reCAPTCHA que valida las solicitudes en segundo plano.
Optaremos por la insignia invisible. Una vez que haga clic en el botón Submit, verá su Site Key y Secret Key. Tome nota de ambos, ya que necesitará insertar sus valores en el siguiente código:
<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'vendor/autoload.php';
$errors = [];
$errorMessage = '';
$successMessage = '';
$siteKey = 'YOUR_RECAPTCHA_SITE_KEY';
$secret = 'YOUR_RECAPTCHA_SECRET_KEY';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$name = sanitizeInput ($_POST['name']);
$email = sanitizeInput ($_POST['email']);
$message = sanitizeInput ($_POST ['message']);
$recaptchaResponse = sanitizeInput ($_POST['g-recaptcha-response']);
$recaptchaUrl = "https://www.google.com/recaptcha/api/siteverify?secret={$secret]&response={$recaptchaResponse]";
$verify = json_decode(file_get_contents($recaptchaUrl));
if (!$verify->success) {
$errors [ ] = 'Falló el Recaptcha';
}
if (empty ($name)) {
$errors [ ] = 'El nombre está vacío';
}
if (empty ($email)) {
$errors [ ] = 'El email está vacío';
} else if (!filter_var($email, filter: FILTER_VALIDATE_EMAIL)) {
$errors [ ] = 'El email no es válido';
}
if (empty ($message)) {
$errors [ ] = 'El mensaje está vacío';
}
if (!empty ($errors)) {
$allErrors = join ( separator: '<br/>', $errors);
$errorMessage = "<p style='color: red; '>{$allErrors}</p>";
} else {
$toEmail = 'miemail@example.com';
$emailSubject = 'Nuevo email de su formulario de contacto';
// Cree una nueva instancia de PHPMailer
$mail = new PHPMailer (exceptions: true);
try {
// Configure la instancia de PHPMailer
$mail->isSMTP();
$mail->Host = 'live.smtp.mailtrap.io';
$mail->SMTPAuth = true;
$mail->Username = 'api';
$mail->Password = 'su_contraseña_smtp';
$mail->SMTPSecure = 'tls';
$mail->Port = 587;
// Establezca el remitente, destinatario, asunto y cuerpo del mensaje
$mail->setFrom($email);
$mail->addAddress($toEmail);
$mail->Subject = $emailSubject;
$mail->isHTML( isHtml: true);
$mail->Body = "<p>Nombre: {$name]</p><p>Email: {$email]</p><p>Mensaje: {$message]</p>;
// Envíe el mensaje
$mail->send () ;
$successMessage = "<p style='color: green; '>Gracias por contactarnos :)</p>";
} catch (Exception $e) {
$errorMessage = "<p style='color: red; '>Ups, algo salió mal. Por favor intenta nuevamente más tarde</p>";
}
}
}
function sanitizeInput($input) {
$input = trim($input);
$input = stripslashes($input);
$input = htmlspecialchars($input, ENT_QUOTES, 'UTF-8');
return $input;
}
?>
<html>
<body>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<form action="/" method="post" id="contact-form">
<h2>Contáctanos</h2>
<?php echo (!empty($errorMessage) ? $errorMessage : ''); ?>
<?php echo (!empty($successMessage) ? $successMessage : ''); ?>
<p>
<label>Nombre:</label>
<input name="name" type="text" required />
</p>
<p>
<label>Dirección de Email:</label>
<input style="..." name="email" type="email" required />
</p>
<p>
<label>Mensaje:</label>
<textarea name="message" required></textarea>
</p>
<p>
<button class="g-recaptcha" type="submit" data-sitekey="<?php echo $siteKey ?>" data-callback="onRecaptchaSuccess">
Enviar
</button>
</p>
</form>
<script>
function onRecaptchaSuccess() {
document.getElementById('contact-form').submit();
}
</script>
</body>
</html>Este script incorpora la insignia reCAPTCHA, realiza validaciones del lado del servidor y envía un email a través del servidor SMTP. Las propiedades como Host, SMTPAuth, Username, Password, SMTPSecure, y Port deben completarse con sus credenciales de Mailtrap.
Cómo enviar emails de formulario HTML con archivos adjuntos
También es posible enviar emails de formulario HTML con archivos adjuntos. Para eso, recomendamos usar PHPMailer ya que es una opción mucho más simple.
Solo tendrá que usar el método $mail->AddAttachment() después de la propiedad body.
$mail->AddAttachment($_FILES["attachment"]["tmp_name"], $_FILES["attachment"]["name"]);Prueba de emails de formulario HTML
Como ya habrá notado, los formularios HTML pueden ser un poco complicados, especialmente cuando se combinan con la función mail() de PHP. Sus emails pueden no entregarse, los archivos adjuntos podrían no funcionar, o el contenido HTML puede no renderizarse correctamente.
Por esa razón, se recomienda probar la funcionalidad de envío de emails de su formulario HTML. Esto se puede hacer fácilmente con una herramienta dedicada como Email Testing de Mailtrap. Es parte de la Plataforma de Email Delivery de Mailtrap junto con el Email API/SMTP de Mailtrap que mencionamos anteriormente.
Email Testing es un Email Sandbox que captura todo el tráfico SMTP y proporciona un entorno seguro para inspeccionar sus emails. Para usarlo con PHP, puede usar las credenciales SMTP o un cliente oficial de PHP.
Para la integración SMTP, simplemente cambie las credenciales SMTP en el código PHPMailer que usamos anteriormente con las credenciales del inbox virtual.
Una vez creada la cuenta, vaya a My Inbox y haga clic en Show Credentials.
Copie y pegue el host, puerto, nombre de usuario y contraseña en el script PHPMailer, así:
$mail->isSMTP();
$mail->Host = 'sandbox.smtp.mailtrap.io';
$mail->SMTPAuth = true;
$mail->Username = 'bc42y885026349'; // Indique su nombre de usuario
$mail->Password = 'r720418fg006h5'; // Indique su contraseña
$mail->SMTPSecure = 'tls';
$mail->Port = 587;Si quiere usar el cliente oficial de PHP, siga estos pasos:
1. Instale el SDK de Mailtrap desde Composer.
composer require railsware/mailtrap-php2. Cree un archivo send_email.php en el mismo directorio que su formulario HTML. Este archivo obtendrá los datos del formulario, compondrá un email a partir de ellos y luego enviará el email.
<?php
require __DIR__ . '/vendor/autoload.php';
use Mailtrap\Config;
use Mailtrap\MailtrapClient;
use Symfony\Component\Mime\Address;
use Symfony\Component\Mime\Email;
// Inicializar Cliente Mailtrap
$apiKey = 'SU_CLAVE_API_MAILTRAP'; // Reemplace con Su Clave API de Mailtrap
$mailtrap = new MailtrapSandboxClient(new Config($apiKey));
// Obtener datos del formulario
$name = $_POST['name'] ?? '';
$emailAddress = $_POST['email'] ?? '';
$message = $_POST['message'] ?? '';
// Componer email
$email = (new Email())
->from(new Address($emailAddress, $name))
->to(new Address('ejemplo@mailtrap.io', 'Destinatario de Prueba')) // Reemplace con su dirección de email de Mailtrap
->subject('Nuevo Mensaje del Formulario de Contacto')
->text($message)
->html("<html><body><p>{$message}</p></body></html>");
// Enviar email y revisar respuesta
try {
$inboxId = 'SU_ID_DE_INBOX'; // Reemplace con su ID de Inbox de Mailtrap
$response = $mailtrap->sandbox()->emails()->send($email, $inboxId);
echo '¡El email ha sido enviado!';
} catch (Exception $e) {
echo 'Error: ' . $e->getMessage();
}3. En el código, reemplace SU_CLAVE_API_MAILTRAP con su Clave API real. Puede crearla yendo a Settings → API Tokens.
4. Reemplace SU_ID_DE_INBOX con su ID de inbox real. Vaya a My Inbox y copie el ID desde la URL.
5. Apunte el atributo action del formulario HTML al archivo send_email.php.
<form action="send_email.php" method="post">6. Abra el formulario HTML en el navegador y complételo con datos de ejemplo. Haga clic en Send. El email debería llegar a su inbox de Mailtrap en segundos.
Abra el email y comience a probar varios aspectos del mismo.
Inspeccione el código fuente HTML para encontrar los elementos no soportados de su email HTML o navegue a la pestaña de verificación HTML para filtrar el soporte de clientes por proveedores de email como Gmail, Microsoft Outlook, Apple Mail, etc.
Abra la pestaña Spam Analysis para verificar su contenido y asegúrese de que el Spam Score esté por debajo de 5. Diríjase hacia abajo para verificar si su dominio de envío ha sido incluido en las listas negras. O mire la información técnica para revisar los encabezados del email y la información de transacción SMTP.
Conclusiones
Ahora que conoce todos los detalles sobre el envío de emails desde formularios HTML, los formularios de contacto ya no le asustarán. Ya sean feos o hayan tenido un cambio de imagen ✨, puede enviar emails desde ellos de forma segura con PHPMailer, reCAPTCHA y validación JavaScript.
Si está interesado en construir formularios de contacto en otros lenguajes de programación, visite nuestro canal de YouTube donde tenemos publicados múltiples tutoriales de formularios de contacto:
- Formularios de Contacto en PHP
- Formularios de Contacto en Vue.js
- Formularios de Contacto en JavaScript
- Formularios de Contacto en Ruby on Rails
- Formularios de Contacto en Django
- Formularios de Contacto en Flask
Mientras tanto, lee estos artículos del blog para dominar los formularios HTML:
