Contact Forms with Formspree

The beauty of Ghost lies in its clean design and its simplicity. The developers work hard to prevent bloating features to creep in - yet sometimes it can be useful to have a contact form on a blog, to allow readers to get in contact with the authors.

One quick way to add such a contact form to Ghost is to use "Formspree". In its basic form, Formspree is free. In this tutorial we will learn how to add a very basic contact form, powered by Formspree, to a Ghost blog.

The first thing to do, obviously, is to create a new static page. Once the page is created, adding a Formspree contact form is as easy as copying a few lines of code:

<form action="https://formspree.io/your@email.com" method="POST">
  <input type="text" name="name" placeholder="Your name">
  <input type="hidden" name="_subject" value="Your contact with bell0bytes">
  <input type="email" name="_replyto" placeholder="your@email.com">
  <textarea name='message'>Your message.</textarea>
  <input type="submit" value="Send">
  <input type="text" name="_gotcha" style="display:none" />
</form>

It is required to change the "your@email.com" dummy email into your actual email. That is really all that needs to be done to register a form with Formspree - now simply send a test message and Formspree will send a confirmation email. It is almost too easy!

Once the email address is confirmed, Formspree will forward any contact requests to the above indicated email.

Let us just briefly cover the different input fields.

name

This is self-explanatory.

_subject

With this hidden "field" the subject line of the email can be set, which will make replying to emails easier.

_replyto

This field contains the email address of the sender.

message

This contains the actual message.

_gotcha

Even though Formspree uses "reCAPTCHA" to prevent bots from contacting you, it can be useful to add an extra layer of protection: a so-called "honeypot". In this case a "honeypot" field is a hidden "textarea" that normal visitors won't see, thus won't be able to fill with text. A bot, however, might not know that the field is hidden and will fill it with its drivel, which will prompt Formspree to silently ignore the submission.

That's it already. For more information, check out the Formspree website.

Happy contacting!

References

• Formspree
• Wikipedia