> ## Documentation Index
> Fetch the complete documentation index at: https://formbnb.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Ghost

> Add contact forms to your Ghost blog with FormBnB

## Why Use FormBnB with Ghost

Ghost is a great publishing platform, but it doesn't have built-in forms. FormBnB adds:

* Contact forms, feedback forms, or any custom form
* Unlimited submissions on the free plan
* Email notifications on every submission
* Spam protection (honeypot, reCAPTCHA, Turnstile)
* Webhooks and 21+ integrations
* No plugins or third-party apps needed

## Setup Steps

<Steps>
  <Step title="Create FormBnB Form">
    Create a new form in your [FormBnB dashboard](https://app.formbnb.com) and copy the form slug.
  </Step>

  <Step title="Add HTML Card">
    In the Ghost editor, type `/html` to insert an HTML card.
  </Step>

  <Step title="Paste Form HTML">
    Paste your FormBnB form HTML into the card.
  </Step>

  <Step title="Publish">
    Publish or update your post/page.
  </Step>
</Steps>

## Example: Contact Form

Paste this into a Ghost HTML card:

```html theme={null}
<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST" style="max-width:500px;margin:0 auto;font-family:inherit;">
  <input type="text" name="_gotcha" style="display:none">

  <div style="margin-bottom:16px;">
    <label style="display:block;font-size:14px;margin-bottom:4px;font-weight:600;">Name</label>
    <input type="text" name="name" required
      style="width:100%;padding:10px;border:1px solid #e1e1e1;border-radius:4px;font-size:15px;">
  </div>

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

  <div style="margin-bottom:16px;">
    <label style="display:block;font-size:14px;margin-bottom:4px;font-weight:600;">Message</label>
    <textarea name="message" rows="5" required
      style="width:100%;padding:10px;border:1px solid #e1e1e1;border-radius:4px;font-size:15px;resize:vertical;"></textarea>
  </div>

  <button type="submit"
    style="padding:12px 24px;background:#000;color:#fff;border:none;border-radius:4px;font-size:15px;cursor:pointer;">
    Send Message
  </button>
</form>
```

## Example: Newsletter Feedback Form

Add a quick feedback form at the end of your posts:

```html theme={null}
<div style="border-top:1px solid #eee;padding-top:24px;margin-top:32px;max-width:500px;">
  <h4 style="margin-bottom:8px;">Was this helpful?</h4>
  <form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST">
    <input type="text" name="_gotcha" style="display:none">
    <input type="hidden" name="_subject" value="Post Feedback">

    <textarea name="feedback" placeholder="Share your thoughts..." rows="3" required
      style="width:100%;padding:10px;border:1px solid #e1e1e1;border-radius:4px;font-size:14px;margin-bottom:12px;resize:vertical;"></textarea>

    <input type="email" name="email" placeholder="Email (optional)"
      style="width:100%;padding:10px;border:1px solid #e1e1e1;border-radius:4px;font-size:14px;margin-bottom:12px;">

    <button type="submit"
      style="padding:10px 20px;background:#000;color:#fff;border:none;border-radius:4px;font-size:14px;cursor:pointer;">
      Send Feedback
    </button>
  </form>
</div>
```

## Theme Integration

For a site-wide contact form, add it directly to your Ghost theme. Edit your theme's `contact.hbs` (or create a custom template):

```html theme={null}
{{!-- contact.hbs --}}
{{!< default}}

<main class="site-main">
  <article class="post">
    <header class="post-header">
      <h1 class="post-title">Contact Us</h1>
    </header>
    <div class="post-content">
      <form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST">
        <input type="text" name="_gotcha" style="display:none">
        <p><label>Name</label><input type="text" name="name" required></p>
        <p><label>Email</label><input type="email" name="email" required></p>
        <p><label>Message</label><textarea name="message" rows="5" required></textarea></p>
        <button type="submit">Send</button>
      </form>
    </div>
  </article>
</main>
```

<Tip>
  Ghost HTML cards render raw HTML, so `font-family: inherit` will pick up your theme's typography.
</Tip>