<form id="contact_form" name="contact_form" method="post" novalidate action="#">
<div class="mb-5">
<label for="name_input" class="form-label">Name</label>
<input type="text" required minlength="2" maxlength="50" class="form-control" id="name_input" name="name" placeholder="Name">
<div class="invalid-feedback">Please provide your name</div>
</div>
<div class="mb-5">
<label for="email_addr" class="form-label">Email address</label>
<input type="email" required minlength="2" maxlength="50" class="form-control" id="email_addr" name="email"
placeholder="name@example.com">
<div class="invalid-feedback">Please enter your email address</div>
</div>
<div class="mb-5">
<label for="phone_input" class="form-label">Phone</label>
<input type="tel" required maxlength="50" class="form-control" id="phone_input" name="Phone"
placeholder="Phone">
<div class="invalid-feedback">Please Provide your phone number</div>
</div>
<div class="mb-5">
<label for="message" class="form-label">Message</label>
<textarea maxlength="2500" required class="form-control" id="message" name="message" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-primary px-4">Submit</button>
</form>
<script>
(() => {
'use strict'
const form = document.getElementById('contact_form');
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})()
</script>