Using FormBeep with Hugo#

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

Step 1: Add Allowed Domain#

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

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

Step 2: Add FormBeep Script to Your Theme#

Option A: Add to Base Template (Recommended)#

Edit your layouts/_default/baseof.html (or your theme’s base template):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ .Title }}</title>
    {{ block "head" . }}{{ end }}
  </head>
  <body>
    {{ block "main" . }}{{ end }}

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

Option B: Add to Partial#

Create a partial layouts/partials/formbeep.html:

<script src="https://api.formbeep.com/v1/s/formbeep.js"
        data-api-key="fbp_xxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>

Then include it in your base template:

<body>
  {{ block "main" . }}{{ end }}
  {{ partial "formbeep.html" . }}
</body>

Step 3: Create a Contact Form#

Create a contact page at content/contact.html:

---
title: "Contact"
---

<form action="?submitted=true" style="max-width: 600px; margin: 0 auto;">
  <div style="margin-bottom: 15px;">
    <label for="name" style="display: block; margin-bottom: 5px; font-weight: 600;">Name</label>
    <input type="text" id="name" name="name" required
           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
  </div>

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

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

  <button type="submit"
          style="padding: 12px 24px; background: #0066cc; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 600;">
    Send Message
  </button>
</form>

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

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

Note: Use .html extension instead of .md to write raw HTML in Hugo without needing a shortcode.

Step 4: Build and Deploy#

hugo

Upload the public/ directory to your hosting platform.

Step 5: Test Your Form#

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

How It Works#

Form submits with ?submitted=true query parameter
Page reloads and shows success message
FormBeep sends data to WhatsApp in the background

Troubleshooting#

Not receiving notifications?

Verify domain in Allowed Domains matches your browser address bar (no https://, no trailing slash)
Check browser console (F12) for JavaScript errors
Ensure FormBeep script is loading (check Network tab in DevTools)
Test on the published site, not just hugo server (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.