Add Forms to Ghost with Basin

In this guide, we'll show you how to add a contact form to your Ghost site and connect it to Basin.

Basin is a no-code form backend that pairs nicely with CMS platforms like Ghost.

Ghost is a powerful, open-source publishing platform built on Node.js. It's designed for bloggers, creators, and businesses who want a fast, clean content experience. Ghost themes use Handlebars templates for rendering, and you can inject custom HTML through the Ghost Admin code injection feature.

By following this guide, you'll have a working contact form on your Ghost site that sends you email notifications when visitors submit.

Requirements

You'll need a Basin account, which you can create for free here, and a running Ghost site — either self-hosted or on Ghost(Pro).

You should be able to access Ghost Admin and either the code injection settings or your theme's template files.

Step 1 — Create a form endpoint in Basin

After logging in to your Basin account, create a new form endpoint from the Forms index page. Fill out the fields and click "Create Form".

After your new form endpoint is created, it will appear in your My Forms list. Select it to view the Submissions page.

Copy the form endpoint URL — you'll use it in the next step.

Step 2 — Add a contact form to Ghost

The easiest way to add a form to Ghost is by using the HTML card in the Ghost editor. Open the page or post where you want the form, click the + button to add a new card, and select HTML. Then paste the following:

<form action="https://usebasin.com/f/<YOUR_FORM_ID>" method="POST">
  <div style="margin-bottom: 1rem;">
    <label for="name">Name</label><br>
    <input type="text" name="name" id="name" required
      style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;" />
  </div>
  <div style="margin-bottom: 1rem;">
    <label for="email">Email</label><br>
    <input type="email" name="email" id="email" required
      style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;" />
  </div>
  <div style="margin-bottom: 1rem;">
    <label for="message">Message</label><br>
    <textarea name="message" id="message" rows="5"
      style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"></textarea>
  </div>
  <button type="submit"
    style="padding: 10px 20px; background: #000; color: #fff; border: none; border-radius: 4px; cursor: pointer;">
    Send
  </button>
</form>

Replace <YOUR_FORM_ID> with the form endpoint ID you copied from Basin.

We've included some basic inline styles so the form looks presentable within Ghost's content area. Feel free to adjust the styling to match your theme.

Alternative approach: If you want the form on every page (like in your site footer), you can add the HTML to your Ghost theme's default.hbs template, or use Ghost Admin's Code Injection feature under Settings → Code injection → Site footer.

Step 3 — Test your form

Visit the page where you added the form, fill it out, and submit. You should see Basin's default success page, and the submission will appear in your Basin inbox.

From there you can configure email notifications, connect integrations like Slack or Zapier, set up spam filtering, and more.

Conclusion

In this guide, you learned how to add a Basin-powered contact form to your Ghost site using the HTML card in the editor. Since Basin works with standard HTML forms, no Ghost plugins or server-side code are required.

To learn how Basin works with other frameworks and CMS platforms, check out our other step-by-step installation guides.

Happy form building!