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! Ghost JavaScript more than 2 million websites 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. creating a custom post template 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. npm install ghost-cli@latest -g then we will install Ghost. In your terminal, cd into an empty directory and run the install command: ghost install local Once the install is finished you'll be able to access your new site on and to access Ghost Admin. It will come with a default Ghost theme called . The admin will look like below: http://localhost:2368 http://localhost:2368/ghost Casper You can also refer to Ghost's Official Docs for more installation detail . here With our Ghost site created and running, we can now start creating a custom post template. 2. Creating a custom page template Create a new file at the root of your theme called and open it in your favorite code editor. We will be using this template for our reusable contact form setup. custom-page-with-getform.hbs Within the new custom page template file add the following code: {{! {{/contentFor}} page contentFor form-area -- form here -- The line will take the original template in the theme and insert everything below it into the page template. {{!< page}} page.hbs 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 helper, as shown in the code sample above. {{#contentFor "example"}}...{{/contentFor}} 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: {{{block }}} "form-area" Since the block has been referenced anything between the block helper will be inserted wherever the code has been placed at. {{#contentFor "form-area"}}...{{/contentFor}} 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. sign up 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: Name Email Address Your Message form class "contact-form" action "https://getform.io/f/9de64cfa-0a4a-4fd2-b385-687e2059cae6" method "POST> label input type "text" name "name" id "full-name" placeholder "First and Last" required label for "email-address" label input type "email" name "_replyto" id "email-address" placeholder "Your email address" required label for "message" label textarea rows "5" name "message" id "message" placeholder "Your message" required textarea input type "submit" value "Submit" form Note that unique form endpoint you have created from Getform is placed to the attribute of the form tag. action If you would like to accept file attachments to your form, you should also add attribute to your form tag as well as the file input. You can check more setup details . enctype='multipart/form-data' here 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: { : grid; : fr fr; : ; } , { : ; : ; : ; : -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; : ; } , { : solid ; : - ; } , { : - ; } { : ; : ; } , { : span ; } { : ; : end; : ; : ; : white; : auto; } .contact-form display grid-template-columns 1 1 grid-gap 0.2em 1em .contact-form input .contact-form textarea width 100% padding 0.4em 0.6em 0.5em color #111 font-family font-size 0.95em .contact-form input :focus .contact-form textarea :focus outline 1px #3eb0ef outline-offset 1px .contact-form label [for="full-name"] .contact-form label [for="email-address"] order 1 .contact-form input order 0 margin-bottom 0.6em .contact-form label [for="message"] .contact-form textarea grid-column-end 2 .contact-form input [type="submit"] grid-column-start 2 justify-self margin-top 0.6em background #3eb0ef color width Optionally you can use one of default Getform form templates listed . here 6. Uploading your customized theme with contact form Next step is to save your theme changes and via the Design view in Ghost admin. upload your theme To upload a theme to your publication; First, go to the directory where your theme is placed, it should be under and zip the whole directory. /content/themes/casper 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 . upgrading your account to Pro plans 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 . et up an email notification from form settings Zapier integration reCaptcha integration 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. : If you would like to check out the Ghost themes, you can visit the themes section from here: and select your preferred one. BONUS https://ghost.org/marketplace/ Additional Resources Getform Form Samples - https://codepen.io/getform Getform Documentation - https://getform.io/docs Ghost Blog Documentation - https://ghost.org/docs/setup/ Ghost Theme Marketplace - https://ghost.org/marketplace/ Previously published at https://blog.getform.io/how-to-add-a-contact-form-to-your-ghost-blog/