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
$ parse new emailSender
This creates a new folder called emailSender with the following files
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.
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.
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 (firstname.lastname@example.org) 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.
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.