I’ve created different contact form templates and tutorials in the past, for example: Bootstrap Contact Forms: 2 Free Templates, Bootstrap Contact Form: How to Add a Dropdown (Select) Field, etc.
Today, I’ve designed another similar form, this time using the latest Bootstrap 5 framework.
The form is made by using Bootstrap’s ready-to-use classes and components as much as possible, and for its validation and sending emails, I’ve used AJAX, jQuery, and PHP.
Below you can see the live preview, the code, and download the template. Hope you find it useful!
Want to Save this Article?
Image Previews
Contact Form
Validation
Message Successfully Sent
The HTML Code (only the contact form)
<!-- Contact form -->
<div class="py-5 azm-background-444 text-white" id="contact">
<div class="container">
<div class="row">
<div class="col">
<h2 class="display-2 text-uppercase">Contact Us<span class="azm-color-888">../</span></h2>
<p class="lead">For every question, information or just to say "Hi", here is a contact form you can use to send us an email:</p>
</div>
</div>
<div class="row">
<div class="col-md-7 mt-5 contact-email">
<h3 class="text-uppercase">Email Us</h3>
<form action="assets/contact-1.php" method="post">
<div class="mt-3 mb-3">
<label for="email" class="form-label azm-font-size-1-15 azm-color-ccc">Email address</label>
<input type="text" class="form-control" id="email" name="email" placeholder="[email protected]">
<div class="invalid-feedback px-2 text-white azm-background-42bfc2">Invalid email!</div>
</div>
<div class="mb-3">
<label for="subject" class="form-label azm-font-size-1-15 azm-color-ccc">Subject</label>
<input type="text" class="form-control" id="subject" name="subject" placeholder="subject...">
<div class="invalid-feedback px-2 text-white azm-background-42bfc2">Empty subject!</div>
</div>
<div class="mb-3">
<label for="message" class="form-label azm-font-size-1-15 azm-color-ccc">Message</label>
<textarea class="form-control" id="message" name="message" placeholder="your message..." rows="3"></textarea>
<div class="invalid-feedback px-2 text-white azm-background-42bfc2">Empty message!</div>
</div>
<button type="submit" class="btn btn-primary btn-lg azm-btn-primary"><i class="bi bi-envelope" aria-hidden="true"></i> Send It</button>
</form>
</div>
<div class="col-md-5 my-5 d-none d-md-block contact-icon azm-color-666 text-center">
<i class="bi bi-envelope-fill" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
The CSS Code
/* Buttons - restyling Bootstrap buttons */
.btn.azm-btn-primary { background-color: #42bfc2; border-color: #42bfc2; }
.btn.azm-btn-primary:hover { background-color: #019299; border-color: #019299; }
.btn.azm-btn-primary:active { background-color: #019299; border-color: #019299; }
.btn.azm-btn-primary:focus { background-color: #019299; border-color: #019299; color: #fff; }
.btn.azm-btn-primary:active:focus { background-color: #019299; border-color: #019299; color: #fff; }
.btn.azm-btn-primary:focus-visible {
background-color: #019299;
border-color: #019299;
box-shadow: 0 0 0 0.25rem rgba(66, 191, 194, .5);
}
/* Custom utility classes */
.azm-color-444 { color: #444; }
.azm-color-666 { color: #666; }
.azm-color-888 { color: #888; }
.azm-color-42bfc2 { color: #42bfc2; }
.azm-color-ccc { color: #ccc; }
.azm-grey { color: #aaa; }
.azm-font-size-1-15 { font-size: 1.15rem; }
.azm-line-height-2-5 { line-height: 2.5rem; }
.azm-border-dashed { border-bottom: 1px dashed; }
.azm-grey-background { background-color: #f8f8f8; }
.azm-background-3d3d3d { background-color: #3d3d3d; }
.azm-background-444 { background-color: #444; }
.azm-background-42bfc2 { background-color: #42bfc2; }
/* Contact form */
.form-control,
.form-control:focus {
background-color: #444;
border-color: #888;
color: #fff;
}
.form-control:focus {
border-color: #42bfc2;
box-shadow: 0 0 0 0.25rem rgba(66, 191, 194, .5);
}
.form-control::placeholder { color: #888; }
.contact-icon {
font-size: 15rem;
line-height: 1;
}
.contact-icon i { border-bottom: 5px dashed; }
The jQuery/JavaScript + AJAX Validation
jQuery(document).ready(function(){
/*
Contact form
*/
$('.contact-email .form-control').on('focus', function() {
$(this).next('.invalid-feedback').fadeOut();
});
$('.contact-email form').on('submit', function(e) {
e.preventDefault();
$('.contact-email .invalid-feedback').fadeOut();
var form = $(this);
var postdata = $(this).serialize();
$.ajax({
method: 'POST',
url: 'assets/contact-1.php',
data: postdata,
dataType: 'json',
}).done(function(response) {
if(response.emailMessage != '') {
form.find('#email').next('.invalid-feedback').fadeIn();
}
if(response.subjectMessage != '') {
form.find('#subject').next('.invalid-feedback').fadeIn();
}
if(response.messageMessage != '') {
form.find('#message').next('.invalid-feedback').fadeIn();
}
if(response.emailMessage == '' && response.subjectMessage == '' && response.messageMessage == '') {
form.fadeOut('fast', function() {
$('.contact-email').append('<p class="mt-3 azm-font-size-1-15 azm-color-ccc">Thanks for contacting us! We will get back to you very soon.</p>');
});
}
});
});
});
The PHP Code: Validation + Sending Emails
<?php
// Email address verification
function isEmail($email) {
return filter_var($email, FILTER_VALIDATE_EMAIL);
}
if($_POST) {
// Enter the email where you want to receive the message
$emailTo = '[email protected]';
$clientEmail = addslashes(trim($_POST['email']));
$subject = addslashes(trim($_POST['subject']));
$message = addslashes(trim($_POST['message']));
$array = array('emailMessage' => '', 'subjectMessage' => '', 'messageMessage' => '');
if(!isEmail($clientEmail)) {
$array['emailMessage'] = 'Invalid email!';
}
if($subject == '') {
$array['subjectMessage'] = 'Empty subject!';
}
if($message == '') {
$array['messageMessage'] = 'Empty message!';
}
if(isEmail($clientEmail) && $subject != '' && $message != '') {
// Send email
$message = "Message from: " . $clientEmail . "\r\n\n" . $message;
// uncomment the line below to enable sending emails
// mail($emailTo, $subject . " (AZMIND template)", $message);
}
echo json_encode($array);
}
?>
Demo and Download
DOWNLOAD: not available, contact me for the template.