Ghost is a powerful publishing platform. It is clean, fast, and great for writers, indie publishers, newsletters, and portfolios. But it has one well-known gap: there is no built-in contact form.
If you want readers, clients, or potential sponsors to reach you through your Ghost site, you have to figure it out yourself. Most tutorials point you toward Formspree or a custom backend. Both work, but neither gives you what happens after the submission. Your message arrives in an inbox, and then what?
In this tutorial, I will show you how to add a fully working contact form to your Ghost site using Formgrid. You will have a contact form live in under 5 minutes. Every submission will arrive in your inbox instantly, be stored in your Formgrid dashboard, and automatically become a tracked lead you can follow up on.
No backend to build. No server to maintain. No Node.js setup required.
Why Ghost Does Not Have a Built-In Contact Form
Ghost is a headless CMS at its core. It is designed to publish content, not to process form data. Processing form submissions requires a backend: a server that receives the POST request, validates the data, stores it, and sends an email. Ghost does not do that.
This means every Ghost site owner has to solve the contact form problem themselves. The two most common approaches people try are:
Setting up their own Node.js backend with nodemailer. This takes hours, requires a server, and needs ongoing maintenance.
Using a form backend service. This takes minutes, requires no server, and handles everything for you.
Formgrid is the second option. But unlike most form backends, it does not stop at the inbox.
What You Will Have at the End of This Tutorial
A working contact form on your Ghost site
Instant email notification for every submission
Every submission stored in a dashboard
Every submission tracked as a lead
Notes and follow-up reminders per lead
Bot protection and captcha included free
Google Sheets sync if you need it
CSV export at any time
Step 1: Create a Free Formgrid Account
Head to formgrid.dev and sign up. You can use Google or your email address. No credit card required.
The free plan gives you 25 submissions per month, which is plenty to get started. If you are running a high-traffic blog or business site, the Premium plan at $12 per month gives you 1,000 submissions.
Step 2: Create a New Form
Once you are logged in, you will see your dashboard. Click New Form.
Give your form a name. Something like "Ghost Contact Form" or "Blog Inquiries" works fine. This name is just for your own reference inside the dashboard.
After creating the form, you will be taken to the form details page. This is where you can find your unique endpoint URL.
Step 3: Get Your Endpoint URL
On the form details page, you will see your unique endpoint URL. It looks like this:
https://formgrid.dev/api/f/your-form-id
Copy this URL. You will use it as the action attribute on your HTML form in Ghost.
This endpoint is where Ghost will send your form data when a visitor hits submit. Formgrid receives it, stores it, sends you an email, and adds it to your lead pipeline automatically.
Step 4: Create a Contact Page in Ghost
Log in to your Ghost admin panel. In the left sidebar, click Pages and then click New Page.
Give the page a title. "Contact" or "Get in Touch" or "Work With Me" are all common choices.
Now click the + button to add a content block. From the list that appears, choose HTML.
This inserts an HTML card into your Ghost page. This is where you will paste your contact form code.
Step 5: Paste the Contact Form Code
Inside the HTML card, paste the following code. Replace your-form-id with your actual form ID from Formgrid:
<form
action="https://formgrid.dev/api/f/your-form-id"
method="POST"
style="display: flex; flex-direction: column; gap: 16px; max-width: 600px;"
>
<div>
<label
for="name"
style="display: block; margin-bottom: 6px; font-weight: 600;"
>
Name
</label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
style="width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px;"
/>
</div>
<div>
<label
for="email"
style="display: block; margin-bottom: 6px; font-weight: 600;"
>
Email
</label>
<input
type="email"
id="email"
name="email"
required
placeholder="your@email.com"
style="width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px;"
/>
</div>
<div>
<label
for="message"
style="display: block; margin-bottom: 6px; font-weight: 600;"
>
Message
</label>
<textarea
id="message"
name="message"
required
rows="5"
placeholder="What would you like to say?"
style="width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; resize: vertical;"
></textarea>
</div>
<!-- Honeypot spam protection: hidden from real users, filled by bots -->
<input
type="text"
name="_honey"
style="display: none;"
/>
<div>
<button
type="submit"
style="background: #000; color: #fff; padding: 12px 28px; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer;"
>
Send Message
</button>
</div>
</form>
Click Save on the Ghost page.
Step 6: Add a Custom Thank You Page (Optional)
By default, after someone submits the form, Formgrid shows a simple success message. If you want to redirect visitors to a custom thank you page on your Ghost site, you can add a hidden field to the form:
<input
type="hidden"
name="_redirect"
value="https://yourghost.site/thank-you"
/>
Create a "Thank You" page in Ghost and add this field to your form, replacing the URL with your actual thank you page address.
Step 7: Add the Contact Page to Your Navigation
In Ghost admin, go to Settings then Navigation. Add a new item with:
Label: Contact
URL: /contact/
Click Save. Your contact page now appears in your site navigation.
Step 8: Test Your Form
Visit your Ghost site and navigate to the contact page. Fill in the form with a test name, email, and message. Click Submit.
Within seconds, you should receive an email notification at the address you registered with on Formgrid. The email will be cleanly formatted with every field the visitor filled in.
Now go back to your Formgrid dashboard and click on your form. You will see the test submission listed in the Leads tab with a status of New.
What Happens After Every Submission
This is where Formgrid goes beyond every other form backend for Ghost.
Most services stop at the inbox. Your message arrives, you get an email, and that is it. There is no record of whether you replied, whether the person became a client, or what happened next.
Formgrid turns every submission into a tracked lead automatically.
Every submission becomes a lead in your pipeline
The moment someone submits your form, it appears in your Leads tab with a status of New. From there you move it through a simple pipeline: New → Contacted → Converted.
Add notes after every conversation
After you reply to someone, add a private note directly on the lead. What they asked about. What you quoted. What the next step is. Everything in one place.
Replied Thursday. Interested in sponsored post.
Wants to know rates. Follow up next week.
Set follow-up reminders
When someone asks you to follow up in two weeks, set a reminder directly on the lead. Pick a date. Formgrid emails you on that day with the lead details and your notes so you have everything you need before you reply.
See your conversion rate
As you move leads through the pipeline, your conversion rate updates automatically. 3 of 12 inquiries became clients (25%). That number tells you things a flat inbox never could.
Here is what the full flow looks like:
How to Enable hCaptcha on Your Contact Form
Formgrid includes free bot protection on all plans. For HTML endpoint forms like the one you just set up on Ghost, you can enable hCaptcha in two steps.
Step 1: Go to your form settings in the Formgrid dashboard and enable captcha.
Step 2: Add this snippet to your form just before the submit button:
<!-- Add this script once in your page -->
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<!-- Add this just before your submit button -->
<div class="h-captcha" data-sitekey="your-hcaptcha-site-key"></div>
Formgrid verifies the captcha token on the server side automatically. Real visitors see a simple checkbox. Bots are blocked before they ever reach your inbox.
No paid plan needed. No separate Cloudflare account. No backend code to write. It works on Ghost's HTML cards exactly as shown.
How to Sync Ghost Form Submissions to Google Sheets
If you want every contact form submission to automatically appear as a row in a Google Sheet, you can set that up in your Formgrid dashboard in one click.
Go to your form, click the Integrations tab, and connect your Google account. Select the spreadsheet and sheet you want to sync to. Every new submission will appear as a new row automatically.
No Zapier needed. No API setup. Works on the Premium plan at $12 per month.
The Complete Form Code With All Features
Here is the complete version of the form with honeypot spam protection, captcha, and a custom redirect:
<!-- hCaptcha script: add once per page -->
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<form
action="https://formgrid.dev/api/f/your-form-id"
method="POST"
style="display: flex; flex-direction: column; gap: 16px; max-width: 600px;"
>
<div>
<label
for="name"
style="display: block; margin-bottom: 6px; font-weight: 600;"
>
Name
</label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
style="width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px;"
/>
</div>
<div>
<label
for="email"
style="display: block; margin-bottom: 6px; font-weight: 600;"
>
Email
</label>
<input
type="email"
id="email"
name="email"
required
placeholder="your@email.com"
style="width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px;"
/>
</div>
<div>
<label
for="subject"
style="display: block; margin-bottom: 6px; font-weight: 600;"
>
Subject
</label>
<input
type="text"
id="subject"
name="subject"
placeholder="What is this about?"
style="width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px;"
/>
</div>
<div>
<label
for="message"
style="display: block; margin-bottom: 6px; font-weight: 600;"
>
Message
</label>
<textarea
id="message"
name="message"
required
rows="6"
placeholder="What would you like to say?"
style="width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; resize: vertical;"
></textarea>
</div>
<!-- Honeypot: hidden from humans, filled by bots -->
<input
type="text"
name="_honey"
style="display: none;"
/>
<!-- Custom redirect after submission -->
<input
type="hidden"
name="_redirect"
value="https://yourghost.site/thank-you"
/>
<!-- hCaptcha: only needed if captcha is enabled in Formgrid settings -->
<div class="h-captcha" data-sitekey="your-hcaptcha-site-key"></div>
<div>
<button
type="submit"
style="background: #000; color: #fff; padding: 12px 28px; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer;"
>
Send Message
</button>
</div>
</form>
Replace your-form-id with your actual Formgrid form ID and your-hcaptcha-site-key with your hCaptcha site key from the Formgrid dashboard.
Formgrid Free Plan vs Paid Plans
| Plan | Price | Submissions | Google Sheets | File Uploads |
|---|---|---|---|---|
| Free | $0/month | 25/month | 10 rows one time | No |
| Premium | $12/month | 1,000/month | 500 rows/month | Up to 1GB |
| Business | $29/month | 15,000/month | Unlimited | Up to 1GB |
For a personal blog or portfolio, the free plan is enough to get started. For a business site or a newsletter with active readers, the Premium plan at $12 per month handles everything.
Why Formgrid Beats Every Other Ghost Contact Form Solution
Most tutorials for Ghost contact forms use Formspree. It works, but it is a form backend that stops at the inbox. You get an email. That is it. There is no dashboard, no lead tracking, no follow-up reminders, no conversion rate.
Formgrid gives you all of that at a lower price than Formspree's paid plans.
Here is a quick comparison:
| Feature | Formspree | Formgrid |
|---|---|---|
| HTML form endpoint | ✅ | ✅ |
| Email notifications | ✅ | ✅ |
| Spam protection | ✅ Paid | ✅ Free |
| Captcha | ✅ Paid | ✅ Free |
| Lead pipeline | ❌ | ✅ |
| Follow up reminders | ❌ | ✅ |
| Conversion tracking | ❌ | ✅ |
| Google Sheets sync | ✅ $90/mo | ✅ $12/mo |
| Self-hostable | ❌ | ✅ |
| Open source | ❌ | ✅ |
| Free submissions | 50/mo | 25/mo |
| Starting price | $15/mo | $12/mo |
The only thing Formspree wins on is the free submission count: 50 vs 25. But Formgrid gives you more for less on every paid plan and includes features Formspree charges significantly extra for.
Troubleshooting Common Issues
My form submits but I am not receiving emails
Check your spam folder first. If the email is not there, go to your Formgrid dashboard and confirm the notification email address is correctly set in your form settings. Also make sure the form endpoint URL in your HTML matches exactly the endpoint URL shown in your Formgrid dashboard.
The form shows an error after submission
This usually means the form ID in the action URL is incorrect, or the form has been deleted. Copy the endpoint URL directly from your Formgrid dashboard and paste it fresh into your Ghost HTML card.
Bots are submitting my form
Enable captcha on your form in the Formgrid dashboard and add the hCaptcha snippet to your HTML card as shown in the captcha section above. The honeypot field in the form code already filters most bots silently, but hCaptcha adds a second layer for more aggressive bot traffic.
Submissions are not appearing in Google Sheets
Make sure you have connected your Google account under the Integrations tab and selected the correct spreadsheet and sheet. Google Sheets sync is available on the Premium plan and above.
Summary
Ghost does not have a built-in contact form. But adding one takes less than 5 minutes with Formgrid.
Here is what you set up in this tutorial:
A contact page in Ghost
An HTML form pointing to a Formgrid endpoint
Instant email notifications for every submission
A lead pipeline that tracks every inquiry
Honeypot spam protection built in
Optional hCaptcha for stronger bot blocking
Optional Google Sheets sync
Optional custom redirect after submission
Every submission becomes a tracked lead automatically. You can add notes, set follow-up reminders, mark leads as Contacted or Converted, and see your conversion rate update in real time. All from the Formgrid dashboard.
You can try it free at formgrid.dev. No credit card required.
Full disclosure: I built Formgrid. I wrote this tutorial as honestly as I could. If anything looks inaccurate or you run into an issue following the steps, let me know in the comments.
Top comments (0)