Using FormBeep with Ghost#

Add FormBeep to your Ghost blog or website to receive WhatsApp notifications for form submissions.

Step 1: Add Allowed Domain#

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

✔ yourblog.ghost.io (Ghost(Pro) subdomain) ✔ example.com (custom domain)

Step 2: Add the FormBeep Script#

1. Log in to your Ghost Admin panel
2. Go to Settings → Code Injection
3. In the Site Header section, paste:

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

Replace fbp_xxxxxxxxxxxxxxxxxxxxxxxxxxxx with your actual API key from the FormBeep Dashboard.

4. Click Save

Step 3: Add a Form to Your Ghost Site#

Ghost doesn’t have built-in forms, so you’ll need to add a custom HTML form:

1. Edit a post or page
2. Add an HTML card
3. Paste your form HTML:

<form action="?submitted=true" style="max-width: 500px; margin: 0 auto;">
  <div style="margin-bottom: 15px;">
    <input name="name" type="text" placeholder="Your Name" required
           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  <div style="margin-bottom: 15px;">
    <input name="email" type="email" placeholder="Email Address" required
           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  <div style="margin-bottom: 15px;">
    <textarea name="message" placeholder="Your Message" required
              style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; min-height: 100px;"></textarea>
  </div>
  <button type="submit"
          style="padding: 12px 24px; background: #15171A; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 600;">
    Send Message
  </button>
</form>

<p id="success" style="display: none; color: #30CF43; text-align: center; margin-top: 15px; font-weight: 600;">
  ✓ Message sent successfully!
</p>

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

4. Publish your post/page

Step 4: Test Your Form#

1. Visit your published Ghost page
2. Submit a test form
3. 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 with keepalive

Troubleshooting#

Not receiving notifications?

1. Verify domain in Allowed Domains matches exactly (no https://, no trailing slash)
2. Check browser console (F12) for errors
3. Ensure Code Injection is saved in Ghost settings
4. Test on the published site, not in Ghost editor preview

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