Static Contact Form Using Parse And Mailgun

Posted on 20 Jan 2014

A contact form doesn’t seem like all that much. Usually, I’d have it submit to a script that would email whomever the ‘admin’ for the site is, and done. But since this site is hosted on Github Pages, a static server, things get a bit more interesting. Now, before we go on couldn’t we go the route of just including a contact email address on the page? Well, sure. But putting a bare email on the page means it’s easy for spambots to harvest, so we need to somehow obfuscate the email address with Javascript to prevent that. But I’m also creating this site as a tutorial to myself on how to do neat things with static sites, in hopes of using it elsewhere for future clients, which generally like to have a contact form. Luckily, someone else has already done most of the legwork of setting up a static contact form for me, showing how to use Parse and Mailgun to deliver contact form data directly to an email address. Check out this great tutorial on Raymond Camden’s site for the tutorial: Building a Contact Form with Parse and Mailgun. With this method, we could have additional form data, such as the type of question a user is asking, in order to route emails to different email addresses, rather than letting the user decide from a list of addresses. This also prevents users from ever emailing you directly (unless you respond to them, of course!), which can be quite useful in controlling email flow.

I’ve used in the past with a static website in order to collect form data. It’s basically an API on top of a NoSQL DB, which is a good and bad thing. It’s not something you’d want to collect mission critical data in, but it has its uses, to be sure. One of the sticking points, for me, with Parse is that it’s easy to screw yourself up. Most databases offer some way to ‘dump’ the data stored there, allowing for archiving and backing up the data. Parse sort of allows that. If you go to the ‘Settings’ tab they have an “Export Data” button, but that emails you a link to a dump of the data. I understand this from their point of view - they can queue up the dump and run it on their own time instead of trying to load it on-demand. But emailing it to me makes it much harder for me to do automated backups of this data. And considering the schema-less nature of NoSQL, and that I can write to it via Javascript, it makes my data a bit vulnerable to corruption. Trust me on this, I know from experience… Manually cleaning up NoSQL data that gets munged is no fun at all.

But it’s free! (if you are under the monthly data limits for both services). And free is hard to argue with. Just by adding the Parse JS files to the page, I can now create an object out of the form values and ship them off the Parse with little fuss. Adding Parse’s ‘Cloud Code’ and using the Mailgun module, we can now send an email to any address we want for free! The Cloud Code script gets loaded in the background when a request is sent to Parse, so we don’t have to expose any Mailgun data to the client, and we don’t need a separate hosting platform just to send it off. This is all quite amazing, especially considering the price paid.

One part that Raymond Camden doesn’t cover in his tutorial is the email address that the form is delivered to. Mailgun can be configured to route/forward email to any address that you want, so you could, for instance, forward it to your Gmail account, or any other email address that you have set up. I like that idea as it makes it very easy to have an ‘alias’ email account for a project site which forwards to your main email address. But for a third party project site I think it’s best to set up a ‘real’ email address that could easily expand in the future. Google has its Apps for businesses, but there is no longer any free tier, so you’d either have to forward to a personal account or start paying for services right off. Since we’re already getting our site and contact form/email for free, I decided to look for a free option - at least at a small business/personal site level.

There are a number of free email providers that allow for a custom domain, but I decided to give Zoho Mail a go. They offer a suite of products not entirely dissimilar from Google Apps, but the key here is that their mail service has a free tier - currently 5 email addresses with 5GB storage per user on a single domain. This isn’t an ‘enterprise’ solution, but again, given the price, who can argue? Their web interface offers a very Gmail-like interface and I was able to easily set up Mailgun to forward my emails directly to my Zoho account. A quick review of their settings and now I have my custom domain hosting a Parse form which delivers emails via Mailgun to my Zoho account in my OSX Mail app - all for free. Now if I can figure out how to host a Stripe Checkout widget without a third-party source, there will be no stopping me!

Comments