ReusableForms v2.0 beta

Bootstrap contact form withCaptcha

A Bootstrap contact form with captcha to prevent spam submissions
Here is a reusable contact form built on top of Bootstrap framework. In addition to having the common fields that a contact form requires, the form also has a Captcha. Captcha is useful in preventing automated form submissions. The spam form submissions might result bad form submission notifications flooding your email inbox. We use Google recaptcha in this form. Recaptcha is quite useful in preventing bots.

Code


        <h1>Contact Form</h1>
        <form id="contact_form" name="contact_form" method="post" >
            <div class="mb-3">
              <label for="email_addr">Email address</label>
              <input type="email" required maxlength="50" class="form-control" 
              id="email_addr" name="email" placeholder="name@example.com">
            </div>
            <div class="mb-3">
              <label for="name_input">Name</label>
              <input type="text" required maxlength="50" class="form-control" 
              id="name_input" name="name" placeholder="Name">
            </div>            
            <div class="mb-3">
                <label for="phone_input">Phone</label>
                <input type="tel" required maxlength="50" class="form-control" 
                id="phone_input" name="Phone" placeholder="Phone">
              </div> 
            <div class="mb-3">
              <label for="message">Message</label>
              <textarea class="form-control" id="message" name="message" rows="3"></textarea>
            </div>
          <div class="my-4">
          <div class="g-recaptcha" data-sitekey="6LchOyEUAAAAAPo9l0WmIgFkGu5D6Gyq-MjsIHS1"></div>
          </div>
            <button type="submit" class="btn btn-primary px-4">Send</button>
          </form>
      

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.

Notes about reCaptcha

  • You have to register yourself at Recaptcha
  • Get a site key and update your site key in the data-sitekey="xxxxx" attribute
  • The domain name should match your website's domain name.
  • The secret key is used to verify the recaptcha server side