July 6, 2014

Sending Emails from Static Websites Using Parse

sending-emails-from-static-websites-using-parse
 

When I first created Matt Black Design, I decided to create a simple static website, with a wordpress blog, as it would not be needing very much dynamic content. It was an easy process, but I was faced with a substantial problem which I didn’t think about in advance: how do I create a contact form, without any back end processing? Oh Snap!

I searched around the internet for several days, and eventually I ran across “Parse” (a backend service for developers). Parse has a service called “Cloud Code” which turned out to be exactly what I needed.

Getting Setup with Parse

After you’ve registered for an account on www.parse.com, install the Parse command line tools.

Once installed, locate the folder with your Javascript Files, and run the following in terminal:

$ parse new emailSender

This creates a new folder called emailSender with the following files

config/global.json
cloud/main.js
public/index.html

You can go ahead and remove the public folder (you won’t  be needing that).

Building your contact form

You can begin by creating your contact form. In my example, I have three inputs. A message sent from a user, along with a name and email.

test

This is a simple HTML form, which is contained within the ID: commentForm (we will need to remember this for later). I have also included a div with the ID: response, which we will use to alert the user whether the email submission was successful.

As you can see at the bottom, we are also using two libraries. The usual jQuery and the minified version of the Parse JavaScript SDK.

Time to write some cloud code

The step is to sign up for an account at www.mailgun.com. After that, you will need to find your MailGun API Key, as well as your MailGun Domain Name (which should end with  .mailgun.org).

The next step is to write the code that will be hosted on parse.com which will actually run our sendEmail application.

First, open up main.js (located in your cloud folder inside your apps directory) and replace the code inside with the following.

 

 

You will need to change the var API, and the var Domain to the API Key and Domain name given by MailGun.

You will also need to replace MattBlackDesign.com with your own website, and replace my email (mblackmblackmblack@gmail.com) with your own email in the Mailgun.sendEmail method.

 Deploying your Cloud code

The next step is to deploy our code to Parse.

First you will need to cd into your app directory (emailSender).
Then, you simply need to run the following command:

$ parse deploy

This will upload the main.js to Parse, so we can use it later.

The Final Step

You’ve created your html form, and uploaded main.js to Parse. Now all that is left, is to link it all together.

Navigate to the directory where you keep all your JavaScript files for your site, and create a new file called emailer.js with the following code.

 

 

Note: You will need to replace var parseAPPID and var parseJSID, with your Parse App ID Key, and Javascript ID, which can be found in the settings tab of your emailSender Parse App.

Voila, you’ve created yourself a Static Webpage Contact Form which sends user comments right to your inbox.

I’d love to know if this helped you out, or if you have any questions. So please leave a comment below.

Share this Post
Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrPin on PinterestShare on Reddit

  • Matthew Black

    I’ve recently learned that it is possible to do essentially the same thing with Mandrillapp and jQuery. Will check this out.

  • Raj Vansia

    great works like a charm perfect for hosting a free site