Contact Form - Web3Forms

Web3Forms handles form submissions and emails them to the client. Free, no backend, no database.

---

Setup

1. Go to web3forms.com
2. Enter the client’s email -> get an access key
3. Add the key to the form

---

Full form template

<form method="POST" action="https://api.web3forms.com/submit" class="space-y-5">
  <!-- Required hidden fields -->
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input type="hidden" name="subject" value="New enquiry - Business Name" />
  <input type="hidden" name="redirect" value="https://domain.com/thank-you" />
  <input type="hidden" name="from_name" value="Business Name Website" />

  <!-- Honeypot spam filter  -  must be hidden -->
  <input type="checkbox" name="botcheck" style="display:none" />

  <!-- Visible fields -->
  <div>
    <label for="name">Name</label>
    <input id="name" name="name" type="text" required />
  </div>

  <div>
    <label for="email">Email</label>
    <input id="email" name="email" type="email" required />
  </div>

  <div>
    <label for="phone">Phone / WhatsApp</label>
    <input id="phone" name="phone" type="tel" />
  </div>

  <div>
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="4"></textarea>
  </div>

  <button type="submit">Send Message</button>
</form>

---

How it works

1. User submits the form
2. Browser POSTs to https://api.web3forms.com/submit
3. Web3Forms emails the submission to the address linked to access_key
4. Web3Forms redirects the browser to redirect URL (/thank-you)

No backend code needed. No API keys to manage in Cloudflare.

---

Configuration fields

Field	Required	Description
access_key	Yes	From web3forms.com for the client’s email
subject	Recommended	Email subject line
redirect	Recommended	Page to show after submission
from_name	Recommended	“From” name in the email
botcheck	Yes	Hidden checkbox - prevents spam

---

Spam protection

The botcheck honeypot field is invisible to humans but bots fill it in. Web3Forms rejects any submission with it checked.

For additional spam protection, Web3Forms also supports hCaptcha (add data-hcaptcha="true" to the form).

---

The thank-you page

src/pages/thank-you.astro - set noindex={true} and add to robots.txt Disallow. Keep it minimal: confirm the message was received, link back to the homepage.

---

Testing

Submit the form with real data in your browser. Check the email the access key is linked to. Delivery is typically instant.