Contact form in bootstrap

A detailed, contact form in bootstrap 5 - with email and phone fields

Tagged: bootstrapbootstrap 5contact form

Bootstrap is a front-end web development framework that provides a number of ready-made, reusable components that can be used to build websites and web applications. Bootstrap is free and open-source, and can be used to create responsive, mobile-first websites. Here is a contact form using Bootstrap 5. The form has email, phone fields in addition to first name and last name. The form can be used in any website for the users to reach out to you.

Code


        <h1>Contact Form</h1>
<form id="contact_form" name="contact_form" method="post">
    <div class="mb-5 row">
        <div class="col">
            <label>First Name</label>
            <input type="text" required maxlength="50" class="form-control" id="first_name" name="first_name">
        </div>
        <div class="col">
            <label>Last Name</label>
            <input type="text" required maxlength="50" class="form-control" id="last_name" name="last_name">
        </div>
    </div>
    <div class="mb-5 row">
        <div class="col">
            <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="col">
            <label for="phone_input">Phone</label>
            <input type="tel" required maxlength="50" class="form-control" id="phone_input" name="Phone"
                placeholder="Phone">
        </div>
    </div>
    <div class="mb-5">
        <label for="message">Message</label>
        <textarea class="form-control" id="message" name="message" rows="5"></textarea>
    </div>
    <button type="submit" class="btn btn-primary px-4 btn-lg">Post</button>
</form>

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

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

Similar forms

Bootstrap 5 form template

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