ReusableForms v2.0 beta

Bootstrap 5 form template

A generic contact form using Bootstrap framework
Tagged: bootstrapcontact formbootstrap 5
This is a code for a contact form that you can use on your website. The code makes use of Bootstrap 5 CSS framework. It has fields for a message, email, and name. You can add more fields if you need to. The form uses standard HTML5 field validations. You can use a standard form backend like Ratufa.io or host your own PHP backend (advanced).

Code


        <div class="m-1">
<h1>Contact Us</h1>
<div class="fs-6 fw-light mb-2">Post your message below. We will get back to you ASAP</div>
<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 class="d-grid">
    <button type="submit" class="btn btn-success">Post</button>
    </div>
</form>
</div>

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.

Similar forms

HTML5 popup contact form
PHP contact form with captcha
Free feedback form HTML code for websites
A reusable html5 contact form template
Bootstrap contact form withCaptcha
Tailwind contact form template
Tailwind CSS contact form
Working bootstrap contact form with php
Bootstrap contact form template with validation
jQuery contact form with validation