ReusableForms v2.0 beta

Working bootstrap contact form with php

A simple but useful contact form using Bootstrap framework
A simple but quite useful contact form using Bootstrap framework. You can easily copy and paste the code to your HTML web page and start using immediately. The form has a message, email and name fields. Feel free to add more fields as required. Also, the form makes use of standard HTML5 field validations. You can either use a standard form backend like Ratufa.io or host your own PHP backend (advanced). See the below for instructions.

Code


        <h1>Contact Form</h1>
<form id="contact_form" name="contact_form" method="post">
    <div class="mb-5">
        <label for="message">Message</label>
        <textarea class="form-control" id="message" name="message" rows="5"></textarea>
    </div>
    <div class="mb-5 row">
        <div class="col">
            <label>Your Name:</label>
            <input type="text" required maxlength="50" class="form-control" id="name" name="name">
        </div>
        <div class="col">
            <label for="email_addr">Your Email:</label>
            <input type="email" required maxlength="50" class="form-control" id="email_addr" name="email"
                placeholder="name@example.com">
        </div>
    </div>
    <div>
    <button type="submit" class="btn btn-primary px-4 btn-lg">Post</button>
    </div>
</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.

Self-hosted PHP backend

Use this method only if you are familiar with server settings and customizing PHP code. Simfatic\FormHandler is a generic Form handling script that can do most of the form processing tasks out of the box.
  • git clone the project to your local folder
  • Run composer update
  • The examples folder in the repository contains some sample form handler scripts. Customize the handler.php script to your needs.
  • For example, add your email addresses, update SMTP settings.
  • handler.js contains sample Javascript to handle the form submission. customize handler.js to point to the correct URL
  • Upload the updated formHandler to your website(you have to upload the whole folder)
  • Copy the HTML form code to your web page. add the handler.js file in your HTML code
  • Test your form!