Antoine MASLINE-CAMERINI

Développeur web

Il y a 9 mois

Guide complet pour créer une page de contact sur Laravel

Introduction

Bienvenue dans ce tutoriel dédié à la création d'une page de contact sur Laravel. Dans ce guide, nous allons vous accompagner étape par étape pour ajouter une fonctionnalité essentielle à votre application web : une page permettant à vos utilisateurs de vous contacter facilement.

La mise en place d'une page de contact est cruciale pour renforcer l'interaction avec vos visiteurs et leur offrir un moyen direct de vous joindre. Dans ce tutoriel, vous apprendrez à configurer la route vers la page de contact, à créer le contrôleur nécessaire, à concevoir un formulaire de contact interactif, à valider les données soumises et à gérer l'envoi d'e-mails.

Que vous soyez débutant ou que vous recherchiez simplement une référence claire sur la manière d'intégrer une page de contact dans votre projet Laravel, ce guide est fait pour vous. Suivez chaque étape attentivement et vous serez en mesure d'ajouter cette fonctionnalité essentielle à votre application web avec aisance.

Sans plus tarder, plongeons dans le processus de création d'une page de contact efficace sur Laravel.

Étape 1 : Configuration de l'Environnement

Avant de commencer à crér notre page de contact sur Laravel, nous devons nous assurer que notre environnement de développement est correctement configuré. Cela inclut l'installation de Laravel si ce n'est pas déjà fait, ainsi que la création d'un nouveau projet Laravel.

Installation de Laravel

Si vous n'avez pas encore installé Laravel sur votre machine, vous pouvez le faire en utilisant Composer, qui est un gestionnaire de dépendances pour PHP. Ouvrez votre terminal et exécutez la commande suivante pour installer Laravel globalement :

composer global require laravel/installer

Une fois l'installation terminée, vous pouvez créer un nouveau projet Laravel en utilisant la commande laravel new

Création d'un Nouveau Projet Laravel

Si vous avez déjà Laravel installé sur votre machine, vous pouvez créer un nouveau projet en exécutant la commande ci-dessous. Assurez-vous simplement de naviguer vers le répertoire où vous souhaitez créer votre projet avant d'exécuter la commande.

laravel new nom-du-projet

Remplacez "nom-du-projet" par le nom que vous souhaitez donner à votre projet.

Une fois que vous avez créé avec succès votre nouveau projet Laravel, vous êtes prêt à passer à la prochaine étape de configuration pour créer notre page de contact.

Installation de Laravel Breeze

Laravel Breeze est un package offrant plusieurs avantages :

1. Simplicité

   : Breeze simplifie l'installation et la configuration de l'authentification dans Laravel. En quelques étapes simples, vous pouvez avoir un système d'authentification entièrement fonctionnel.

2. Templates prédéfinis

   : Avec Breeze, vous avez accès à des templates prédéfinis pour l'interface utilisateur, ce qui vous permet de commencer rapidement sans avoir à concevoir vos propres pages d'authentification.

3. Personnalisable

   : Bien que Breeze offre des templates prédéfinis, vous pouvez toujours les personnaliser selon les besoins de votre projet.

Pour l'installer, exécutez la commande suivante dans votre terminal à la racine de votre projet Laravel :

composer require laravel/breeze --dev

Après avoir installé Laravel Breeze, vous devez générer les fichiers d'authentification en exécutant la commande artisan :

php artisan breeze:install

Lorsque vous êtes invité à choisir un préconfiguré, assurez-vous de sélectionner "blade with alpine" en appuyant sur la touche correspondante à cette option. Vous pouvez également répondre aux autres questions selon vos préférences.

Cette commande va installer les dépendances NPM nécessaires et créer les vues et les routes d'authentification. Vous pouvez choisir entre le système d'authentification basique et le système d'authentification avec jetons d'authentification API. Sélectionnez l'option qui convient le mieux à votre projet.

Étape 2 : Création de la Route

Maintenant que notre projet Laravel est configuré, nous allons créer une route pour la page de contact dans le fichier de routes web. Cette route dirigera les utilisateurs vers la page de contact lorsque l'URL correspondante sera accédée.

Ajout des Routes :

Ouvrez le fichier routes/web.php de votre projet Laravel. Vous trouverez ce fichier dans le répertoire racine de votre projet.

Ajoutez la route suivante à la fin du fichier web.php :

use App\Http\Controllers\ContactController;

Route::get('/contact', [ContactController::class, 'create'])->name('contact.create');
Route::post('/contact', [ContactController::class, 'store'])->name('contact.store');

Explication des Routes :

• La première route déclare une route GET pour accéder à la page de contact. Elle pointe vers la méthode create du contrôleur ContactController.
• La deuxième route déclare une route POST pour soumettre le formulaire de contact. Elle pointe vers la méthode store du même contrôleur.

Les routes sont désormais configurées pour rediriger les utilisateurs vers la page de contact. Dans la prochaine étape, nous créerons le contrôleur correspondant pour gérer cette route et afficher la page de contact.

Étape 3 : Création du Contrôleur

Maintenant que nous avons configuré la route pour la page de contact, nous devons créer un contrôleur dédié pour gérer cette route et afficher la page de contact.

Utilisez la commande artisan suivante pour générer un nouveau contrôleur nommé ContactController :

php artisan make:controller ContactController

Cette commande générera un fichier ContactController.php dans le répertoire app/Http/Controllers.

Ouvrez le fichier ContactController.php nouvellement créé. Vous y trouverez une classe de contrôleur de base avec une méthode __invoke. Remplacez cette méthode par une méthode show qui sera responsable d'afficher la page de contact :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ContactController extends Controller
{
    /**
     * Affiche le formulaire de contact.
     *
     * @return \Illuminate\View\View
     */
    public function create()
    {
        return view('contact');
    }

    public function store(Request $request)
    {
        // Logique de validation et de traitement du formulaire ici

        // Redirection vers la page de contact avec un message de succès
        return redirect()->route('contact.create')->with('success', 'Your message has been sent successfully ! We will respond to you as soon as possible.');
    }
}

Dans cette méthode show, nous retournons simplement la vue nommée contact. Dans la prochaine étape, nous créerons cette vue pour afficher le formulaire de contact.

Étape 4 : Création du Formulaire de Contact

Nous allons maintenant créer le formulaire de contact dans notre vue Laravel en utilisant le composant x-guest-layout pour intégrer la mise en page de notre page de contact.

Création de la Vue :

Créez une nouvelle vue nommée contact.blade.php dans le répertoire resources/views. Vous pouvez utiliser la commande suivante pour la créer :

touch resources/views/contact.blade.php

Formulaire de Contact :

Insérez le code suivant dans votre fichier contact.blade.php :

<x-guest-layout>

<!-- Session Status -->
@if (session('status'))
<div class="font-medium text-sm text-green-600 mb-4">
    {{ session('status') }}
</div>
@endif

<div class="flex flex-col text-center w-full xl:mb-12 lg:mb-8 mb-4">
    <h2 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Ready to bring your website to life? Contact us!</h2>
    <p class="mx-auto leading-relaxed text-base">Do you have questions? Need information about our custom services? Look no further! Fill out the form below and let us turn your vision into stunning digital reality.</p>
</div>
<form method="post" id="contactForm" action="{{ route('contact.store') }}" class="">
    @csrf
    <!-- Email Address -->
    <div class="">
        <x-input-label for="email" :value="__('Email')" />
        <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
        <x-input-error :messages="$errors->get('email')" class="mt-2" />
    </div>

    <div class="flex flex-wrap mt-4">
        <!-- Name -->
        <div class="w-1/2 pr-2">
            <x-input-label for="name" :value="__('Name')" />
            <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus />
            <x-input-error class="mt-2" :messages="$errors->get('name')" />
        </div>

        <!-- Phone -->
        <div class="w-1/2 pl-2">
            <x-input-label for="phone">{{ __('Phone ') }} <small> {{ __('Optional') }}</small></x-input-label>
            <x-text-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required />
            <x-input-error :messages="$errors->get('phone')" class="mt-2" />
        </div>
    </div>

    <!-- Subject -->
    <div class="mt-4">
        <x-input-label for="subject" :value="__('Subject')" />
        <select id="subject" class="block mt-1 w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" name="subject">
            <option value="">Please select an option</option>
            <option value="Quote Request" {{ old('object') == "Quote Request" ? 'selected' : '' }}>{{ __('Quote Request') }}</option>
            <option value="Technical Support" {{ old('object') == "Technical Support" ? 'selected' : '' }}>{{ __('Technical Support') }}</option>
            <option value="Partnerships and Collaborations" {{ old('object') == "Partnerships and Collaborations" ? 'selected' : '' }}>{{ __('Partnerships and Collaborations') }}</option>
            <option value="Feedback and Suggestions" {{ old('object') == "Feedback and Suggestions" ? 'selected' : '' }}>{{ __('Feedback and Suggestions') }}</option>
            <option value="General Information" {{ old('object') == "General Information" ? 'selected' : '' }}>{{ __('General Information') }}</option>
        </select>
        <x-input-error :messages="$errors->get('subject')" class="mt-2" />
    </div>

    <!-- Message -->
    <div class="mt-4">
        <x-input-label for="message" :value="__('Message')" />
        <textarea id="message" name="message" maxlength="2000" class="block mt-1 w-full h-32 resize-none border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm">{{ old('message') }}</textarea>
        <x-input-error :messages="$errors->get('message')" class="mt-2" />
    </div>

    <!-- Remember Me -->
    <div class="block mt-4">
        <x-input-label :value="__('How did you hear about us?')" class="mb-1" />
        <label for="referral_source_social_media" class="inline-flex items-center me-3">
            <input id="referral_source_social_media" type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500" value="Social Media" name="referral_source[]" {{ in_array('Social Media', old('referral_source') ?? []) }}>
            <span class="ms-2 text-sm text-gray-600">{{ __('Social Media') }}</span>
        </label>
        <label for="referral_source_word_of_mouth" class="inline-flex items-center me-3">
            <input id="referral_source_word_of_mouth" type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500" value="Word of Mouth" name="referral_source[]" {{ in_array('Word of Mouth', old('referral_source') ?? []) }}>
            <span class="ms-2 text-sm text-gray-600">{{ __('Word of Mouth') }}</span>
        </label>
        <label for="referral_source_google" class="inline-flex items-center me-3">
            <input id="referral_source_google" type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500" value="Google" name="referral_source[]" {{ in_array('Google', old('referral_source') ?? []) }}>
            <span class="ms-2 text-sm text-gray-600">{{ __('Google') }}</span>
        </label>
        <label for="referral_source_other" class="inline-flex items-center me-3">
            <input id="referral_source_other" type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500" value="Other" name="referral_source[]" {{ in_array('Other', old('referral_source') ?? []) }}>
            <span class="ms-2 text-sm text-gray-600">{{ __('Other') }}</span>
        </label>
        <x-input-error :messages="$errors->get('referral_source')" class="mt-2" />
    </div>

    <div class="flex items-center justify-end mt-4">
        <x-primary-button class="ms-3">
            {{ __('Send') }}
        </x-primary-button>
    </div>
</form>
</x-guest-layout>

Explication du Formulaire :

• La mise en page est enveloppée dans le composant x-guest-layout, qui fournit une structure de mise en page de base.
• Les champs du formulaire sont construits en utilisant les composants Blade x-input-label, x-text-input, et x-input-error, ce qui permet de réutiliser le code et de maintenir la cohérence.
• Les erreurs de validation sont affichées à côté des champs correspondants, permettant aux utilisateurs de corriger leurs saisies facilement.

Ci-dessous, vous trouverez le rendu final de notre formulaire de contact intégré à votre application Laravel. Cette interface conviviale permettra à vos utilisateurs de vous contacter facilement et de fournir les informations nécessaires pour répondre à leurs demandes.

Votre formulaire de contact est maintenant prêt à être utilisé sur votre page Laravel. Il offre une interface conviviale pour que les utilisateurs puissent vous contacter et fournir des informations importantes pour répondre à leurs demandes.

Étape 5 : Validation du Formulaire

Dans cette étape, nous allons utiliser la classe ContactRequest pour valider les données soumises par le formulaire de contact.

Création de la Classe ContactRequest

Création de la Classe

Tout d'abord, ouvrez votre terminal et exécutez la commande suivante à la racine de votre projet Laravel pour créer la classe ContactRequest :

php artisan make:request ContactRequest

Implémentation des Règles de Validation :

Ouvrez le fichier app/Http/Requests/ContactRequest.php nouvellement créé. À l'intérieur de cette classe, implémentez la méthode rules() pour définir les règles de validation pour chaque champ du formulaire :

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class ContactRequest extends FormRequest
{
    public function authorize(): bool
    {
        return true;
    }

    public function rules(): array
    {
        return [
            'name' => ['required', 'string', 'max:63'],
            'email' => ['required', 'string', 'email', 'max:255'],
            'phone' => ['nullable', 'string', 'regex:/^(\+\d{1,3}[- ]?)?\d{10}$/'],
            'subject' => ['required', 'string', 'in:Quote Request,Technical Support,Partnerships and Collaborations,Feedback and Suggestions,General Information'],
            'message' => ['required', 'string', 'min:10', 'max:2000'],
            'referral_source' => ['required', 'array', 'min:1'],
            'referral_source.*' => ['in:Social Media,Word of Mouth,Google,Other'],
        ];
    }
}

Explication de la Classe ContactRequest :

• La méthode authorize() retourne toujours true, car la logique d'autorisation est gérée ailleurs dans l'application.
• La méthode rules() définit les règles de validation pour chaque champ du formulaire de contact. Vous pouvez ajuster ces règles selon les exigences de votre application.

Utilisation de la Classe ContactRequest dans le Contrôleur

Maintenant que la classe ContactRequest est créée, nous pouvons l'utiliser dans notre contrôleur ContactController pour valider les données du formulaire de contact.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests\ContactRequest; // Ajoutez le chemin complet vers la classe ContactRequest

class ContactController extends Controller
{
    public function store(ContactRequest $request)
    {
        // La validation est déjà gérée par la classe ContactRequest

        // Logique de traitement du formulaire ici

        // Redirection vers la page de contact avec un message de succès
        return redirect()->route('contact.create')->with('success', 'Your message has been sent successfully ! We will respond to you as soon as possible.');
    }
}

Personnalisation des Messages d'Erreur

Les messages d'erreur de validation peuvent être personnalisés dans la classe ContactRequest.

Personnalisation des Messages d'Erreur :

Pour personnaliser les messages d'erreur, ajoutez la méthode messages() à la classe ContactRequest :

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class ContactRequest extends FormRequest
{
    public function authorize(): bool
    {
        return true;
    }

    public function rules(): array
    {
        // Règles de validation
    }

    public function messages(): array
    {
        return [
            'name.required' => 'The name field is required.',
            'name.string' => 'The name must be a string.',
            'name.max' => 'The name may not be greater than 63 characters.',
            'email.required' => 'The email field is required.',
            'email.string' => 'The email must be a string.',
            'email.email' => 'The email must be a valid email address.',
            'email.max' => 'The email may not be greater than 255 characters.',
            'phone.regex' => 'The phone must be a valid phone number.',
            'subject.required' => 'The subject field is required.',
            'subject.string' => 'The subject must be a string.',
            'subject.in' => 'The selected subject is invalid.',
            'message.required' => 'The message field is required.',
            'message.string' => 'The message must be a string.',
            'message.min' => 'The message must be at least 10 characters.',
            'message.max' => 'The message may not be greater than 2000 characters.',
            'referral_source.required' => 'The referral source field is required.',
            'referral_source.array' => 'The referral source must be an array.',
            'referral_source.min' => 'Please select at least one referral source.',
            'referral_source.*.in' => 'The selected referral source is invalid.',
        ];
    }
}
    

Explication des Messages d'Erreur Personnalisés :

Vous pouvez personnaliser les messages d'erreur pour chaque règle de validation en fonction des besoins de votre application.

Les messages d'erreur personnalisés sont associés à chaque champ du formulaire et fournissent des indications précises en cas d'erreurs de saisie.

En utilisant la classe ContactRequest pour valider les données du formulaire et en personnalisant les messages d'erreur, vous pouvez garantir que les données soumises par les utilisateurs sont valides et fournir une expérience utilisateur améliorée en cas d'erreurs de saisie.

Étape 6 : Envoi d'Emails

Dans cette étape, nous allons configurer l'envoi d'e-mails pour recevoir les messages soumis par les utilisateurs via le formulaire de contact.

Configuration SMTP :

Assurez-vous que votre application Laravel est configurée pour utiliser un serveur SMTP valide. Vous pouvez configurer les détails du serveur SMTP dans le fichier .env de votre projet Laravel.

MAIL_MAILER=smtp
MAIL_HOST=your_smtp_host
MAIL_PORT=your_smtp_port
MAIL_USERNAME=your_smtp_username
MAIL_PASSWORD=your_smtp_password
MAIL_ENCRYPTION=your_smtp_encryption
MAIL_FROM_ADDRESS=your_from_email_address
MAIL_FROM_NAME="${APP_NAME}"

Assurez-vous de remplacer les valeurs your_smtp_host, your_smtp_port, your_smtp_username, your_smtp_password, your_smtp_encryption, et your_from_email_address par les détails de votre serveur SMTP (voir votre hébergeur).

Configuration de la Route d'E-mail :

Ouvrez le fichier app/Http/Requests/ContactRequest.php. Dans la méthode store, après le traitement réussi du formulaire, ajoutez le code pour envoyer un e-mail de notification :

use Illuminate\Support\Facades\Mail;
use App\Mail\ContactFormSubmitted;

public function submitContactForm(ContactRequest $request)
{
    // Validation des données du formulaire

    // Logique de traitement du formulaire

    // Envoi d'un e-mail de notification
    Mail::to('votre_email@example.com')->send(new ContactFormSubmitted($request->all()));

    // Redirection vers la page de contact avec un message de succès
    return redirect()->route('contact.form')->with('success', 'Votre message a été envoyé avec succès ! Nous vous contacterons bientôt.');
}

Création de la Mailable :

Créez une Mailable pour le formulaire de contact en utilisant la commande Artisan :

php artisan make:mail ContactFormSubmitted --markdown=emails.contact_form_submitted

Cela créera un nouveau fichier ContactFormSubmitted.php dans le répertoire app/Mail et un fichier contact_form_submitted.blade.php dans le répertoire resources/views/emails. Vous pouvez personnaliser le contenu de cet e-mail en modifiant la méthode build() de la classe ContactFormSubmitted.php.

Personnalisation de l'E-mail :

Class : ContactFormSubmitted.php

Ouvrez le fichier app/Mail/ContactFormSubmitted.php et mettez à jour la méthode build() pour personnaliser le contenu de l'e-mail :

php
namespace App\Mail;

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

class ContactFormSubmitted extends Mailable
{
    use Queueable, SerializesModels;

    public $formData;

    /**
     * Create a new message instance.
     *
     * @param array $formData
     * @return void
     */
    public function __construct($formData)
    {
        $this->formData = $formData;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->subject('New Contact Form Submission')
                    ->view('emails.contact_form_submitted')
                    ->with([
                        'formData' => $this->formData,
                    ]);
    }
}

Créez une vue pour l'e-mail de notification dans le répertoire resources/views/emails avec le nom contact_form_submitted.blade.php. Vous pouvez utiliser HTML pour personnaliser le contenu de cet e-mail.

View : emails.contact_form_submitted

Ouvrez le fichier resources/views/emails/contact_form_submitted.blade.php nouvellement créé. Vous pouvez personnaliser le contenu de cet e-mail en utilisant HTML et en incluant les données du formulaire que vous avez passées via la classe ContactFormSubmitted.

Voici un exemple de contenu pour cette vue :

@component('mail::message')
# New Contact Form Submission

You have received a new contact form submission with the following details:

**Name:** >{{ $formData['name'] }}<

**Email:** >{{ $formData['email'] }}<

**Phone:** >{{ $formData['phone'] }}<

**Subject:** >{{ $formData['subject'] }}<

**Message:**
>{{ $formData['message'] }}<

**Referral Source:** >{{ implode(', ', $formData['referral_source']) }}<

Thanks,

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

Dans cet exemple, nous utilisons des variables Blade (>{{ $formData['name'] }}<, etc.) pour inclure les données du formulaire dans le contenu de l'e-mail.

Une fois que vous avez personnalisé le contenu de la vue emails.contact_form_submitted, cette vue sera utilisée chaque fois qu'un e-mail de notification est envoyé après la soumission du formulaire de contact.

Test de l'Envoi d'E-mails :

Testez l'envoi d'e-mails en soumettant un message via le formulaire de contact et vérifiez si vous recevez l'e-mail de notification à l'adresse spécifiée.

En configurant l'envoi d'e-mails, vous pouvez recevoir les messages soumis par les utilisateurs via le formulaire de contact directement dans votre boîte de réception, ce qui vous permet de répondre rapidement et efficacement aux demandes des utilisateurs.

Conclusion

Dans ce tutoriel, nous avons appris à créer une page de contact fonctionnelle dans une application Laravel. Voici un récapitulatif des principales étapes que nous avons suivies :

• Mise en Place du Projet : Nous avons créé un nouveau projet Laravel et configuré l'environnement de développement.
• Création de la Vue de la Page de Contact : Nous avons conçu la vue de la page de contact en utilisant Blade et HTML pour afficher un formulaire de contact.
• Mise en Place des Routes et des Contrôleurs : Nous avons défini les routes et les contrôleurs nécessaires pour gérer la soumission du formulaire de contact.
• Validation des Données du Formulaire : Nous avons utilisé les outils de validation de Laravel pour valider les données du formulaire et assurer leur intégrité.
• Envoi d'E-mails : Nous avons configuré l'envoi d'e-mails pour recevoir les messages soumis par les utilisateurs via le formulaire de contact. Nous avons également personnalisé le contenu de l'e-mail pour inclure les données du formulaire.

En suivant ces étapes, vous avez appris à créer une page de contact entièrement fonctionnelle dans votre application Laravel. Vous pouvez maintenant l'intégrer dans votre projet et permettre aux utilisateurs de vous contacter facilement.

N'oubliez pas d'adapter et d'ajuster ces étapes en fonction des besoins spécifiques de votre application. Vous pouvez également explorer d'autres fonctionnalités avancées de Laravel pour améliorer encore davantage votre page de contact.