How To Setup A Contact Form On Ghost

Ok, you've got your ghost blog setup, you're making lots of posts, and things are going fine. Maybe your blog is about some part of software development. You could be writing posts about .NET, or Ruby On Rails, and getting all kinds of traffic.

What if some of your readers are in a position to hire you?

Wouldn't it be nice if they could just fill out a form to contact you? Yes, yes it would. :)

Ok, let's make a contact form!

First thing you want to do is create a new post, which you do at yourdomain.com/ghost. Once you're there, click on that little gear icon in the upper right next to "save draft".

In the settings dialog that slides open, check "Turn this into a static page".

Now put in the following markup:

<form  
    action="//formspree.io/myemail@somedomain.com" 
    method="POST">  
    <input
        type="text"
        name="_gotcha"
        style="display:none"/>
    <input
        type="text"
        name="name"
        placeholder="name"
        style="display: block; margin-bottom: 2%;">
    <input
        type="text"
        name="_replyto"
        placeholder="email"
        style="display: block; margin-bottom: 2%;"/>
    <textarea
        name="name"
        placeholder="message"
        rows=8
        style="
            resize: none;
            display: block;
            margin-bottom: 2%;
            width: 100%">
    </textarea>
    <input type="submit" value="Contact">
    <input
        type="hidden"
        name="_subject"
        value="Blog Contact" />
    <input
        type="hidden"
        name="_next"
        value="thanks/" />
</form>  

You'll need to replace myemail@somedomain.com with whatever email you want people to use with this, and you'll need to create another static page with the url thanks.

(You can make sure the url is what you want by checking the post settings and looking at the 'Post URL' field.)

Go ahead and publish that page, fill out the form yourself, and submit. You should get an email asking you to confirm your email with formspree.

You now have a working form! Now all we need to do is tell people about it. Go back to yourdomain.com/ghost and click on 'Code Injection' on the left. Paste the following code in the footer:

<h1 style="  
           text-align: center;
           width: 50%;
           margin-bottom: 5%;
           margin-top: 2%;
           margin-right: auto;
           margin-left: auto;
           padding-bottom: 1%;
           padding-top: 1%;
           color: rgba(0,0,0,0.8);
           border-style: solid;
           border-width: 3px;
           border-color: #BFC8CD;
           border-radius: 12px;">
    <a style="text-decoration: none;"
       href='yourdomain.com/contact/'>
        Contact
    </a>
</h1>  

You'll probably have to monkey around with the CSS to make things look the way you want, but this is a perfectly serviceable call to action link.

If you like, you can also add your contact page to your navigation menu via (you guessed it!) the navigation link on the left-hand side of your editor page.

BTW, you might be wondering if this is all that different that just posting your email address on your blog. After all, people can still view the page source, grab your email, and spam you.

Well...

Their is another, more private, and more complicated way to make a contact form. One that hides your email address. Expect another post about that very soon. :)

Looking for a software developer?