Written by: Geoffrey Callaghan

How to add a contact form to your Ghost Blog

How To Add A Contact Form To Your Ghost Blog

To add a contact form to your Ghost blog using Fabform, you’ll need to follow these steps:

  1. Install Fabform: Begin by installing Fabform in your Ghost theme directory. You can do this using npm:

    npm install fabform --save
  2. Create Your Contact Form: In your Ghost theme directory, create a new HTML file for your contact form. You can name it something like contact.hbs. Here’s a basic example:

    <!-- contact.hbs -->
    <form id="contact-form" action="/api/submit-form" 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>
  3. Set Up the Backend: You need a backend to handle form submissions. Similar to the 11ty setup, you can use Vercel’s serverless functions or any backend solution of your choice. Create a directory for your API functions and a function to handle form submissions.

    // api/submit-form.js
    import { createFormEndpoint } from "fabform";
    export default createFormEndpoint({
        // your form configuration
        // This might include email sending, saving to a database, etc.
  4. Configure Your Ghost Theme: Depending on your theme structure, you might need to modify certain files to include your contact form. Typically, you’ll add it to a template file such as page.hbs or post.hbs. Add a link or button to navigate to the contact page, or include the form directly in the template.

  5. Test Your Form: Once everything is set up, test your contact form to ensure it’s working as expected.

  6. Deploy Your Changes: Deploy your Ghost blog with the new contact form. Make sure to include your API functions in the deployment.

Remember to customize the form and backend logic according to your specific requirements.