How to add a Contact Form to Angsty Theme

Angsty supports a beautiful contact form that sanitises your client's details prior to sending the form. It's quick and easy to use.

Unfortunately though, installation isn't as simple as just installing the theme. There are couple of good reasons for this. To get a proper working theme with a Contact form in Ghost right now you need to edit Core files. Obviously we can't do that when installing a theme. Instead I've written my own deployable application that utilises the Mailgun API to send emails back to my email address from the contact form.

I've written a blog post on how to get up and running with this so you should be able to follow those instructions. This does not unfortunately work with Ghost(Pro) accounts because Ghost(Pro) accounts don't allow you to deploy your own applications.

Why did I do it this way?

My solution has a bunch of benefits doing it this way:

  • You can happily upgrade Ghost and it'll still work because no core files are touched -- this is good practise
  • You're not tied in specifically to a particular vendor like with other solutions because the contact form is all your own -- this is also good practise
  • It's free!

However, please be rest assured that it's only this way because we're waiting for the apps to become available and become a bit more mature. Once that's the case I'm determined to write a completely separate Ghost app that will replace it.

What if I don't want the contact form?

If you don't want the contact form you need to do a couple of things in the theme.

  • Remove the contact menu selection from assets/partials/navbar.hbs. You do this simply by commenting out the following lines:
<li role="presentation">  
    <a href="{{@blog.url}}/contact">
        <span class="glyphicon glyphicon-earphone nav-glyph"></span> CONTACT
    </a>
</li>  
  • You also need to correct the navbar.js file. Replace (or delete) the lines:
  } else if (currentPage === 'contact') {
    $('.nav-pills li:nth-child(3)').addClass('active');

With

//   } else if (currentPage === 'contact') {
//    $('.nav-pills li:nth-child(3)').addClass('active');
  • Replace this line
$('.nav-pills li:nth-child(4)').addClass('active');

With this

$('.nav-pills li:nth-child(3)').addClass('active');

This will basically mean when you select the About page the active navigation will stay on the About page otherwise the navbar stuff might not work correctly.

Unfortunately this isn't quite it just yet. To speed up the theme I minify the js for all javascript files. Why do we do this? Basically, every time the site is requested your browser needs to download all of the javascript files so by minifying them we're basically compressing their size and making them quick to download without affecting how the work. They aren't easy to work with minified which is why I didn't suggest altering it directly.

To update the minified version copy the file contents of the assets/js/navbar.js file you just edited above and paste the contents into the dialog box on the jscompress site. Click Compress Javascript wait for it to be compressed then copy the compressed javascript and replace the contents of the file assets/js/min/navbar.min.js. Save and reload the site to see the changes.

If you have any questions please definitely contact me. You can even use my contact form.

Happy hacking!

comments powered by Disqus