Contact Forms for Cloudflare Websites

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

Show steps ↓

No Signup required

No Backend Code

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

No Databases

All emails are sent directly to your email address. We never store your form submissions.

Design without Limits

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

Create Cloudflare Contact Form

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

Step 1: Create Access Key

Access key will be sent to your email address.

Step 2: Create Cloudflare Form

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

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

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

    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <textarea name="message" required></textarea>
    <button type="submit">Submit Form</button>
    <div id="result"></div>

</form>

<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">

Cloudflare Docs & code examples →

← View all Platforms

Get Started!

Create your contact form for static website in minutes.

Create your Access Key

No Signup required