Contact Forms for Bootstrap Websites

Build a working contact form for your Bootstrap website. Send Bootstrap form data to email using API in three simple steps. See example code below. No backend or server code needed.

Show steps ↓

Free to get started

No Backend Code

You already know! Setting up form backend is pain. Web3Forms works without any Server or backend code.

Secure Storage

All emails are sent directly to your email address. Form submissions are securely stored for 30 days on free plans and 1 year on pro plans.

Design without Limits

Web3Forms is an API based form backend. We can seamlessly integrate to any custom design or style.

Create Bootstrap Contact Form

Creating Bootstrap Contact Form is easy as 1 2 3. Just follow the steps and you’re done.

Step 1: Create Your Form

Verify your email and create an access key.

Create your form

By signing up, you agree to our terms and privacy policy as well as give consent to reach you for marketing purposes.

Step 2: Create Bootstrap Form

Use the following code example to create a form inside your Bootstrap website.

<form method="POST" id="form">

  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

  <div class="mb-3">
    <label for="name" class="form-label">Full Name</label>
    <input type="text" name="name" class="form-control" id="name">
  </div>

  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" name="email" class="form-control" id="email">
  </div>

  <div class="mb-3">
    <label for="message" class="form-label">Message</label>
    <textarea class="form-control" name="message" id="message" rows="3"></textarea>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<div id="result"></div>

<script>
const form = document.getElementById('form');
const result = document.getElementById('result');

form.addEventListener('submit', function(e) {
    const formData = new FormData(form);
    e.preventDefault();

    const object = Object.fromEntries(formData);
    const json = JSON.stringify(object);

    result.innerHTML = "Please wait..."

    fetch('https://api.web3forms.com/submit', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: json
        })
        .then(async (response) => {
            let json = await response.json();
            if (response.status === 200) {
                result.innerHTML = json.message;
            } else {
                console.log(response);
                result.innerHTML = json.message;
            }
        })
        .catch(error => {
            console.log(error);
            result.innerHTML = "Something went wrong!";
        })
        .then(function() {
            form.reset();
            setTimeout(() => {
                result.style.display = "none";
            }, 3000);
        });
});
</script>

Step 3: Add your Access Key

Replace the access key with your actual key to start receiving email submissions.

<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

Bootstrap Docs & code examples →

← View all Platforms

Get Started!

Create your contact form for static website in minutes.

Create your Form

Get started for free