Web3forms Integration

This log serves as a personal reference for the Web3forms integration at Elie Labs, documenting the transition to a leaner, privacy-first feedback architecture.

1. Account Setup & Access Key Retrieval

The first step was establishing the direct-to-inbox pipeline:

• Account Registration: Registered the official support email with Web3forms to generate the unique Access Key.
• Architecture Shift: This integration routes messages directly to the inbox, completely eliminating the need for third-party user authentication. This ensures the feedback process remains 100% friction-free and aligns with the core development philosophy.

2. Form Implementation in Astro

Instead of relying on heavy third-party UI widgets, I built a native HTML form component directly within the Astro project. The Access Key is injected into a hidden input field to authorize the POST request to the Web3forms API.

src/components/ContactForm.astro

<form action="https://api.web3forms.com/submit" method="POST" class="feedback-form">
  <!-- Required Web3forms Access Key -->
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

  <!-- Redirect to Custom Success Page to keep users on domain -->
  <input type="hidden" name="redirect" value="https://elielabs.com/success">

  <!-- Spam Prevention (Honeypot) -->
  <input type="checkbox" name="botcheck" class="hidden" style="display: none;">

  <label for="email">Email (Optional)</label>
  <input type="email" name="email" id="email">

  <label for="message">Your Feedback</label>
  <textarea name="message" id="message" required></textarea>

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

3. Custom Success Page Routing

By default, Web3forms redirects users to their own generic confirmation page upon submission. To maintain a cohesive brand experience and keep traffic on our domain, I implemented a custom redirect flow.

• Success Route: Created a dedicated src/pages/success.astro page containing a simple “Thank You” message and a link back to the documentation or homepage.
• Redirect Injection: Added a specific hidden input parameter (name="redirect") to the form to override the default routing behavior and point directly to the new Astro success route.

🚨 Critical Reminders (Self-Correction)

• Spam Prevention (Honeypot): To prevent inbox flooding without forcing users to solve Captchas, always include the Web3forms honeypot field as shown in the form snippet.
• Environment Variables: While the Access Key is inherently public in the HTML, mapping it to a .env variable (e.g., PUBLIC_WEB3FORMS_KEY) is a better practice for maintainability, especially if I need to rotate the key across multiple product sites later.