How to add a contact form to Ghost Blogging Platform

Currently the Ghost Blogging platform does not have an native contact form builder , so one will need to use a third party form builder service like SpiceForms to add a contact form. In this tutorial I will explain how you can easily add a contact form (or any other form) to your Ghost blog.

I will making use of the default Casper Theme for adding the contact form.

This tutorial is primarily aimed at people who use the Ghost Pro service to run their blog.

Lets start

1. Create a Static Page

In order to add a contact form , we’ll first need to create a static page to embed the form. Here are the steps to create a static page in Ghost . Pls make note of your static page’s url. The page url value will be used at the time of template creation. Refer to the attached screenshot

Static page URL Ghost

2.  Download the Casper Theme (Link)

Casper is the default theme for Ghost. We will edit the Casper theme to embed the contact form. However, you may use any theme that you like. The steps will be the same

3. Create a Page Template

Go to the theme root directory and create a new page template. Name the page template page-contact-us.hbs. Take note that the name of our page template  is page-{static page url}

Every page template in ghost starts with the prefix “page-“. To know more about page template visit this link

4. Edit the page-contact-us.hbs file

Now that you have created a new template, simply copy the code from your theme’s page.hbs file and paste it into your new page template.

5.  Insert the Contact Form Embed Code.

Create a Contact form using SpiceForms and copy the form embed Code. In case you are new to SpiceForms then refer to this tutorial. Now insert the contact form embed code after the post content section. Refer to the following snippet

<section class="post-content">
		  {{content}}
 </section>

<!--Add Contact Form Embed Code Here-->

6.  Upload the Theme to your Ghost Blog

Now simply zip the theme and upload it to your Ghost (Pro) blog. Here are the detailed instructions.

7.  View the Contact Form

Now visit the Page http://yoursite.com/contact-us and you will see the contact form on your webpage. Here is a screenshot for reference.

Ghost Blog Contact Form

Conclusion

Adding a contact form (or any form for that matter) is quite easy. You don’t need any advanced programming knowledge. I hope our users will find this tutorial useful.

About Ankit

Founder of Spice Forms.
Spice Form is a Drag n Drop tool to create powerful web forms in minutes.

Speak Your Mind

*