#7 HOW TO: Add a contact form to your Ghost.org site to connect with your audience

Hopefully you're well and truly in the midst of setting up your Ghost.org site. So far by following my 'how to start a blog' series (linked at the bottom of this blog post)... you should have a snazzy looking website with concise primary and secondary menu's tailored to your niche - this will intrigue any visitor to your site! However, keeping visitors engaged is a different ball game. You need to have really engaging posts, which I will cover in a later 'how-to' blog post and have a space for the audience to connect with you. It's important that your audience know there is a person behind the site and that they can contact you. It helps make your site more personable, build a rapport with your readers and helps keep them interested in your blog. Not to mention... it's also a chance to organise contributions to your site from other bloggers or organise collaborations with brands.

I would suggest having a 'contact' section on your site in either your primary or secondary menus. To set this 'contact' menu up, read this blog post:

#6 HOW TO: Create the ideal primary and secondary menus for your Ghost.org blog to make your site more user-friendly
The best websites are well organised and structured. They are easy-to-navigate and you can find the information you’re looking for quickly. This is important because the harsh truth is, in this day and age with so many other websites grabbing at our attention, no visitor to your site is going

Within this 'contact' menu, instead of giving out any personal data like your personal email address or phone number, you can instead add a contact form to your blog to connect with your audience. In this blog post, I will cover how to set up a contact page, link it to your 'contact' menu then add a contact form to that page. I promise its not as confusing as it sounds. Keep reading to find out!

Another way of allowing your audience to contact you is through social media. By having easy-to-access social media icons on your blog allows the reader to follow you on all social media sites that you have linked and contact you there. I covered linking your social media in this blog post:

#4 HOW TO: Edit your Ghost.org general publication details and link your social media
How to edit your Ghost general publication details, site metadata (for SEO), link social media accounts and add a Pinterest save button.

I'm just starting a blog and focusing all my attention on one social media site (Pinterest) for the time being. So, I've not added other social media links but this is hopefully something I'll do in the future when I start to build a following. It's personal preference whether you want to add a contact form or social media links or both!


This blog post will cover:

If you need help with other aspects of Ghost.org/Google Domains, follow my 'how-to' blog post series linked at the bottom of this blog. A new 'how-to' blog post will be released every Thursday.


STEP ONE: Create a 'contact' page

You first need to set up a 'contact' button in either your primary (top of your site) or secondary (bottom of your site) menus. Like this...

My 'contact' tab in my secondary menu (bottom of my blog)

If you haven't already done this or aren't sure how to set this up, not to worry... read this post to help you!

#6 HOW TO: Create the ideal primary and secondary menus for your Ghost.org blog to make your site more user-friendly
The best websites are well organised and structured. They are easy-to-navigate and you can find the information you’re looking for quickly. This is important because the harsh truth is, in this day and age with so many other websites grabbing at our attention, no visitor to your site is going

Now that you have a 'contact' button in your primary or secondary menus, you need to set up a 'contact' page.

So to set up a 'contact' page, follow these instructions...

  1. You need to be logged into your Ghost account and click the 'pages' button on the left-hand menu.

2. Click 'new page' up the top right-hand corner.

3. Customise your 'contact' page... Add a title and upload/choose a picture, go wild! This page will save as a draft until you choose to publish it.


Next, you have to link your 'contact' page to the 'contact' button in your primary or secondary menu. If you don't do this and you click on the 'contact' menu button, you'll be met with a 404 error message.

To link the two, follow these instructions...

  1. Log into your Ghost.org account and then click on your settings. This button...

2. Within your Ghost settings and under the 'website' section, click on the 'navigation' tab (highlighted in the picture below).

3. Find the 'contact' menu row under either your primary or secondary menus and make the URL end in '/contact/'.

4. Next, click on the 'pages' button on your left-hand menu and go onto your 'contact' page.

5. Click this button up the top right-hand corner of your 'contact' page.

6. Edit your page URL to match the URL above in the primary and secondary menu. This will link the 'contact' page to your 'contact' menu which means now when you click on your 'contact' menu, you will be able to see your contact page once you've published it.


STEP THREE: Add a 'contact' form to your 'contact' page

  1. Go to https://formspree.io and create an account by clicking the 'get started' button. I use formspree to make my 'contact' form as its free and easy to use.

2. Once logged into your formspree account, go to the 'forms' section and click '+ new form'.

3. Input a name for your form and an email address, then click 'create form'.

4. Once you've created your form. You will now see your form details. Copy your form's endpoint URL.

5. Just under your form's endpoint, there should be a heading that says 'see some example'. Click on the red hyperlink under this title.

6. In the form library, click on the form you want to use. I choose the simple contact form for my blog.

7. Click 'get the code' on your desired form.

You'll be met with something like this.

8. Very important step - you have to edit this highlighted section in the picture below and insert your form's endpoint that you copied earlier.

9. Next, edit the code to customise your contact form. For example, I took out the greyed text in the boxes.

How I did this was by removing the full 'placeholder' sections up to the blue 'required' part of your code:

If you want to edit the actual headings in the contact form like 'full name', 'email address' or 'message'. Edit the highlighted sections in the picture below of your code.

10. You can see an example of what your contact form will look like on the right next to your code. If you're happy with it, simply copy all the code.

11. Next, go back to your 'contact' page in Ghost and in this section below, write a little introduction for your 'contact' page.

12. Once you've got your introduction, click the plus button.

13. Click on the 'HTML' option in the drop down menu.

14. Insert your code for the contact form in the HTML box and press the enter button.

15. Now, you should have a contact form on your 'contact' page. All you have to do is publish your page by clicking the publish button up the top right-hand corner.


#1 HOW TO: Set up your Ghost.org account and billing.
Recently, I took the notion of setting up my own travel and lifestyle blog and I was very naïve to think that it would be easy. I like to think I’m pretty savvy with a computer. Well, that was until I started trying to create my own blog/website
#2 HOW TO: Set up your Google Domain and link it to your Ghost.org account.
In this blog post, I will cover how to set-up a Google domain and link it to your Ghost.org account. A domain name is the address of your website that people will input in the browser URL bar to be taken to your website. Having a domain will give
#3 HOW TO: Pick and install your Ghost.org blog theme
Being a complete novice when it comes to setting up a website, I am finding it’s taking a lot of time to navigate Ghost.org. Slowly but surely, I am getting there. I’m going to take you along on my journey to setting up my Ghost.org blog,
#4 HOW TO: Edit your Ghost.org general publication details and link your social media
How to edit your Ghost general publication details, site metadata (for SEO), link social media accounts and add a Pinterest save button.
#5 HOW TO: Create the best branding for your Ghost.org site to attract more viewers
Disclosure: The links below are affiliate links, meaning, at no additional cost to you, I will earn a commission for purchases made through links in this post. However, please note I only recommend products I have used, and I won’t put anything on this page that I haven’t
#6 HOW TO: Create the ideal primary and secondary menus for your Ghost.org blog to make your site more user-friendly
The best websites are well organised and structured. They are easy-to-navigate and you can find the information you’re looking for quickly. This is important because the harsh truth is, in this day and age with so many other websites grabbing at our attention, no visitor to your site is going

In the meantime, if you have any questions please don't hesitate to contact me via the contact form.