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>

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

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

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

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


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

        // Send mail to website owner

        // Send mail to visitor

        // Reset the form

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