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!
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.
$ parse new emailer
This will create a new folder called “emailer” in your folder. The contents look like:
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.
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.
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:
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.
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.