Web3Forms
  • Introduction
  • Getting Started
    • Installation
    • Customizations
      • Email Subject line
      • Success / Thank You Page
      • Custom Redirection
      • Captcha & SPAM
        • hCaptcha
        • reCaptcha & Turnstile
        • Honeypot
        • Report Spam
      • Custom Reply-To
      • From Name
    • Pro Features
      • reCaptcha Integration
      • Cloudflare Turnstile Captcha
      • Add CC Email
      • Autoresponder (Auto-Reply)
      • File Attachments
      • Advanced File Uploader
      • Webhooks
      • Restrict to Domain
      • Intro Text
    • Examples
      • Basic HTML Contact Form
      • Advanced - All Options
      • Ajax Contact Form using Javascript
      • Multi Column Contact Form
      • Javascript Form Validation
      • Contact Form with Dark Mode
      • Raw Contact Form
      • Google reCaptcha v3
      • File Upload Form
      • With Multiple Checkbox
    • Integrations
      • Zapier
      • Integromat
      • Examples
        • Google Sheets
        • Airtable
        • Telegram Notifications
    • Options Reference
    • API Reference
    • Troubleshooting
    • FAQ
  • How-to Guides
    • HTML & JavaScript
    • JS Frameworks
      • React JS
        • Web3Forms React Plugin
        • React Hook Form
        • Simple React Contact Form
        • React File Upload Form
        • React Google ReCaptcha v3
        • React Hook Form File Upload
      • Vue JS
      • Svelte
      • Angular JS
      • Alpine.js
    • Site Builders
      • Webflow
      • Framer
      • Carrd.co
      • Squarespace
      • Wix
      • Dorik
    • Static Site Generators
      • Next.js
      • Astro
      • Nuxt.js
      • Hugo
      • Jekyll
      • Gatsby
      • Gridsome
      • Eleventy
    • Hosting Providers
      • Vercel
      • Netlify
      • Digital Ocean
      • AWS
      • Github
      • Cloudflare
    • JAM Stack
    • Landing Page Builders
      • Unbounce
      • Instapage
      • Pagewiz
      • Groovefunnels
    • WordPress
      • Elementor
      • Oxygen Builder
Powered by GitBook
On this page

Was this helpful?

Edit on Git
  1. How-to Guides
  2. Static Site Generators

Astro

Custom Contact form for Astro

Here's a working contact form example for Astro with Web3Forms

---
import Button from "./ui/button.astro";
---

<!-- // Styling Requires Tailwind CSS -->
<form
  action="https://api.web3forms.com/submit"
  method="POST"
  id="form"
  class="needs-validation"
  data-astro-reload
  novalidate>
  
   <!-- Add your Web3Forms Access Key -->
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
  
  <input type="checkbox" class="hidden" style="display:none" name="botcheck" />
  <div class="mb-5">
    <input
      type="text"
      placeholder="Full Name"
      required
      class="w-full px-4 py-3 border placeholder:text-slate-400 rounded-md outline-none focus:ring-4 border-slate-300 focus:border-slate-600 ring-slate-100"
      name="name"
    />
    <div class="empty-feedback invalid-feedback text-red-400 text-sm mt-1">
      Please provide your full name.
    </div>
  </div>
  <div class="mb-5">
    <label for="email_address" class="sr-only">Email Address</label><input
      id="email_address"
      type="email"
      placeholder="Email Address"
      name="email"
      required
      class="w-full px-4 py-3 border placeholder:text-slate-400 rounded-md outline-none focus:ring-4 border-slate-300 focus:border-slate-600 ring-slate-100"
    />
    <div class="empty-feedback text-red-400 text-sm mt-1">
      Please provide your email address.
    </div>
    <div class="invalid-feedback text-red-400 text-sm mt-1">
      Please provide a valid email address.
    </div>
  </div>
  <div class="mb-3">
    <textarea
      name="message"
      required
      placeholder="Your Message"
      class="w-full px-4 py-3 border placeholder:text-slate-400 rounded-md outline-none h-36 focus:ring-4 border-slate-300 focus:border-slate-600 ring-slate-100"
    ></textarea>
    <div class="empty-feedback invalid-feedback text-red-400 text-sm mt-1">
      Please enter your message.
    </div>
  </div>
  <Button type="submit" size="lg" block>Send Message</Button>
  <div id="result" class="mt-3 text-center"></div>
</form>

<style>
  .invalid-feedback,
  .empty-feedback {
    display: none;
  }

  .was-validated :placeholder-shown:invalid ~ .empty-feedback {
    display: block;
  }

  .was-validated :not(:placeholder-shown):invalid ~ .invalid-feedback {
    display: block;
  }

  .is-invalid,
  .was-validated :invalid {
    border-color: #dc3545;
  }
</style>

<script is:inline>

  // use astro:page-load event if you are using View Transitions

  document.addEventListener("DOMContentLoaded", () => {
  
      const form = document.getElementById("form");
      const result = document.getElementById("result");

      form.addEventListener("submit", function (e) {
        e.preventDefault();
        form.classList.add("was-validated");
        if (!form.checkValidity()) {
          form.querySelectorAll(":invalid")[0].focus();
          return;
        }
        const formData = new FormData(form);
        const object = Object.fromEntries(formData);
        const json = JSON.stringify(object);

        result.innerHTML = "Sending...";

        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.classList.add("text-green-500");
              result.innerHTML = json.message;
            } else {
              console.log(response);
              result.classList.add("text-red-500");
              result.innerHTML = json.message;
            }
          })
          .catch((error) => {
            console.log(error);
            result.innerHTML = "Something went wrong!";
          })
          .then(function () {
            form.reset();
            form.classList.remove("was-validated");
            setTimeout(() => {
              result.style.display = "none";
            }, 5000);
          });
      });
    },
    { once: true },
  );
</script>
PreviousNext.jsNextNuxt.js

Last updated 1 year ago

Was this helpful?