Contact Form

This snippet is a boilerplate for simple contact forms.

We assume you have a contact-requests table to save the requests, and that you have contact-request and contact-responder mails.

<form wire:submit.prevent="submit" class="space-y-4">
    @if ($submitted)
        <div class="flex items-center space-x-2 bg-green-50 text-green-500 border border-green-500 px-5 py-4 rounded-md">
            {{ icon('check') }}
            <div>Your message has been sent.</div>
        </div>
    @endif

    <div>
        <label for="name" class="block mb-1">Name</label>
        <input type="text" wire:model.defer="name" id="name" class="form-input">
        @error('name')
            <div class="text-sm text-red-500 mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div>
        <label for="email" class="block mb-1">Email</label>
        <input type="email" wire:model.defer="email" id="email" class="form-input">
        @error('email')
            <div class="text-sm text-red-500 mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div>
        <label for="message" class="block mb-1">Message</label>
        <textarea wire:model.defer="message" id="message" class="form-textarea"></textarea>
        @error('message')
            <div class="text-sm text-red-500 mt-1">{{ $message }}</div>
        @enderror
    </div>

    <button type="submit">Submit</button>
</form>

<?php

class ContactForm extends Component
{
    public $submitted = false;
    public $name = '';
    public $email = '';
    public $message = '';

    protected $rules = [
        'name' => 'required|max:255',
        'email' => 'required|email|max:255',
        'message' => 'required',
    ];

    public function submit()
    {
        // Validate the entered data => returns an array ['name' => ..., 'email' => ..., 'message' => ...]
        $data = $this->validate();

        // Create entry in our table
        table('contact-requests')->create($data);

        // Send mail to website owner
        mail('contact-request')
            ->to('info@devisto.com')
            ->replyTo($this->email)
            ->parameters($data)
            ->send();

        // Send mail to visitor
        mail('contact-responder')
            ->to($this->email)
            ->send();

        // Reset the form
        $this->reset();

        // Make sure the success message is shown
        $this->submitted = true;
    }
}
Previous topic
← Map
Next topic
Slider →