Laravel livewire : Créer un formulaire de contact

Mis à jour il y a 1 an

Un tutoriel pour mettre en place un formulaire de contact pour envoyer un mail dans un projet Laravel Livewire.

Commenter

Offrir un café

Auteur

Wilo A.

Domaine

Développement web

Technologies

Laravel, PHP, HTML, Livewire

Sommaire

Introduction
Installer Laravel Livewire
Créer le composant du formulaire
La classe Mailable et la vue du mail
Envoyer le mail

Voir aussi Deux méthodes JavaScript pour afficher une image choisie au formulaire HTML d'upload de fichier avant de l'envoyer vers le serveur En savoir plus

Introduction

Le formulaire de contact est un système qui permet aux utilisateurs d'un site web d’envoyer des mails aux administrateurs du site et vice versa.

Dans ce tutoriel, nous allons voir comment utiliser le package Livewire pour mettre en place un formulaire d'envoi des mails dans un projet Laravel.

Installer Laravel Livewire

Le tutoriel créer un projet Laravel avec Laragon explique comment créer un nouveau projet Laravel à l'aide du logiciel Laragon.

Pour installer le package Laravel Livewire dans votre projet, exécutez la commande composer suivante :

composer require livewire/livewire

Une fois installé, collez les directives @livewireStyles et @livewireScripts dans une vue (template Blade) pour utiliser Livewire.

<html>
<head>
    ...
    @livewireStyles
</head>
<body>
    ...
    @livewireScripts
</body>
</html>

Créer le composant du formulaire

Nous allons décrire la vue, les attributs, les méthodes, les actions, etc. du formulaire de contact dans un composant Livewire, appelons-le « ContactForm ».

La commande artisan suivante permet de créer ce composant :

php artisan livewire:make ContactForm

L’exécution de cette commande crée deux fichiers :

app\Http\Livewire\ContactForm.php où nous allons placer la logique du composant, ses attributs (propriétés) et ses méthodes
resources\views\livewire\contact-form.blade.php où nous allons placer le formulaire HTML du composant

Décortiquons ces fichiers.

La classe ContactForm.php

Commençons par observer le code initial de la classe app\Http\Livewire\ContactForm.php avant de l'expliquer :

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ContactForm extends Component
{
    public $name, $email, $msg = "";

    public function submit () {
        // ....
    }
    
    public function render()
    {
        return view('livewire.contact-form');
    }
}

Attributs et data Binding

Un formulaire de contact comporte généralement trois champs :

« name » pour le nom de l’expéditeur
« email » pour l’adresse e-mail de l’expéditeur, adresse à laquelle nous répondrons
« message » pour le message à envoyer

Bien sûr, nous pouvons ajouter d'autres champs comme « object » pour le sujet du message et « attachment » pour joindre un fichier. Pour lier (data binding) les champs du formulaire HTML avec les propriétés du composant ContactForm, il faut les déclarer public dans la classe ContactForm.php :

public $name, $email, $msg = "";

La propriété $msg représente le champ « message ».

La méthode render()

Cette méthode retourne la vue contact-form.blade.php du composant :

public function render()
{
    return view('livewire.contact-form');
}

Hormis les propriétés et la méthode render() de la classe ContactForm.php, ajoutons la méthode submit() qui va nous permettre de traiter les informations du formulaire et d’envoyer le mail lorsque le formulaire est soumis au serveur. Nous allons y revenir après avoir décrit la vue du formulaire :

public function submit () {
    // ...
}

La vue contact-form.blade.php

Observons le code complet du formulaire HTML resources\views\livewire\contact-form.blade.php avant d'expliquer ses éléments clés. Les classes CSS « .mb-3 », « .form-label », « .form-control », « .is-invalid », … sont du framework CSS Bootstrap 5 :

<div>

    <form method="post" action="#" wire:submit.prevent="submit" >

        <div class="mb-3">

            <label for="name" class="form-label">Nom Complet</label>

            <input type="text" id="name" wire:model.defer="name" class="form-control @error('name') is-invalid @enderror" placeholder="Votre nom complet" >

            @error("name")
            <span class="text-danger">{{ $message }}</span>
            @enderror
            
        </div>

        <div class="mb-3">

            <label for="email" class="form-label">Adresse email</label>

            <input type="email" id="email" wire:model.defer="email" class="form-control @error('email') is-invalid @enderror" placeholder="Votre adresse email" >

            @error("email")
            <span class="text-danger">{{ $message }}</span>
            @enderror

        </div>

        <div class="mb-3">

            <label for="msg" class="form-label">Message</label>

            <textarea id="msg" wire:model.defer="msg" class="form-control @error('msg') is-invalid @enderror" rows="4" placeholder="Votre message ici" ></textarea>

            @error("msg")
            <span class="text-danger">{{ $message }}</span>
            @enderror

        </div>

        <button type="submit" class="btn btn-primary" >Envoyer le message</button>

    </form>

</div>

Lorsqu’on clique sur le bouton « Envoyer le message », l’action par défaut du formulaire est bloquée par wire:submit.prevent pour appeler la méthode submit() de la classe ContactForm :

<form method="post" action="#" wire:submit.prevent="submit" >

Sur chaque input, nous avons la directive wire:model.defer="$champ" pour lier l’input à la propriété $champ de la classe ContactForm :

<input type="text" id="name" wire:model.defer="name" class="form-control @error('name') is-invalid @enderror" placeholder="Votre nom complet" >

@error("name")
<span class="text-danger">{{ $message }}</span>
@enderror

La directive @error($champ) … @enderror permet de vérifier la présence d’erreur de validation sur le champ $champ pour ajouter la classe « .is-invalid » à l’input et afficher le message d’erreur $message.

La classe Mailable et la vue du mail

Pour envoyer le mail via le formulaire de contact, nous allons passer par la classe Mailable « ContactMail » que nous pouvons créer en exécutant la commande artisan suivante :

php artisan make:mail ContactMail

Cette commande crée le fichier app\Mail\ContactMail.php. Créons aussi la vue resources\views\mails\contact-mail.blade.php pour la présentation du message.

Dans la classe ContactMail.php, on déclare les propriétés public $name, $email et $msg qu'on hydrate via le contructeur, on renvoie ensuite le sujet du message subject("...") et la vue contact-mail.blade.php via la méthode build() :

<?php

namespace App\Mail;

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

class ContactMail extends Mailable
{
    use Queueable, SerializesModels;

    public $name, $email, $msg;

    // On hydrate $name, $email et $msg
    public function __construct($name, $email, $msg)
    {
        $this->name = $name;
        $this->email = $email;
        $this->msg = $msg;
    }

    public function build()
    {
        // On retourne le sujet et la  vue
        return $this->subject('Contact depuis mon site')->view('mails.contact-mail')
    }
}

Nous pouvons présenter les attributs $name, $email et $msg dans la vue resources\views\mails\contact-mail.blade.php comme ceci :

<div>
    <p><strong>Nom</strong> : {{ $name }}</p>
    <p><strong>Adresse email</strong> : {{ $email }}</p>
    <p><strong>Message</strong> :<br>{{ $msg }}</p>
</div>

La publication envoyer un mail via le serveur SMTP Google explique comment configurer le driver SMTP pour envoyer des mails dans une application Laravel.

Envoyer le mail

Avant les explications, observons le code complet du composant App\Http\Livewire\ContactForm.php :

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Mail;
use App\Mail\ContactMail;

class ContactForm extends Component
{

    public $name, $email, $msg = "";

    // Les règles de validation
    protected $rules = [
        'name' => 'bail|required',
        'email' => 'bail|required|email',
        'msg' => 'bail|required'
    ];

    public function submit () {
        // La validation suivant les règles
        $this->validate();

        // Envoie du mail
        Mail::to("[email protected]")->send(new ContactMail($this->name, $this->email, $this->msg));

        // On flash un message d'alert
        session()->flash("alert", [
            'type' => "success",
            'text' => "Message envoyé ! Merci."
        ]);

        // On réinitialise les champs
        $this->reset([ 'name', 'email', 'msg' ]);
    }
    
    public function render()
    {
        return view('livewire.contact-form');
    }
}

Immédiatement après avoir déclaré les attributs public $name, $email et $msg, nous définissons les règles de validation $rules pour les informaions des champs « name », « email » et « msg » :

protected $rules = [
    'name' => 'bail|required',
    'email' => 'bail|required|email',
    'msg' => 'bail|required'
];

Dans la méthode submit() qui décrit la logique de traitement des informations du formulaire de contact et l'envoie du mail, nous appelons la méthode validate() pour valider les données conformément aux règles $rules.

$this->validate();

Si la validation réussit, on envoie le mail à une adresse e-mail :

Mail::to("[email protected]")->send(new ContactMail($this->name, $this->email, $this->msg));

On flash un message de succès en session qu’on pourra afficher sur la vue :

session()->flash("alert", [
    'type' => "success",
    'text' => "Message envoyé ! Merci."
]);

On réinitialise les champs « name », « email » et « msg » :

$this->reset([ 'name', 'email', 'msg' ]);

Portez-vous bien ! 😎

#laravel #php #html #livewire

Cette publication vous a plu ?
Partagez-la avec vos ami(e)s sur les réseaux sociaux.

Wilo Ahadi, l'auteur

Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, infographiste et designer, ... J'aime partager mon expérience en formant sur la plateforme Akili School

Voir profil