Consideraciones generales.
Para agregar el formulario de registro a cualquier sitio web, es necesario que las carpetas: language y src así como los archivos: smtp.php, formulario.html y enviado.html estén en el servidor que hospedará al sitio, en la misma carpeta o nivel que contendrá al archivo HTML al cual vamos a integrar el formulario de contacto.
Integrar el código del formulario al sitio web
Dentro del archivo formulario.html se encuentra contenido el código correspondiente al formulario.
Para integrar este formulario a cualquier página HTML O PHP, sólo es necesario colocar la siguiente línea de código, dentro del código de la página en la cual deseamos que aparezca:
<form action="smtp.php" method="post">
<div>
<label>Nombre completo</label>
<input name="Nombre" type="text" placeholder="Escribe tu nombre completo">
</div>
<div>
<label>Correo electrónico</label>
<input name="Correo" type="email" placeholder="[email protected]">
</div>
<div>
<label>Mensaje</label>
<textarea name="Mensaje" rows="3" placeholder="Escribe tu mensaje"></textarea>
</div>
<button type="submit">Enviar</button>
</form></form>
Es importante recordar que el archivo en el cual vamos a insertar este código deberá estar en la misma carpeta donde se encuentran el archivo formulario.html y los archivos y carpetas previamente mencionados.
Configurar los datos del servidor SMTP
Para configurar los datos con los cuales nos vamos a autenticar dentro de nuestro servidor para el envío de correo electrónico, es necesario que editemos el archivo smtp.php, esto lo podemos hacer abriéndolo con un editor de texto, recomendable que se haga con el Block de Notas (Notepad), al término de la edición, hacer clic en guardar.
Al abrir el archivo, debemos de posicionarnos en las siguientes líneas de código:
$mail->setFrom('[email protected]');
$mail->FromName = $Nombre;
$mail->AddAddress("[email protected]");
Deberás colocar la dirección de correo desde la que se enviará el correo electrónico. Debes tener en cuenta que debe ser la misma que configures como correo para la autenticación de SMTP.
En la tercera línea,
$mail->AddAddress("[email protected]");
Vamos a colocar la dirección de correo a la cual queremos que nos llegue la información enviada por el formulario de contacto, en este caso estaríamos reemplazando la dirección de correo que viene dentro de los paréntesis, por nuestra dirección de correo, siempre cuidando no borrar las comillas dobles, ni nada que sea diferente a la dirección de correo que vamos a sustituir.
Por ejemplo, si nuestra dirección de correo es
[email protected], la tercera línea deberá quedar así:
$mail->AddAddress("[email protected]");
* Siempre cuidando no borrar ningún signo, como lo pueden ser los paréntesis, las comillas dobles y punto coma.
Después de haber configurado el mail en el cual vamos a recibir la información, procedemos a configurar los datos con los cuales nos conectaremos a nuestro servidor de correo, para esto debemos de encontrar las siguientes líneas de código dentro de nuestro archivo smtp.php:
$mail->IsSMTP();
$mail->Host = "mail.midominio.com";
$mail->SMTPAuth = true;
$mail->SMTPSecure = 'tls';
$mail->Port = 587;
$mail->Username = "[email protected]";
$mail->Password = "contraseña-de-correo";
Una vez ubicadas éstas, debemos de modificar las líneas 2,6 y 7.
En la segunda línea vamos a escribir la dirección de nuestro servidor de salida. Si nuestro servidor es mail.midominio.com, entonces la segunda línea quedaría de la siguiente manera:
$mail->Host = "mail.midominio.com";
Siempre cuidando no borrar ningún signo, como lo pueden ser los paréntesis y punto coma, y sin dejar espacios en blanco entre los paréntesis y las letras.
La línea 4, corresponde a nuestra cuenta de correo con la cual nos vamos a autenticar, por ejemplo, si nuestra cuenta de correo es
[email protected], la línea 4 deberá quedar de esta manera:
$mail->Username = "[email protected]";
Siempre cuidando no borrar ningún signo, como lo pueden ser los paréntesis y punto coma, y sin dejar espacios en blanco entre los paréntesis y las letras.
La línea 5 refiere a la contraseña correspondiente a la cuenta de correo con la cual nos vamos a autenticar. Si nuestra contraseña es 654321, la línea 5 quedaría así:
$mail->Password = "contraseña-de-correo";
Siempre cuidando no borrar ningún signo, como lo pueden ser los paréntesis y punto coma, y sin dejar espacios en blanco entre los paréntesis y las letras.
Una vez hechos estos cambios, hacer clic en guardar dentro del editor que estemos usando. Después procedemos a colocar este archivo dentro del servidor, recordando que debe de estar en la misma carpeta del formulario de contacto.
Los estilos del ejemplo están basados en Bootstrap 4, aunque pueden adecuarse a cualquier estilo copiando el código base.
Para obtener los archivos de ejemplo, sólo basta con dar click en el siguiente botón:
