Product Dev Back to Ghost

Adding a contact form to your Ghost blog

Looking to add a simple contact form to your Ghost blog? The following guide will walk you through how to add an embedded form to your blog. Although this guide uses 123ContactForm.com specifically, there are several other embedded form solutions available, all of which can be integrated in the same way.

Log in to your Ghost blog

First, log in to your ghost blog with your admin user credentials.

Create a static page

If you plan to have your contact form on a "Contact" page, you'll need to first create a static page on your blog to house the form. To do this,

  • Click on "New Post" from the top of your admin navigation menu
  • Provide a title for your page
  • Edit the post settings of your page by clicking on the "gear" icon next to the "Save draft" button and check "Static page"
  • Publish your static page

Make a note of what your static page's URL is. For example, if my contact page is called "Contact Me," the page URL would be /contact-me/. You will need to use this page URL in a later step.

Note:Need help creating a static page? Checkout our guide on How to publish a static page for step-by-step instruction.

Create a custom page template

Now that we've created a static page, we'll need to create a custom page template inside our theme. To do this, first create a new file within your theme's root directory. Page templates must always start out with 'page-' and then include the page URL after the hyphen. So, for example: If you have a contact page with a page URL of "contact" your page template name would be "page-contact.hbs"

Create page template

Copy the code from your page.hbs file

Once you've created your page template you'll need add some code to it. Copy the code from your theme's page.hbs file and paste it into your new page template. When you're finished, save the page template file. We will access this template file again once we've created our form.

Copy page code

Create an account with 123ContactForm.com

Next, create an account with 123ContactForm.com.

Select a form type

Once you've created your account with 123ContactForm, you will need to select a new form type to create.

Select form type

Note:For the purpose of this guide, we will only be covering how to implement a Contact & Lead Form

Name your form

Next, give your form a name and click on the "Ok" button to continue.

Create form name

Customize your form

After you've named your form, you will be directed to a page where you can customize the fields of your form. For information on the different types of input fields you can add to your form, please reference 123ContactForm.com's knowledge base, specifically their documentation on basic fields.

Customize form

When you've finished working on your form, click the green "Continue" button to setup your form's email notifications.

Setup email notifications

If you would like your form notifications to go to a different email address than the one you created your 123ContactForm account with, you will need to update the notification emails on the "Form Settings" screen, within the "Notifications" section. You can add notification emails by clicking on the blue "Add Notification Email" button.

Email notifications

If you're satisfied with the notification emails associated with your form, click the green "Continue" button to grab your form's embed code.

Access the form embed code

Once you've established a notification email, you'll be taken to the "Publish Form" screen. From here you'll need to click on "Embed Code" from the list of links on the left of the screen.

Click embed code

Copy the javascript embed code

On the "Embed Code" tab, you will want to highlight and copy the javascript embed code. This embed code will need to be pasted into the page template we created earlier.

Paste page code

Paste the embed code into your page template

Depending on where you'd like your form to appear on your contact page, you'll want either paste the form embed code before or after the {{content}}. How you format this page is completely up to you. If you're using the default Ghost theme, Casper, and you'd like the form to display AFTER your contact page content, you would paste your form code after the bit of code that looks similar to this:


<section class="post-content">
       {{content}}
</section>
<-- add embed code here -->

Note:If your theme comes with a pre-built navigation menu, you will need to update/add a link to the static page that contains your contact form. If you need help doing this, checkout our article on how to change your navigation menu for details.

Save your page template

Once you've placed your embed code into the contact page template, save your template file.

Upload the theme to your Ghost blog

Once saved, upload the theme to your blog. Now, when you view your contact page you should see your contact form.

Using Ghost(Pro)?
To upload your theme, you’ll need to access your blog’s settings on Ghost.org. If you need help, checkout How to upload a theme to your Ghost(Pro) blog or contact us at [email protected] for additional Ghost(Pro) support.