Using FormBeep with Astro#

Add FormBeep to your Astro static site to receive WhatsApp notifications for form submissions.

Step 1: Add Allowed Domain#

Add your Astro site’s domain to the FormBeep Dashboard:

✔ localhost (for local development with astro dev) ✔ example.com (production domain) ✔ yoursite.netlify.app or yoursite.vercel.app (hosting platform)

Step 2: Add FormBeep Script to Your Layout#

Edit your base layout (typically src/layouts/Layout.astro):

---
// src/layouts/Layout.astro
interface Props {
  title: string;
}

const { title } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
  </head>
  <body>
    <slot />

    <!-- FormBeep Script -->
    <script
      src="https://api.formbeep.com/v1/s/formbeep.js"
      data-api-key="fbp_xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      is:inline
    ></script>
  </body>
</html>

Important: Use is:inline to prevent Astro from bundling/optimizing the external script.

Step 3: Create a Contact Form#

Create a contact page at src/pages/contact.astro:

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Contact">
  <main style="max-width: 600px; margin: 0 auto; padding: 2rem;">
    <h1>Contact Us</h1>

    <form action="?submitted=true" style="margin-top: 2rem;">
      <div style="margin-bottom: 1rem;">
        <label for="name" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
          Name
        </label>
        <input
          type="text"
          id="name"
          name="name"
          required
          style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px;"
        />
      </div>

      <div style="margin-bottom: 1rem;">
        <label for="email" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
          Email
        </label>
        <input
          type="email"
          id="email"
          name="email"
          required
          style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px;"
        />
      </div>

      <div style="margin-bottom: 1rem;">
        <label for="message" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
          Message
        </label>
        <textarea
          id="message"
          name="message"
          required
          style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; min-height: 120px;"
        ></textarea>
      </div>

      <button
        type="submit"
        style="padding: 0.75rem 1.5rem; background: #4f46e5; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 600;"
      >
        Send Message
      </button>
    </form>

    <p
      id="success"
      style="display: none; color: #16a34a; margin-top: 1.5rem; font-weight: 600;"
    >
      ✓ Thank you! Your message has been sent.
    </p>
  </main>

  <script>
    if (window.location.search.includes('submitted=true')) {
      const successMsg = document.getElementById('success');
      if (successMsg) successMsg.style.display = 'block';
    }
  </script>
</Layout>

Step 4: Build and Deploy#

npm run build

Deploy the dist/ directory to your hosting platform.

Step 5: Test Your Form#

Visit your contact page
Submit a test form
Check your WhatsApp for the notification

Advanced: Using Astro Actions (Optional)#

If you want more control, you can also call the FormBeep API directly:

---
// src/pages/contact.astro
import Layout from '../layouts/Layout.astro';

let success = false;
let error = false;

if (Astro.request.method === 'POST') {
  try {
    const formData = await Astro.request.formData();
    const data = Object.fromEntries(formData.entries());

    const response = await fetch('https://api.formbeep.com/v1/submit/YOUR_API_KEY', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

    if (response.ok) {
      success = true;
    } else {
      error = true;
    }
  } catch (err) {
    error = true;
  }
}
---

<Layout title="Contact">
  <form method="POST">
    <!-- form fields -->
  </form>

  {success && <p>Message sent successfully!</p>}
  {error && <p>Something went wrong. Please try again.</p>}
</Layout>

Troubleshooting#

Not receiving notifications?

Verify domain in Allowed Domains matches exactly (no https://, no trailing slash)
Ensure is:inline attribute is on the script tag
Check browser console (F12) for errors
Verify FormBeep script loads (Network tab in DevTools)
Test on published site, not just astro dev (unless you added localhost to allowed domains)

Need help? If you encounter any issues or have questions about this guide, reach out at hello@formbeep.com or message @rishikeshs on Discord.