How to Setup a Contact Form to Your Ghost Blog

 is a free and open source blogging platform written in and it powers an incredible range of websites; from individual bloggers who are just getting started, to large teams of writers and editors at some of the largest organisations in the world. Currently running on Ghost including Getform's Blog that you are currently reading!We know that setting up a contact form on your website site is a way for your audience to get in touch with you directly while they are enjoying your posts. In this tutorial we’ll show you how to create a Ghost blog, adding a customized theme and add a custom contact form directly into your Ghost theme using Getform.Lastly to provide more control of where the form can be added, we're going to take this one step further by  which will allow all authors of your site to add a form to any page using a single drop-down menu on your customized theme.

How to Create a Ghost Contact Form

1. Setting up your Ghost Site

As first step, we will install the Ghost-CLI, which is a command line tool to help you get Ghost installed and configured for use, quickly and easily.then we will install Ghost. In your terminal, cd into an empty directory and run the install command:

Once the install is finished you'll be able to access your new site on

//localhost:2368

 and 

//localhost:2368/ghost

 to access Ghost Admin. It will come with a default Ghost theme called . The admin will look like below:

You can also refer to Ghost's Official Docs for more installation detail .

2. Creating a custom page template
With our Ghost site created and running, we can now start creating a custom post template.

• Create a new file at the root of your theme called 

  custom-page-with-getform.hbs

   and open it in your favorite code editor. We will be using this template for our reusable contact form setup.

• Within the new custom page template file add the following code:

{{!< page}}
{{#contentFor "form-area"}}
  <!-- form here -->
{{/contentFor}}

The line 

{{!< page}} 

will take the original 

page.hbs

 template in the theme and insert everything below it into the page template.

3. Define a content block

In order for the code in our new custom template to be inserted in the right place we need to define a content block. A content block can be defined using the 

{{#contentFor "example"}}...{{/contentFor}}

 helper, as shown in the code sample above.

Open the page.hbs template in your code editor and locate a place in which you want the form to appear and add the following:

Since the block has been referenced anything between the 

{{#contentFor "form-area"}}...{{/contentFor}}

 block helper will be inserted wherever the code has been placed at.

4. Create your Ghost contact form using Getform

Getform is a form backend service for static sites and blogs. You can  or login with your existing account to Getform.

After you login to your account, Click to “+” button on your forms dashboard page to create a new form then name it e.g. “Ghost Blog Contact Form" and copy the unique form endpoint that belongs to the form you have just created. With that unique form endpoint add the code block below between the “contentFor” block:

• Note that unique form endpoint you have created from Getform is placed to the 

  action

   attribute of the form tag.
• If you would like to accept file attachments to your form, you should also add 

  enctype='multipart/form-data'

   attribute to your form tag as well as the file input. You can check more setup details .
  

5. Styling your contact form

Next we need to add some style and layout to our form. Depending on your theme, you might already have some default styles for form elements. If you're using Casper, like in this tutorial, you can use the following CSS:Optionally you can use one of default Getform form templates listed .

6. Uploading your customized theme with contact form

Next step is to save your theme changes and  via the Design view in Ghost admin. To upload a theme to your publication;

• First, go to the directory where your theme is placed, it should be under

  /content/themes/casper 

  and zip the whole directory.
• Go the “Design” settings in Ghost admin and click the “Upload a theme” button. Once uploaded, click “Activate” to activate the theme on the site.

Next, create a new page called “Contact” and use the Template select option at the bottom of the page settings to select the template “Page With Form”.Hit publish and navigate to the page on your site to see the form in action.After you fill the fields and submit it, here is how your form data will look like on your Getform dashboard.That's it! You have setup a contact form on your customized Ghost Theme.

Improving User Experience

The Getform Thank You Page will be shown to your form submitters by default, but you can change it to one you'd like by .After you finish the setup, based on your needs you can also s, use our  to send your form submission data to 100s of other applications and keep your form submissions spam protected by using .

Summary

Well done! Not only have you added a contact form to your Ghost, which will allow you to make direct contact with your site's visitors, but you’ve also used advanced Handlebars theme logic to add a feature while keeping the code changes low.Getform will handle the contact form submissions on your Ghost site, all with just a few lines of code. It is more flexible and robust solution than what you might get from a form plugin.

BONUS: If you would like to check out the Ghost themes, you can visit the themes section from here:  and select your preferred one.

Additional Resources

• Getform Form Samples -
• Getform Documentation -
• Ghost Blog Documentation -
• Ghost Theme Marketplace -  

Previously published at //blog.getform.io/how-to-add-a-contact-form-to-your-ghost-blog/