Building forms with Ghost and Formzillion

Ghost is a versatile and user-friendly, open-source CMS built for bloggers and content creators, offering a distraction-free writing experience and customizable themes. With built-in SEO tools and membership features, it allows you to publish, monetize, and share your content effortlessly.

Now, let’s explore the process of connecting your Ghost site with Formzillion to effortlessly receive form submissions. In this tutorial, we will focus on crafting a Contact form featuring essential fields such as name, email, and message. However, you have the flexibility to create any type of form you desire, whether it’s a support form, lead intake form, or subscriber form. Feel free to include as many fields as you need to fulfill your specific requirements.

How to create a Ghost Contact Form

Step 1 — Create new form endpoint on Formzillion

Sign in to your Formzillion account and create a new form with name Ghost Contact Form or a similar identifier. Formzillion will assign a unique form ID specifically for identifying your Ghost form.

Step 2 — Create your Ghost contact form

Sign in to your Ghost dashboard or you can create your own Ghost site in local using below steps.

Ghost-CLI is a commandline tool to help you get Ghost installed and configured for use, quickly and easily. To initiate the project setup, let’s follow the instructions provided in the Ghost Getting Started documentation. Open your terminal and execute the following command to create a new site:

Install Ghost-CLI

Once installed, you can always run ghost help to see a list of available commands.

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 http://localhost:2368 and http://localhost:2368/ghost to access Ghost Admin. It will come with a default Ghost theme. The admin will look like below:

Step 3 — Creating a custom page template

1. In the sidebar select pages & click on New Page.
   
2. Add Contact Us title to your page and click on icon to add an HTML code
   
3. Add Your Form inside the HTML block.
   

   To preview your page, simply click on the Preview option located at the top right corner. Additionally, you have the flexibility to apply your own styling to the form or directly copy the provided code below.

   Copy

4. Now click on Publish.

   Boom. It’s out there. Your page has been published.

   

To successfully submit your form to Formzillion, ensure that you include the 'FORM_ID' in the provided form code. This 'FORM_ID' should correspond to the ID assigned to your specific Formzillion form.

And there you have it! Once you fill out and submit the form, you will be able to view the default submission thank you page.

Congratulations! Your Ghost site now has the contact form powered by Formzillion!