How To Setup A Ghost Blog Contact Form

2019-03-10

Ghost is a great blogging platform but one thing it doesn’t have setup ‘out of the box’ is a contact form.

How frustrating!

Fortunately, I’m going to guide you in the right direction so you can setup your Ghost blog contact form lickety split!

I have two options for you, a simpler option and a more complicated one depending on how you want to implement this.

Simpler Option

I’ve recently been a big fan of using TypeForm for my contact form. It’s free if you’re just wanting a simple contact form and has such a nice user experience. Creating a contact form is simple with TypeForm, it’s basically like creating a Google Form which is really easy.

Once you create the form, it’ll exist at a URL like ‘yourbusinessname.typeform.com’. To integrate into your Ghost Blog, all you have to do is make a small edit to the theme. Simply add a html for the ‘Contact’ navigation link to the theme and point it to your TypeForm URL. Easy Peezy!

If you don’t want to edit the theme, you can use Ghost URL Redirects here to redirect visitors to your new TypeForm contact form.

More Complicated Option

Step 1

Create a new static page on your Ghost Blog and call it “Contact”.

Step 2

Create a custom contact page template following the instructions here in Ghost Documentation.

This will allow you to add custom CSS for the Contact Page!

Here’s a great contact form using CSS & HTML. You can use the CSS to make your custom contact page Ghost template.

The HTML from the form you’ll use inside your Ghost Blog editor. You’ll go back to the page you created in Step 1 and insert the HTML into via the Ghost Editor. Don’t forget to select your new custom contact page Ghost template to style up the form with the CSS.

You can select the custom template using the dropdown menu found inside the post settings:

Step 3

Now all you have to do is follow the steps at Formspree.io to ‘wire up’ your form to send to your email inbox. It’s really simple, you basically just edit the form ‘action’ attribute with their URL followed by your email address you want the contact form messages sent to.

That’s it! You’re all done. You now have a nifty, mobile responsive contact form for your Ghost Blog or anything really! :)

Related Blog Posts
Should You Submit Each New Blog Post To Google For Indexing?
How To Add A Custom Drip Email Optin Form To Your Ghost Blog Theme
The Easiest Way To Integrate Drip Into Your Ghost Blog