Cómo crear un formulario de contacto de Laravel y enviar correos electrónicos con SendGrid

El autor seleccionó la Iniciativa de Código Abierto para recibir una donación como parte del programa Write for DOnations.

Introducción

Laravel es un framework PHP gratuito y de código abierto, basado en Symfony y utilizado para crear aplicaciones web. SendGrid es un proveedor SMTP basado en la nube que permite enviar correos electrónicos sin tener que mantener servidores de correo electrónico.

Tener un formulario de contacto en su sitio web facilita que sus visitantes se comuniquen con usted directamente. Para que su formulario de contacto funcione correctamente y envíe correos electrónicos, necesita un servidor SMTP. En este tutorial, utilizaremos SendGrid y su servicio SMTP gratuito para enviar los correos electrónicos enviados desde el formulario de contacto del sitio web a una bandeja de entrada de correo electrónico.

En este tutorial, agregará un formulario de contacto a una aplicación Laravel existente y lo configurará para enviar correos electrónicos a través de SMTP usando SendGrid.

Prerrequisitos

Si aún no tienes una aplicación Laravel configurada, necesitarás lo siguiente:

• Acceso a un servidor Ubuntu 20.04 como usuario no root con privilegios sudo y un firewall activo instalado en el servidor. Para configurarlos, consulte nuestra Guía de configuración inicial del servidor para Ubuntu 20.04.

• La pila LEMP instalada en su servidor siguiendo Cómo instalar Nginx, MySQL y PHP en Ubuntu 20.04.
• Composer para instalar Laravel y sus dependencias. Puedes instalar Composer siguiendo nuestra guía sobre Cómo instalar Composer en Ubuntu 20.04.

• Laravel instalado y configurado en tu servidor. Si aún no tienes instalado Laravel, puedes seguir nuestro tutorial Cómo instalar y configurar Laravel con Nginx en Ubuntu 20.04.

Después de haber configurado su aplicación Laravel, también necesitará lo siguiente:

• Una cuenta de SendGrid. Puede visitar la página de registro de SendGrid para registrarse y obtener una cuenta gratuita de SendGrid.
• Un nombre de dominio completamente registrado que apunta a su servidor. Este tutorial se utilizará your_domainen todo momento. Puede comprar un nombre de dominio en Namecheap, obtener uno gratis en Freenom o utilizar el registrador de dominios que prefiera. Para DigitalOcean, puede seguir esta introducción a DigitalOcean DNS para obtener detalles sobre cómo agregarlos.

Paso 1: creación de la identidad del remitente

SendGrid requiere que verifiques la propiedad de tu nombre de dominio antes de permitirte comenzar a enviar correos electrónicos. Para verificar tu nombre de dominio, ve a tu cuenta de SendGrid, luego al Panel de Control y haz clic en Autenticar tu dominio .

Esto lo llevará a una página donde deberá especificar su servidor DNS y elegir si desea personalizar los enlaces para su dominio. La personalización de enlaces de correo electrónico le permite configurar todos los enlaces utilizados para el seguimiento de clics en sus correos electrónicos para que se dirijan a su dominio en lugar de hacerlo desde sendgrid.net.

Luego haga clic en Siguiente y en la página siguiente, especifique su nombre de dominio.

Por último, deberás agregar los registros DNS proporcionados por SendGrid para completar el proceso de verificación. Para obtener más información sobre cómo administrar tus registros DNS, puedes leer este tutorial sobre Cómo crear, editar y eliminar registros DNS.

Una vez que haya agregado los registros DNS a su zona DNS, regrese a SendGrid y presione el botón Verificar .

Una vez verificada tu identidad de SendGrid, deberás generar una clave API, que utilizarás en tu .envarchivo Laravel.

En el menú de la izquierda, haz clic en Claves API y luego en el botón Crear clave API . Por razones de seguridad, configura los Permisos de clave API en Acceso restringido .

Después de eso, desplácese hacia abajo y agregue los permisos de envío de correo .

Por último, haz clic en el botón Crear vista para obtener tu clave API. La clave API solo será visible una vez, así que asegúrate de anotarla en un lugar seguro.

Ahora que ha configurado su dominio con SendGrid y generado su clave API, configurará los detalles SMTP para su aplicación Laravel.

Paso 2: Configuración de los detalles de SMTP

El .envarchivo en Laravel se utiliza para almacenar varias opciones de configuración para el entorno de tu aplicación. Dado que suele haber información confidencial en el .envarchivo, como los detalles de conexión a la base de datos, no debes enviar el .envarchivo al control de código fuente.

Si completó el tutorial de requisitos previos, deberá estar en el /var/www/travellistdirectorio para acceder a su .envarchivo:

cd /var/www/travellist

Después de eso, usa tu editor de texto favorito y abre el .envarchivo:

nano .env

Hay muchas variables de configuración en el .envarchivo; en este tutorial solo cambiará las MAILvariables.

Para ello, busque la MAIL_configuración y configure las variables de la siguiente manera, agregando la clave API copiada sendgrid_api_keyy actualizando los demás campos resaltados según sea necesario:

.env

. . .MAIL_MAILER=smtpMAIL_HOST=smtp.sendgrid.netMAIL_PORT=587MAIL_USERNAME=apikeyMAIL_PASSWORD=sendgrid_api_keyMAIL_ENCRYPTION=tls. . .

La siguiente lista contiene una descripción general de las variables que deben actualizarse para que su aplicación Laravel comience a utilizar el servidor SMTP de SendGrid:

• MAIL_HOST:El nombre de host SMTP de SendGrid, que se utilizará para enviar correos electrónicos.
• MAIL_PORT:El puerto SMTP TLS seguro de SendGrid.
• MAIL_USERNAME: Su nombre de usuario de SendGrid. De manera predeterminada, es apikeypara todas las cuentas.
• MAIL_PASSWORD:Su clave API de SendGrid.
• MAIL_ENCRYPTION: El protocolo de cifrado de correo. En este caso, utilizará TLS, ya que protege el contenido del correo electrónico durante la transferencia entre servidores.

Guardar y salir del archivo.

Con la configuración SMTP establecida, está listo para continuar y configurar su controlador de contactos.

Paso 3: creación del controlador

A continuación, creará un controlador que manejará sus mensajes POSTy GETsolicitudes para su página de formulario de contacto.

Utilizará la GETruta para devolver la página HTML que contiene su formulario de contacto, y la POSTruta manejará los envíos del formulario de contacto.

Para crear un controlador llamado ContactControlleren Laravel, use el siguiente artisancomando:

php artisan make:controller ContactController

Después de ejecutar el comando, obtendrá el siguiente resultado:

OutputController created successfully.

Este comando creará un nuevo controlador en app/Http/Controllers/ContactController.php.

Ejecute lo siguiente para editar el ContactController.phparchivo:

nano app/Http/Controllers/ContactController.php

Primero, incluirás la Mailfachada de Laravel para que puedas usar la funcionalidad de correo en tu nuevo controlador. Una fachada en Laravel es una clase que brinda acceso a diferentes funciones de Laravel. Para obtener más información sobre las fachadas de Laravel, consulta la documentación oficial de fachadas de Laravel.

Para incluir la Mailfachada de Laravel, agregue lo siguiente:

aplicación/Http/Controladores/ContactController.php

?phpnamespace AppHttpControllers;use IlluminateHttpRequest;use Mail;. . .

Luego agregue el método que manejará sus GETsolicitudes y devolverá la vista de la página de contacto:

aplicación/Http/Controladores/ContactController.php

. . .class ContactController extends Controller{        public function contact(){                return view('contact');        }}

Por último, agreguemos un método que manejará las POSTsolicitudes y enviará los correos electrónicos:

aplicación/Http/Controladores/ContactController.php

...class ContactController extends Controller{        public function contact(){                return view('contact');        }    public function contactPost(Request $request){        $this-validate($request, [                        'name' = 'required',                        'email' = 'required|email',                        'comment' = 'required'                ]);        Mail::send('email', [                'name' = $request-get('name'),                'email' = $request-get('email'),                'comment' = $request-get('comment') ],                function ($message) {                        $message-from('youremail@your_domain');                        $message-to('youremail@your_domain', 'Your Name')                        -subject('Your Website Contact Form');        });        return back()-with('success', 'Thanks for contacting me, I will get back to you soon!');    }}

Dentro de las líneas resaltadas, necesitarás cambiar algunas de las variables, de la siguiente manera:

• $message-from('youremail@your_domain');:Cambie el youremail@your_domaincon su dirección de correo electrónico real.

• $message-to('youremail@your_domain', 'Your Name'): No es necesario que $message-tolos valores $message-fromcoincidan. También puedes cambiar el $message-tovalor por otra dirección de correo electrónico en la que quieras recibir todas las consultas del formulario de contacto.

• subject('Your Website Contact Form');:También puedes cambiar el asunto del correo electrónico editando el mensaje dentro del subjectmétodo.

Nota : la dirección debe coincidir con el nombre de dominio que utilizó con SendGrid.$message-from('youremail@your_domain');

Una vez que hayas terminado estas ediciones, el siguiente será tu ContactController.phparchivo completo:

aplicación/Http/Controladores/ContactController.php

?phpnamespace AppHttpControllers;use IlluminateHttpRequest;use Mail;class ContactController extends Controller{    public function contact(){        return view('contact');    }    public function contactPost(Request $request){        $this-validate($request, [                        'name' = 'required',                        'email' = 'required|email',                        'comment' = 'required'                ]);        Mail::send('email', [                'name' = $request-get('name'),                'email' = $request-get('email'),                'comment' = $request-get('comment') ],                function ($message) {                        $message-from('youremail@your_domain');                        $message-to('youremail@your_domain', 'Your Name')                                -subject('Your Website Contact Form');        });        return back()-with('success', 'Thanks for contacting me, I will get back to you soon!');    }}

Guarde y salga de su archivo una vez que haya terminado sus ediciones.

Su controlador de contacto tiene dos métodos:

• contact():Este método devuelve la plantilla de vista de Blade de tu contacto, que contendrá tu página HTML que tiene el diseño HTML para tu formulario de contacto. Blade es el motor de plantillas que viene con Laravel. En tus vistas de plantilla de Blade, puedes agregar tu estructura HTML junto con el código PHP y la sintaxis de Blade.
• contactPost():Este método maneja todos los envíos de formularios de contacto, donde usted maneja la validación de entrada y envía los correos electrónicos.

La validación se realiza dentro del contactPost()método con el $this-validate()método . Dentro del método de validación, se especifica que name, emaily commentson obligatorios. De esa manera, los usuarios no podrán enviar consultas en formularios de contacto vacíos o incompletos. Para obtener más información sobre cómo funciona la validación de Laravel, consulte la documentación oficial de validación de Laravel.

Cuando la validación es exitosa, el Mail::send()método construye el cuerpo y el asunto del correo electrónico y luego envía el correo electrónico.

Finalmente, si el correo electrónico se envió correctamente, devuelve un mensaje de éxito que se muestra a sus usuarios.

Has configurado tu controlador de contactos y ahora puedes pasar a GETlas POSTrutas.

Paso 4: Creación de las rutas

Las rutas de Laravel te permiten crear URL optimizadas para SEO para tu aplicación. Al usar las rutas de Laravel, puedes dirigir las solicitudes de tu aplicación a controladores específicos, donde puedes manejar la lógica de tu aplicación.

Creará dos rutas en su routes/web.phparchivo para utilizar los métodos que configuró en el paso anterior.

Primero, creará una GETruta que se asigne a su contactmétodo en su ContactController. Este método solo devuelve su contactvista Blade. Ábrala routes/web.phpcon el siguiente comando:

nano routes/web.php

Añade la GETruta al final del archivo:

Nota : Si siguió los requisitos previos, el contenido de su archivo será diferente routes/web.php. Puede agregar sus rutas al final de este archivo siguiendo las instrucciones de este tutorial.

rutas/web.php

?phpuse IlluminateSupportFacadesRoute;/*|--------------------------------------------------------------------------| Web Routes|--------------------------------------------------------------------------|| Here is where you can register web routes for your application. These| routes are loaded by the RouteServiceProvider within a group which| contains the "web" middleware group. Now create something great!|*/Route::get('/contact', 'ContactController@contact')-name('contact');

Ahora agregará una POSTruta y la asignará a su contactPostmétodo, que manejará los envíos del formulario de contacto de su usuario:

rutas/web.php

?phpuse IlluminateSupportFacadesRoute;/*|--------------------------------------------------------------------------| Web Routes|--------------------------------------------------------------------------|| Here is where you can register web routes for your application. These| routes are loaded by the RouteServiceProvider within a group which| contains the "web" middleware group. Now create something great!|*/Route::get('/contact', 'ContactController@contact')-name('contact');Route::post('/contact', 'ContactController@contactPost')-name('contactPost');

Una vez que tengas tu controlador y ruta listos, puedes guardar y salir de tu archivo y luego proceder al siguiente paso donde prepararás tus vistas de Blade.

Paso 5: Creación de las vistas de Blade

En este paso, comenzarás creando una vista en la aplicación que contendrá tu formulario de contacto HTML. Tendrá tres campos de entrada:

• Campo de entrada con texto tipo para la dirección de correo electrónico del usuario
• Campo de entrada con tipo de texto para el nombre del usuario
• Área de texto para el comentario

Crea un archivo llamado resources/views/contact.blade.php:

nano resources/views/contact.blade.php

A continuación añade el siguiente contenido:

recursos/vistas/contacto.blade.php

!DOCTYPE htmlhtmlhead    meta charset="UTF-8"    meta name="viewport" content="width=device-width, initial-scale=1.0"    titleContact Form with Laravel and SendGrid/title    link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"/headbody    div        @if(session('success'))        div          {{ session('success') }}        /div        @endif        form method="POST" action="/contact"            @csrf            div                label for="email"Email address/label                input name="email" type="email" aria-describedby="emailHelp"                    placeholder="Enter your email"                span{{ $errors-first('email') }}/span            /div            div                label for="name"Name/label                input name="name" type="text" aria-describedby="name" placeholder="Your name"                span{{ $errors-first('name') }}/span            /div            div                label for="exampleInputPassword1"Comment/label                textarea name="comment" rows="3"/textarea                span{{ $errors-first('comment') }}/span            /div            button type="submit"Submit/button        /form    /div/body/html

Este es un formulario HTML con un POSTmétodo para la /contactruta. Cuando alguien complete el formulario de contacto, se procesará mediante su contactPostmétodo.

La linketiqueta dentro de la headetiqueta se utiliza para incluir Bootstrap. Estás utilizando algún estilo para el formulario HTML. Puedes cambiar el estilo del formulario para que coincida con el diseño de tu sitio web. Para obtener más información sobre cómo diseñar tu sitio web, puedes echar un vistazo a nuestra página de recursos CSS.

El formulario está envuelto en diferentes divetiquetas con clases de Bootstrap. Estás usando las divetiquetas para crear la estructura del formulario de contacto. Para obtener más información sobre cómo divfuncionan las etiquetas, consulta el tutorial Cómo usar un div, el elemento de división de contenido HTML.

Guarde y salga de este archivo.

La siguiente vista que crearás será tu vista de correo electrónico.

Abra el resources/views/email.blade.phparchivo:

nano resources/views/email.blade.php

A continuación añade el siguiente contenido:

recursos/vistas/email.blade.php

Inquiry from: {{ $name }}p Email: {{ $email }} /pp Message: {{ $comment }} /p

Este archivo contiene el contenido del correo electrónico que se enviará a los usuarios que completen el formulario de contacto. Guarde y salga del archivo.

Una vez que el estilo y las vistas estén completos, estará listo para continuar y probar el formulario de contacto.

Paso 6: Prueba del formulario de contacto

Para probar el formulario de contacto, visite a través de su navegador.http://your_domain/contact

Verás el formulario HTML de Bootstrap que creaste en el paso anterior.

Complete todos los campos obligatorios y presione el botón Enviar . Recibirá una notificación verde que le indicará que el mensaje se envió correctamente.

Puedes probar el formulario enviándolo sin completar ninguno de los campos. La validación que agregaste en tu controlador detectará esto y te informará que los campos no deben estar vacíos.

Por último, puedes revisar tu cuenta de correo electrónico y asegurarte de que has recibido el correo electrónico de prueba y puedes verlo en tu bandeja de entrada.

Conclusión

Ahora ha agregado exitosamente un formulario de contacto a su sitio web Laravel existente.

También puedes encontrar más información en la documentación oficial de Laravel.

Para asegurarse de que su formulario de contacto sea seguro, puede instalar un certificado SSL para su sitio web siguiendo nuestra guía sobre Cómo proteger Nginx con Let's Encrypt.

Para obtener más información sobre Laravel, consulte nuestra colección de recursos de Laravel.