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>


      

Integrating the Code with Your Web Page

To seamlessly integrate the form code from ReusableForms.com into your web page, follow these simple steps:

  • The form code is plain HTML. Click the copy button located above the code and paste it into your web page's source code.
  • If the form uses a CSS framework like Bootstrap or TailwindCSS, ensure that your web page or website project has the necessary libraries linked. Consult the respective library documentation for guidance.

Setting up Back-end Processing and Record Keeping

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:

Using Ratufa Backend

  1. Go to Ratufa.io.
  2. Click the "Connect your form" button.
  3. Copy the provided code and paste it at the bottom of the HTML form code above
  4. You can test the form within ReusableForms before copying it to your website. Ratufa.io will show submissions on the right side.
  5. Copy the combined code to your web page.
  6. Ratufa will store your form submissions, and you can configure email notifications. You can search and download records whenever needed.