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;
}
}