Página de contacto en Laravel 5.7 usando Markdown

En esta guía vas a aprender como crear una página de contacto en laravel y que funcione. Vamos a poder enviar los datos ingresados en un formulario con laravel a nuestro correo.

También utilizaremos el formato Markdown en la plantilla de correo, así sabrás como utilizar esta característica que fue añadida hace varias versiones en Laravel.

Instalar laravel localmente

Utilizando Laravel installer, instalamos el framework laravel new contacto o mediante composer composer create-project --prefer-dist Laravel/Laravel contacto

Estoy asumiendo que ya tienes un entorno de desarrollo web local. Ya sea usando Laravel Valet, XAMP, MAMP, o cualquier otro. Si usas Mac y no tienes uno aún, te sugiero seguir está guía: Entorno de desarrollo web simple en MacOS

Instalando Laravel para nuestro formulario de contacto en laravel
Instalando Laravel 5.7

Ingresa a la carpeta contacto y corre composer install seguido de yarn install o npm install.

En este momento tenemos instalado Laravel 5.7 y ya podemos comenzar a escribir nuestro código, pero vamos a correr el siguiente comando para tener algo con qué trabajar sin tener que preocuparnos de escribir toda una plantilla de código.

php artisan make:auth
Generando scaffolding Auth
Generando scaffolding Auth

Por ultimo, antes de pasar a lo divertido con nuestra página de contacto en laravel, yo suelo utilizar npm run watch para compilar mis assets y además para que el navegador recargue cada que hay cambios. Para ello, es necesario añadir unas líneas de código a webpack.mix.js:

.browserSync({proxy: 'contacto.test'})


El archivo debe verse así:

Configuración de Webpack
Configuración de Webpack

Yo uso Valet como mi entorno de desarrollo web, y para poder ingresar a mi nuevo proyecto página de contacto en laravel (contacto) desde un navegador debo activar un servidor virtual. Estando dentro de la carpeta de nuestro proyecto, en mi caso contacto, corre el siguiente comando:
valet link

Creando un servidor virtual con Valet
Creando un servidor virtual con Valet

Si no sabes qué es Laravel Valet, te sugiero leer en el sitio oficial o puedes seguir esta guía donde explico un poco sobre su instalación.

Corre npm run dev para que se instalen algunas dependencias necesarias. Si da error, solo vuelve a correr el mismo comando nuevamente. Finalmente corre npm run watch

npm run watch
npm run watch

¡Está todo listo! Nuestra página de contacto en laravel está configurada para editarse y ver al instante los cambios en el navegador. A mi me sirve mucho porque no me gusta estar recargando el navegador cada que hago cambios. Llámame flojo, pero es algo que me ahorra mucho tiempo.

Aquí nuestra página

Página Laravel
Página Laravel

El controlador y una vista para tu código

Vamos a crear un controlador y un nuevo view (vista) donde vamos a procesar los datos del formulario de contacto, para poder enviar correos en Laravel.

Crear un controlador llamado ContactoController

Este controlador va a procesar los datos de nuestro formulario con laravel, el cual enviará los datos a nuestro correo. La página de contacto en laravel solo nos permitirá recibir los datos del formulario pero no va guardar nada en la base de datos, así que nos limitaremos al controlador sin adentrarnos a modelos.

Corre el siguiente comando en tu consola preferida:

php artisan make:controller PaginasController
Crear controlador ContactoController para la página de contacto en laravel
Crear controlador ContactoController

Edita el archivo routes/web.php y añade el siguiente código:

Route::get('/contacto', 'ContactoController@index')->name('contactarme');
Route::post('/enviar', 'ContactoController@procesar')->name('enviar');

Abre el archivo app/Http/Controllers/ContactoController.php y añade el siguiente código por ahora. Esto solo va mostrar el formulario de contacto, más adelatne añadiremos la función que lo va procesar:

    public function index()
    {
        return view('contacto');
    }
Código para mostrar la página de contacto en laravel
Código para mostrar la página de contacto en laravel

Formulario para enviar correo en laravel

Dentro de la carpeta resources/views crea una llamada contacto.blade.php e ingresa el siguiente código:

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <section class="seccion-contacto my-5">
                <div class="card">
                  <div class="card-header">
                    Contactarnos
                  </div>
                  <div class="card-body">
                    @if (session('estado'))
                        <div class="alert alert-success">
                            {{ session('estado') }}
                        </div>
                    @endif
                    <form method="POST" action="/enviar" class="contact-form {{ (Session::get('errors')) ? 'was-validated' : '' }}"  role="form" id="contact-form" class="">
                        @csrf
                        <div class="messages"></div> <!-- mensajes de error -->

                        <div class="controls">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="nombre">Tu nombre *</label>
                                        <input id="nombre" type="text" name="nombre" class="form-control" placeholder="Por favor ingresa tu nobre" required="required" data-error="El nombre es requerido.">

                                            @if($errors->has('nombre'))
                                                <div class="invalid-feedback">{{ $errors->first('nombre') }}</div>
                                            @endif

                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="email">Email *</label>
                                        <input id="email" type="text" name="email" class="form-control" placeholder="Por favor ingresa tu email" required="required" data-error="Email es requerido.">
                                        @if($errors->has('email'))
                                            <div class="invalid-feedback">{{ $errors->first('email') }}</div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="mensaje">Mensaje *</label>
                                        <textarea id="mensaje" name="mensaje" class="form-control" placeholder="Tu mensaje" rows="4" required="required" data-error="Por favor incluye un mensaje."></textarea>
                                        @if($errors->has('mensaje'))
                                            <div class="invalid-feedback">{{ $errors->first('mensaje') }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <input type="submit" class="btn btn-success btn-send" value="Enviar tu mensaje">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 mt-4">
                                    <p class="text-muted">
                                        <strong>*</strong> Campos requeridos.</p>
                                </div>
                            </div>
                        </div>
                    </form> <!-- fin - .contact-form -->
                </div> <!-- fin del componente card -->
            </section> <!-- fin - .seccion-contacto -->
        </div>
    </div>
</div>
@endsection

El código aquí nos va permitir mostrar nuestro formulario de contacto en laravel.

Formulario de contacto en Laravel
Página de contacto en Laravel

Esta parte del código va revisar si hay errores, y de haberlos va a aplicar una clase al formulario que nos permite mostrar los errores más abajo en cada campo.

<form method="POST" action="/enviar" class="contact-form {{ (Session::get('errors')) ? 'was-validated' : '' }}"  role="form" id="contact-form" class="">

Debajo de cada campo tenemos este snipet de código que nos permite mostrar cada error:

@if($errors->has('mensaje'))
<div class="invalid-feedback">{{ $errors->first('mensaje') }}</div>
@endif

Es bastante sencillo, no vamos a utilizar javascript ni nada que nos permita validar desde la parte del cliente en nuestra página, eso es un poco más avanzado y lo dejaré para otra guía de como utilizar Vue en un página de contacto en laravel.

Vamos a crear un Mail con una plantilla Markdown Para nuestra página de contacto en Laravel

Utiliza el siguiente comando para crear una clase Mailable junto con una plantilla Markdown:

php artisan make:mail Contacto --markdown=emails.contacto

Con este comando, hemos creado dos archivos en dos carpetas diferentes. El primero es resources/views/emails/contacto.blade.php. Abre este archivo y remplaza todo su contenido por el siguiente:

@component('mail::message')
# {{ $datos['nombre'] }}
email: {{ $datos['email'] }}
mensaje:
@component('mail::panel')
    {{ $datos['mensaje'] }}
@endcomponent

Gracias,<br>
{{ config('app.name') }}
@endcomponent

El otro archivo se encuentra en app/Mail/Contacto.php. Abre este archivo y remplaza todo su contenido por el siguiente código:

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Contracts\Queue\ShouldQueue;

class Contacto extends Mailable
{
    use Queueable, SerializesModels;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct($datos)
    {
        $this->datos = $datos;
    }
    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->markdown('emails.contacto')->from('tuemail@tusitio.com')
        ->subject('Alguien te quiere contactar')->with('datos', $this->datos);
    }
}

La clase Contacto  va a recibir los datos que le enviemos desde nuestro controlador. No olvides remplazar el correo falso por el correo desde donde se van a enviar los mensajes.

Actualizar el controlador ContactoController

Añadamos el código final a nuestro controlador. El que se va a encargar de procesar los datos y verificar que sean válidos.

Remplaza todo el código en App/Http/Controllers/ContactoController.php por lo siguiente.

<?php
namespace App\Http\Controllers;
// necesitamos usar esta clase para poder enviar correos.
use Mail; 
// y tambien la que hemos creado para enviarle los datos
use App\Mail\Contacto; 
use Illuminate\Http\Request;

class ContactoController extends Controller
{
    public function index() {
        return view('contacto');
    }

        /**
        * Validamos y enviamos los datos a la clase Contacto
        **/
    public function enviar(Request $request)
    {

        $request->validate([
            'nombre' => 'required|string|max:255',
            'email' => 'required|string|email|max:255',
            'mensaje'=>'required|string|min:50'
        ]);

        $forminput = [
            'nombre' => $request->input('nombre'),
            'email' => $request->input('email'),
            'mensaje' => $request->input('mensaje')
        ];

        /**
        * No olvides cambiar el correo aquí. 
        * Este es el correo donde vas a recibir 
        * los mensajes.
        **/
        Mail::to('email@sitio.com')->send(new Contacto($forminput));
         return redirect('contacto')->with('estado', '¡Mensaje enviado! Gracias por contactarnos.');
    }
}

Con este código enviamos el correo desde tu página de contacto de laravel directo a tu correo.
Primero recoge los datos y los valida. Segundo, recoge los datos en la variable $forminput y por último los envía a tu correo mediante la clase app/Mail/Contacto

También se encarga de regresar al usuario a la página de contacto junto con un mensaje de envío satisfactorio en la variable estado

Para probar que funcione, vamos a editar el archivo .env y vamos a cambiar MAIL_DRIVER=smtp por MAIL_DRIVER=log. Esto nos va permitir poder capturar el mensaje en el archivo storage/logs/laravel.log.

Errores en formulario de contacto de Laravel
Errores en página de contacto de Laravel

Guarda el archivo y ve a tu página de contacto de laravel y ingresa un mensaje que no valide, para que veas los erroes.

Envía un mensaje que si sea válido, y ve al archivo de log y verás ahí el mensaje.

Mensaje en el log de Laravel
Mensaje en el log de Laravel

Todo lo que hemos hecho en nuestra página de contacto en Laravel solo nos permite enviar mensajes, pero no nos permite guardarlos en la base de datos. Tampoco nos asegura que vayamos a recibir los correos, ya que depende de tu servidor.
Es probable que necesites instalar alguna librería mediante composer que te permita enviar los correos. La otra alternativa es que configures en el archivo .env un smtp de algún servicio que quieras utilizar para enviar los correos, como gmail o Mailgun.

Si tu aplicación no envía los emails correctamente, no dudes en dejarme un mensaje para ver como se te puede ayudar. También puedes utilizar el formulario de Contacto aquí en mi blog por si quieres localizarme más rápido.

Enviando mensaje en el formulario con Laravel

1 Comment

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *