Posted by João Martins on 13 Apr 2026

Bootstrap Contact Form to Google Sheets

Create a polished Bootstrap 5 contact form that saves responses to Google Sheets


Want a professional-looking contact form without spending hours on CSS? Bootstrap 5 gives you beautiful form styling out of the box. Combined with Form2Sheet, you get a production-ready form that sends data to Google Sheets in minutes.

In this tutorial, I will guide you through the process of building a Bootstrap 5 contact form that sends submissions directly to Google Sheets using Form2Sheet.

Step 1: Prerequisites

The first step in integrating Form2Sheet is to subscribe either monthly or yearly.
Then, go to https://form2sheet.com and create your first spreadsheet.

Screenshot
(Email received after creating a spreadsheet)

Step 2: Building Your Bootstrap Contact Form

Bootstrap 5 provides beautiful form components out of the box. Simply include the Bootstrap CSS CDN and use its form classes for a professional look. Make sure to replace the $API_URL with the one you received in your email (check your spam folder as well).

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container mt-5" style="max-width: 600px;">
  <form action="" method="">
    <div class="mb-3">
      <label class="form-label">Name</label>
      <input type="text" class="form-control" name="" required />
    </div>
    <div class="mb-3">
      <label class="form-label">E-mail</label>
      <input type="email" class="form-control" name="" required />
    </div>
    <div class="mb-3">
      <label class="form-label">Message</label>
      <textarea class="form-control" name="" rows="4" required></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

Step 3: Submitting the Form

In the GIF below, you can see how after submitting the form you check the results in your Spreadsheet.

Screenshot

Besides that, you and the respondent will receive a confirmation email with the data submitted.

Screenshot
Screenshot


And that's is! Simple as that. Aditionally, you can create Unlimited Spreadsheets, customize the Thank You page, add as many Custom Form Fields as you want and remove the Form2Sheet branding from the emails.

Screenshot

Conclusion

Congratulations! You can now go ahead and publish your Bootstrap contact form. It is now ready to start collecting responses. With Form2Sheet, the process is streamlined, and you can focus on obtaining valuable data without the hassle of complicated setups.

If this made you curious, go ahead and check our pricing below.

Related Guides