» First and foremost, you need to build Contact Us form based on HTML language as below:
<form id="contactform" name="contactform">
<div class="row">
<div class="col-md-12">
<input name="name" id="name" type="text" placeholder="Name" />
</div>
<div class="col-md-6">
<input name="email" id="email" type="email" placeholder="Email" />
</div>
<div class="col-md-6">
<input name="subject" id="subject" type="text" placeholder="Subject" />
</div>
<div class="col-md-12">
<textarea name="comments" id="comments" cols="40" rows="2" placeholder="Description"></textarea>
</div>
</div>
<input type="submit" class="button" value="Submit" />
</form>
» After that, move to JavaScript and update logics for Contact Us form.
<script>
const form = $('#contactform');
const name = $('[name="name"]');
const subject = $('[name="subject"]');
const email = $('[name="email"]');
const comments = $('[name="comments"]');
jQuery.validator.addMethod("validateEmail", function (value) {
if (/^([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5})$/.test(value)) {
email.css({
'border' : '1px solid transparent',
'box-shadow': '0px 0px 0px 2px rgb(0 0 0 / 10%), 0px 1px 10px rgb(0 0 0 / 5%)'
});
return true;
} else {
email.css({
'border' : '1px solid red',
'box-shadow': 'none'
});
return false;
}
}, "Please enter a valid email address");
jQuery.validator.addMethod("validateName", function (value) {
if (/^[^]+$/.test(value)) {
name.css({
'border' : '1px solid transparent',
'box-shadow': '0px 0px 0px 2px rgb(0 0 0 / 10%), 0px 1px 10px rgb(0 0 0 / 5%)'
});
return true;
} else {
name.css({
'border' : '1px solid red',
'box-shadow': 'none'
});
return false;
}
}, "Please fill in this field");
jQuery.validator.addMethod("validateSub", function (value) {
if (/^[^]+$/.test(value)) {
subject.css({
'border' : '1px solid transparent',
'box-shadow': '0px 0px 0px 2px rgb(0 0 0 / 10%), 0px 1px 10px rgb(0 0 0 / 5%)'
});
return true;
} else {
subject.css({
'border' : '1px solid red',
'box-shadow': 'none'
});
return false;
}
}, "Please fill in this field");
jQuery.validator.addMethod("validateMsg", function (value) {
if (/^[^]+$/.test(value)) {
comments.css({
'border' : '1px solid transparent',
'box-shadow': '0px 0px 0px 2px rgb(0 0 0 / 10%), 0px 1px 10px rgb(0 0 0 / 5%)'
});
return true;
} else {
comments.css({
'border' : '1px solid red',
'box-shadow': 'none'
});
return false;
}
}, "Please fill in this field");
form.validate(
{
rules: {
name: {
validateName: true
},
email: {
validateEmail: true
},
subject: {
validateSub: true
},
comments: {
validateMsg: true
}
}
});
form.on('submit', function (event) {
if (!$(this).valid()) return;
const formData = new FormData(this);
event.preventDefault();
$.ajax({
url: '/api/contacts',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
method: 'POST',
dataType: 'json',
data: formData,
processData: false,
contentType: false,
beforeSend: function() {
}
}).done(function (data) {
$('label.error').remove();
if (0 === data.error.code) {
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
Toast.fire({
type: 'success',
title: 'Thank you for contacting us!'
})
$('#name').val('');
$('#email').val('');
$('#subject').val('');
$('#comments').val('');
}
}).fail(function (error) {
let errors = $.parseJSON(error.responseText);
$('label.error').remove();
$.each(errors, function (key, value) {
let el = $('#' + key);
if(!el.next().is('label')) {
el.parent().append('<label class="error">'+value[0]+'</label>');
}
});
});
});
</script>
Note: if you use Laravel framework as backend layer and ContactUsController as below:
public function store(Request $request) {
$request->merge([
'created_at' => $this->freshTimestamp(),
'updated_at' => $this->freshTimestamp()
]);
$credentials = $request->only('name', 'email', 'subject');
$rules = [
'name' => 'required',
'email' => 'regex:/^([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5})$/',
'subject' => 'required',
];
$customMessages = [
'name.required' => Lang::get('strings.error.name'),
'email.regex' => Lang::get('strings.error.email'),
'subject.required' => Lang::get('strings.error.message')
];
$validator = Validator::make($credentials, $rules, $customMessages);
if ($validator->fails()) {
return response()->json($validator->errors(), 422);
} else {
$this->repository->create($request->all());
return ([
'error' => [
'code' => 0,
'message' => "Success"
]
]);
}
}