How I implemented a “Contact Me” form on a static website using Hasura and SendGrid
Finally, I have almost completed redesigning my portfolio using React, and now the only thing remaining is to create a nice interface for the visitor to directly ping me from the site itself without opening his mail client or anything else.
Now that would have been a fairly easy task if the site would have been hosted the traditional way. But I don’t wanna pay either for a domain name or for the hosting services. I am using Github pages, and for the previous version of my portfolio I was using an embedded Google form, but it felt like it had just been hastily hacked together. Neither was it a good experience, nor was it a long term solution.
So I started looking for something better which won’t disrupt the theme or the feel of my site. I went through some other options available:
- Typeform
- Formspree
- Hasura’s notify API (with Hasura test provider)
- Hasura’s notify API (with SparkPost)
- Serverless
- mailthis.to
- My own solution 😁
Let’s discuss them in detail below!
Typeform
It is great tool for creating forms that feel natural and intuitive. Also there are a ton of customization options available, which means they can easily blend into your site. But the major drawback was that there’s no simple way to include a Typeform in React. They do have a library, but it doesn’t feel enough.
In widget mode the form would just get rendered at the top of my site instead of the location at which it is supposed to be. In popup mode, the form blocks all the clicks till 100vh starting from the top of my site. And I just wasn’t able to fix it.
Formspree
Using it exposed my email address in the source code ¯\_(ツ)_/¯
Hasura’s Notify API
For using Sparkpost, though it isn’t exactly mentioned in their docs, or maybe it is but I just couldn’t find it, you need to own a domain (ー_ー)!!
As far as Hasura test provider is concerned, I tried it using API Console, Postman and also a Flask server running locally; tried various configurations and everything, but it just won’t work. 😫
Serverless
Requires AWS, GCP, Azure or OpenWhisk; and each one of them requires a credit or debit card to verify my identity, and being a student, my parents simply won’t allow me (╬ ಠ益ಠ)
MailThis.to
This service is almost exactly what I have implemented!
They have aliases so my email address won’t be exposed, and they have a nice simple API, which makes it very easy to use directly, without deploying any code anywhere! And it also uses SendGrid behind the scenes to send mails!
So the big question: Why didn’t I use it? 🤔
- Firstly, all accounts are limited to 1000 mails (not that I have many people visiting my site right now, but still), and there’s no mention of whether it’s a monthly limit or it’s an absolute limit.
- Secondly, it simply won’t work! I tried the sample form on the site, used Postman, both with and without aliases, but it just refused to work. 😪
Time to discuss my own solution 😄
So I used SendGrid and a small Python server to expose a simple API for sending mails to my Gmail account!
You can also use any other server-side language you are comfortable in.
First get a free SendGrid account, then use the SDK (if available in the language of your choice) and write a server which exposes an endpoint to accept a POST request and send an email to your address.
Finally, host it using the platform of your choice (Hasura, Heroku, Glitch (for JavaScript only), etc…)
Now you can style your form in React as you want.
Also, if you simply want to host the API on Hasura without doing most of the hard-work, the boilerplate code is available on the hub. After cloning the project, just get an API key from SendGrid, add it as a secret,add your name and email address at the relevant locations in the code and then just git push hasura master and you are good to go! For detailed instructions head over to the Github repo or the project page on Hasura Hub.
