How to add a contact form to your Ghost site

Ghost offers great tools to build websites. Let’s take a closer look at how you’d go about hooking your Ghost site up to FormBackend to receive form submissions. In this tutorial we’re going to create a Contact form, with a name, email and message field. But you can create exactly what you want. Support form, lead intake form, subscriber form. With as many fields as you’d like.

Create a form for your contact form in FormBackend

Log in to your FormBackend account and visit the forms index page. Go ahead and create a new form and give it a name you can remember it by.

After your form has been created, you’ll see the “Submissions” page which is where new submissions will appear. If you navigate to the “Set up” page you can see the unique URL for your form. We’ll copy that!

Add a new Contact us page in Ghost

After you have logged in to Ghost, click on the Pages link in the sidebar and then click on New page

I’m going to give my new page a title of “Contact us” and insert a raw HTML card

We’re going to insert the following in to the custom HTML card

<form action="https://www.formbackend.com/f/{your-identifier}" method="POST">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div>
    <button type="submit">Submit</button>
  </div>
</form>

Which looks something like this in Ghost’s page editor

It’s now up to you to properly style it in Ghost to match your site.

After filling it out and hitting the submit button, you’ll be taken to FormBackend’s submission success page and if you navigate to the Submissions page for the form you created in FormBackend you should see the submission you just added.

Adding more fields

The example above only includes name and email, but you can add any fields you need. Just give each one a unique name attribute. For example, add a message textarea, a phone number field, or a dropdown. Ghost’s HTML card accepts any valid HTML, so you have full flexibility over your form structure.

If you need to accept file uploads, add enctype="multipart/form-data" to your form tag.

Submit without a page redirect

By default the form redirects to FormBackend’s thank-you page. To keep visitors on your Ghost site and show a success message inline, add a <script> block inside the same HTML card, below your form:

<script>
  const form = document.currentScript.parentNode.querySelector('form');

  form.addEventListener('submit', async (event) => {
    event.preventDefault();

    const response = await fetch(form.action, {
      method: 'POST',
      body: new FormData(form),
      headers: { accept: 'application/json' },
    });

    if (response.ok) {
      form.innerHTML = '<p>Thanks! Your message has been sent.</p>';
    } else {
      form.insertAdjacentHTML('beforeend', '<p>Something went wrong — please try again.</p>');
    }
  });
</script>

event.preventDefault() stops the full-page submission, the browser’s built-in FormData collects every field, and the accept: application/json header tells FormBackend to return JSON instead of an HTML page.

Notifications and integrations

With your Ghost form collecting submissions, configure these in FormBackend:

• Email notifications: Get an email with submission data every time someone submits, with optional file attachments
• Auto-reply emails: Send a confirmation to the person who filled out the form
• Spam protection: All submissions are checked for spam automatically. Add Cloudflare Turnstile for an extra layer of protection
• Integrations: Route submissions to Slack, Google Sheets, Notion, or any endpoint via webhooks
• Customize the thank-you page: Change the message users see after submitting, or redirect them to a page on your Ghost site

Looking for other platforms? See our guides for WordPress, Webflow, Hugo, and more.