How to create a contact form for Ghost CMS, and what are the best tools for the job?
Creating a contact form for your Ghost blog is essential for connecting with your audience. While Ghost doesn’t have built-in contact form functionality, you can use several reliable third-party services and custom solutions. Here are five contact form options for Ghost, along with instructions on how to implement them:
Best Tools For Creating Ghost CMS Contact Form:
1. Formspree
Formspree is a user-friendly solution for adding contact forms to Ghost CMS websites. It simplifies the process of collecting feedback, inquiries, or any form submissions without the need for server-side code. When you create a form with Formspree, it automatically configures your form to forward submissions directly to your email, making it an ideal tool for bloggers, portfolio websites, and small businesses seeking a straightforward way to connect with their audience.
Integration with Ghost is seamless. By embedding a custom HTML form into your Ghost page or post and setting the action attribute to your unique Formspree endpoint, you enable instant, secure form submissions. This ease of setup, combined with Formspree’s spam filters and the ability to customize the form fields to match your site’s design, makes it a highly attractive option for Ghost users. Additionally, Formspree offers a free tier for smaller sites with limited submission needs, with the option to scale up for more extensive features, making it accessible for projects of any size.
How to Use Formspree for Ghost:
- Sign up at Formspree and verify your email address.
- Create a new form in Formspree to get your unique Formspree URL.
- In your Ghost post or page, insert a custom HTML card with your form code, using your Formspree URL in the action attribute:
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="_replyto" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message" required></textarea>
<button type="submit">Send</button>
</form>
2. Netlify Forms
Netlify Forms represents an incredibly efficient and developer-friendly method for integrating contact forms into Ghost CMS, particularly for sites hosted on the Netlify platform. This service automates the form handling process, offering a seamless solution for collecting submissions without additional backend code or complex configurations. What makes Netlify Forms stand out is its native integration within the Netlify ecosystem, providing a straightforward path for developers and content creators to implement robust forms directly into their Ghost sites.
By simply adding a few data attributes to your HTML form and ensuring your site is deployed on Netlify, you activate Netlify’s form detection and handling capabilities. This integration allows for real-time submission tracking, spam filtering, and even complex workflows like automated notifications or integration with other tools via webhooks, all manageable from the Netlify dashboard. The service is designed to be incredibly flexible, supporting everything from simple contact forms to more complex survey tools or event registrations, making it a versatile choice for Ghost users.
Moreover, Netlify Forms comes with a generous free tier, making it accessible for personal projects, blogs, and small businesses, while also offering scalable solutions for larger or more demanding projects. This balance of ease of use, functionality, and cost-effectiveness makes Netlify Forms an excellent option for Ghost CMS users looking to add interactive elements to their sites without compromising on performance or security.
How to Use Netlify Forms for Ghost:
- Ensure your Ghost site is deployed on Netlify.
- Add a form to your Ghost page or post using an HTML card, including a
nameattribute in your form tag:
<form name="contact-form" method="POST" data-netlify="true">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message" required></textarea>
<button type="submit">Send</button>
</form>
- Netlify automatically detects the form when you push your changes.
3. Google Forms
Google Forms offers a straightforward, versatile solution for integrating forms into Ghost CMS websites. Renowned for its user-friendly interface and robust functionality, Google Forms allows you to create custom forms for surveys, contact pages, feedback, registrations, and much more, without any coding knowledge. The real strength of Google Forms lies in its seamless integration capabilities and the comprehensive suite of tools it provides for analyzing responses.
To embed a Google Form into a Ghost site, you simply create your form using Google’s intuitive form builder, which offers various question types, customizable themes, and the ability to add images and videos. Once your form is ready, Google generates an embed code that you can insert directly into an HTML card in your Ghost editor. This process makes it incredibly easy to incorporate interactive forms into your posts or pages, enhancing the functionality of your site and engaging with your audience more effectively.
An added advantage of using Google Forms is integrating with other Google Workspace tools. Responses to your forms are neatly organized in Google Sheets, allowing for easy data analysis and collaboration with team members. Moreover, Google Forms has built-in AI to predict question types and analyze responses, providing valuable insights that can help improve your engagement strategies. Given its cost-effectiveness (free for personal use and included with Google Workspace for businesses), ease of use, and powerful features, Google Forms is an excellent choice for Ghost CMS users looking to add forms to their websites without complicating the process.
How to Use Google Forms for Ghost:
- Create a form in Google Forms.
- Once your form is ready, click the send button, choose the
< >embed option, and copy the embed code. - Paste the embed code into an HTML card on your Ghost page or post.
4. Basin
Basin is a powerful yet straightforward form backend service designed for static and Jamstack sites. It is an excellent match for Ghost CMS users seeking to integrate contact forms without the hassle of managing a server-side solution. What sets Basin apart is its focus on simplicity and efficiency, allowing users to create and manage forms with minimal setup, while still offering a suite of advanced features for those who need them.
Integrating Basin with Ghost is as simple as signing up for a Basin account, creating a new form to obtain your unique endpoint URL, and then embedding the form into your Ghost site using an HTML card. This process does not require server-side coding, making it accessible for users of all technical levels. Once your form is live, Basin handles the submission process, including spam filtering, auto-responses, and submission analytics, manageable through a user-friendly dashboard.
Basin also supports more complex form functionalities, such as file uploads, AJAX submissions, and webhooks, allowing easy integration with other tools and services. This makes it possible to automate workflows, such as adding subscribers to a mailing list or sending notifications to Slack, directly from your form submissions.
One of the key benefits of using Basin is its affordability. It offers a free tier suitable for smaller sites or projects just getting started, with the option to upgrade to premium plans as your needs grow. These plans include features like custom domains, enhanced spam protection, and increased submission limits.
For Ghost CMS users, Basin provides a reliable, secure, and easy-to-use solution for adding forms to their sites, enhancing their ability to engage with their audience without adding complexity to their site management.
Basin is another simple form backend service that works well with static sites and can be easily integrated into Ghost.
How to Use Basin for Ghost:
- Sign up for Basin and create a new form to get your unique endpoint URL.
- Embed the form in your Ghost site using an HTML card, similar to Formspree, but with your Basin endpoint:
<form action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message" required></textarea>
<button type="submit">Send</button>
</form>
Each option provides a different level of customization and control, from simple form-to-email solutions to more complex, serverless function-based approaches. Depending on your technical comfort level and specific needs, one of these methods should suit your Ghost site perfectly.
How To Create a Contact Form in Ghost Step-by-Step
Creating a contact form page in Ghost CMS involves a few straightforward steps. This guide will walk you through setting up a basic contact form using Formspree as the backend service, as it offers a simple, no-code solution for handling form submissions. Formspree automatically forwards the form submissions to your email, making it an ideal choice for Ghost users.
Step 1: Sign Up for Formspree
- Go to the Formspree website and sign up for an account.
- Once signed up, create a new form. Formspree will provide a unique URL (endpoint) for your form submissions.
Step 2: Create a New Page in Ghost
- Log in to your Ghost admin panel.
- Navigate to the “Pages” section and click on “New Page.”
- Give your page a title, such as “Contact Us.”
Step 3: Add HTML for the Contact Form
- In the Ghost editor, click on the “+” button to add a new block, and select “HTML” from the options.
- Insert the following HTML code for your contact form into the HTML block. Replace
YOUR_FORMSPREE_URLwith the unique URL provided by Formspree:
<form action="https://formspree.io/f/YOUR_FORMSPREE_URL" method="POST">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" placeholder="Your Name" required>
<label for="email">Your Email:</label>
<input type="email" id="email" name="_replyto" placeholder="Your Email" required>
<label for="message">Your Message:</label>
<textarea id="message" name="message" placeholder="Write your message here" required></textarea>
<button type="submit">Send</button>
</form>
- Customize the form fields as needed. The above code includes fields for the user’s name, email, and a message.
Step 4: Style Your Form (Optional)
You can add custom CSS to style your form directly within the Ghost editor or by customizing your theme’s CSS file. Here’s a simple example you can add to an HTML card on the same page as your form:
<style>
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
}
input, textarea {
padding: 8px;
margin-top: 5px;
}
button {
margin-top: 10px;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>If you are looking for more customized forms, we have an outstanding collection of well-designed contact forms you can customize.
Step 5: Publish Your Page
Preview your page after adding and styling your form to ensure everything looks correct. Once satisfied, click on “Publish” to make your contact form page live.
Step 6: Test Your Form
Testing your form to ensure submissions are correctly forwarded to your email is important. Fill out the form on your live site and submit it. Check your email (the one associated with your Formspree account) to see if the submission was successful.
Following these steps, you’ve successfully added a contact form to your Ghost CMS site using Formspree. This method provides a simple way to start receiving messages from your site visitors without needing any server-side setup.
