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.