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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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.