ReusableForms v2.0 beta

Bootstrap contact form template with validation

Bootstrap contact form with HTML5 validations and styling to show when validations fail
Validations are useful for directing the users to post accurate information in a web form . Here is a sample HTML form (uses Bootstrap 5 for the styling) that has validations. The validations are specified using HTML5 standard validation attributes such as required and maxlength. When the form is submitted, the browser does the validations. Then we use Javascript code to check whether the form is valid or not and apply was-validated class to the form. This causes the Bootstrap style to change the style of the invalid fields. See this link about Bootstrap form validation styles: https://getbootstrap.com/docs/5.2/forms/validation/

Code


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


      

How to Use

Simply copy the code to your web page HTML.

Back-end processing and record keeping

You may want to get email notifications when a form is submitted. Moreover, you may want to store the form submission records, search the records later. All these requires a back-end processor. Here is how to add a backend to your form:

Using Ratufa backend

  • Go to ratufa.io
  • Press the "Connect your form" button
  • Code to connect your form is displayed. Copy the code to the bottom of the HTML code above
  • Test your form. Ratufa will display the submissions - to the right side
  • Copy the combined code to your web page
Ratufa will store your form submissions and you can configure to send email notifications. You can search and download the records whenever required.