We Are Hiring

Send Email from Static Websites Using Parse


Posted on

I recently moved a bunch of PHP sites to Jekyll-generated static websites that are hosted from different buckets on Amazon S3. It was a great process, but I was faced with one problem that I didn’t think about in advance: how do I make the contact forms work without having any back end processing? DOH!

I could do it in straight client side JavaScript but that would be all kinds of meh, and not really the developer experience, or user experience I was looking for. I needed something more powerful.

We’re big fans of Parse here at SendGrid, but up to this point I hadn’t built anything with their service. Turns out, their Cloud Code service was exactly what I needed to solve this problem.

Get Set Up on Parse

After registering an account, install the Parse command line tools so you can generate and deploy code to the Parse Cloud Code platform.

Once installed, go to the folder you keep your JavaScript files in and run the following:

$ parse new emailer

This will create a new folder called “emailer” in your folder. The contents look like:

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

You can delete the “public” directory, you don’t need it. The “cloud” directory holds all the files you want to deploy to Parse and “config” contains some settings that make sure it gets deployed to the right place.

Build Your Form

Start by building the form you want to use on the site. In this example, we just want to have messages sent from users along with their name and email address.

As you can see, it’s a simple HTML form. I’ve included a div element that’s hidden using CSS that will display success/error messages back to the user.

We’re also requiring two libraries, jQuery and the minified version of the Parse JavaScript SDK. Only the Parse SDK is 100% necessary for sending emails from static sites. I included jQuery for ease (lazy!), but you could exclude it if you want as it’s not required by Parse.

Write Some Cloud Code

The next step is to write the code that actually sends the email. This will be what we host on Parse Cloud Code.

Parse has a SendGrid module that you can work with. The code for this example is derived from the code in Parse’s SendGrid documentation.

You need to write this code inside main.js, which would have been created earlier when you ran parse new emailer.

Our code looks like this:

Above we’re defining a function called ‘sendEmail’ that takes a name, email, and message out of the parameters we’ll pass to it and then sends them off via email using the SendGrid Cloud Module. It passes success/error messages back as a response object.

Deploy Your Cloud Code

Once you’re happy with your code, you can deploy it to Parse Cloud Code by running the following command:

parse deploy

This will upload main.js so it can be accessed from the final piece of the puzzle…

Bringing it All Together

You’ve got your form ready and your email sending code has been deployed to Parse. There’s only one thing left to do, and that’s make everything talk to each other.

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

Key things to note here are:

  • Line 4: You will need to initialise Parse with the keys for the app you created. You can find them inside your Parse dashboard under the Settings > Application keys.
  • Line 12: Creates the “data” object with the details from the form.
  • Line 20: Calls ‘sendEmail’ on Parse and passes the ‘data’ object from line 12 to it.

Remember, you can place your form and emailer.js wherever suits you best. It’s the same as if you were working with any other HTML and JavaScript. As long as you’ve got the Parse JavaScript SDK included in your header (see contact.html example above), you’re good to go.


Martyn Davies is a Developer Evangelist at SendGrid and a creative developer based in London. He has worked in technology for over 14 years with a background in both the music industry and technology. A serial hackathon organiser, mentor and startup advisor, you’ll find him presenting, demoing, hacking and chatting at hack days, conferences and meetups in the UK & Europe on a regular basis.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>