Enviar correo electrónico mediante un formulario de contacto php, html, css, js y PHPMailer
Como parte del curso de fundamentos web, desarrollaremos un formulario de contacto básico php/html, con estilos css, algunas validaciones mediante Java Script y la librería PHPMailer para el envío de correo electrónico.
Lo construiremos paso a paso… primero empecemos con la vista principal, el formulario.html.
Etapa 1 – Construir formulario html
Formulario.html
Vista Resultante
Paso 2 – agregar estilos CSS.
En este paso tenemos 3 métodos para insertar estilos CSS:
- Incrustado (Hardcodeado) – Directamente en el formulario html.
- Local – En el servidor local como hoja de estilos dentro del proyecto.
- CDN (red de entrega de contenido) – Link hacia un servidor en la nube.
Tener presente que tanto la opción 1 y 2 son recursos locales (en el servidor local); la opción 3 es un link directo a un recurso en la nube.
Formulario.html – con estilos mediante CDN
Nótese que ya estamos usando CDN en la linea 8 y la línea 61
Vista Resultante
Paso 3 – Validación de Campos
Ya tenemos un formulario html con estilos aplicados mediante CDN; ahora procederemos con la validación de campos, el cual es un factor muy importante en el desarrollo de Front-end. Por ejemplo, el campo dni, debe tener un tamaño de 8 dígitos, no más y no menos; estos detalles son los que debemos validar en el formulario a fin de reducir el error humano.
Estas validaciones serán ejecutadas mediante Java Script.
validacion.js
Formulario.html – Actualizado.
Paso 4 – Incorporar PHPMailer
¿Qué es PHPMailer?
PHPMailer es una librería escrita en PHP que proporciona una forma avanzada, flexible y segura de enviar correos electrónicos desde aplicaciones web. A diferencia de la función mail() nativa de PHP, PHPMailer permite funcionalidades más completas y modernas, como autenticación SMTP, envío de archivos adjuntos, soporte para HTML y caracteres especiales, y conexión segura mediante SSL/TLS.
Principales características:
- Protocolo SMTP: Permite enviar correos autenticados usando servidores externos (como Gmail, Outlook, etc.).
- Soporte para HTML: Puede enviar correos en formato HTML, incluyendo imágenes embebidas y estilos.
- Adjuntos: Permite adjuntar múltiples archivos de cualquier tipo al correo.
- Autenticación segura: Soporta autenticación con usuario y contraseña, incluyendo conexiones seguras mediante TLS o SSL.
- Internacionalización: Admite juegos de caracteres como UTF-8, permitiendo enviar correos en varios idiomas.
- Compatibilidad: Funciona tanto con PHP moderno (7.x, 8.x) como con versiones más antiguas.
Repositorio Oficial:
https://github.com/PHPMailer/PHPMailer
Para nuestro formulario solo requerimos el contenido de la carpeta src
Construiremos la siguiente estructura en nuestro proyecto:
Los 7 archivos de la carpeta phpmailer se extraen de la librería PHPMailer en su repositorio oficial de GitHub, estan en src.
formulario.html
validacion.js
enviar_correo.php
Vista de formulario
Vista de correo recibido
