<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>
To seamlessly integrate the form code from ReusableForms.com into your web page, follow these simple steps:
The form code provided above is for the client side only. To fully benefit from the form's features, you'll need a back-end form processor. Ratufa is one such service, and integrating with it is straightforward. Watch the video demo for a step-by-step example.
To receive email notifications upon form submissions, store submission records, and search through them later, you'll need a back-end processor. Here's how to set one up: