• 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.