How To Add A Contact Form To Your Ghost Blog

So, you want to add a contact form to your ghost blog? If you had a Wordpress site, you could just get a plugin. If you had custom php site, you could just make a custom form script. But what do you do for a ghost blog? Adding a ghost form is actually easier than you think.

What you need to do is use FormSpree, which is an external form endpoint. You add a basic html form to a contact page and then point it to formspree.io/your-email-address@gmail.com.

When someone submits the contact form, it gets routed to your email address via formspree.com. This is a free service, and you don't even need to register an account for it to work!

Here's some sample code:

<form action="https://formspree.io/YOUR_EMAIL_ADDRESS_HERE@DOMAIN.COM" method="POST">
  <div class="form-group">
    <label>Name</label>
    <input type="text" name="name" class="ghost-input">
  </div>
  <div class="form-group">
    <label>Email address</label>
    <input type="email" name="_replyto" class="ghost-input">
  </div>
  <div class="form-group">
    <label>Message: </label>
    <textarea type="text" name="message" class="ghost-input"></textarea></div>
  <input type="submit" value="Send" class="ghost-btn">
</form>
<style>
  .form-group:after {
    content: "";
    display: block;
    clear: both;
  }
  .form-group label {
    display: block;
  }
</style>

Remember, Ghost can parse both markdown and HTML. So if you add the above html to a page on your ghost blog, .e.g, /contact/.

Don't forget to add your email address to the form action="https://formspree.io/your-email-here".

What The Form Looks Like

We can style the form appropriately by making sure to add the classes ghost-input to the input fields.

�