I’ve always favoured static websites and recommended them as a first choice solution to others. For personal websites, blogs, and even catalogues — it’s perfect. You create a website with one of the many build systems available out there, throw your files on some CDN and voilà! You’ve got yourself a high performance, high availability website. Often for free.
This is how I pull it off for free, too: I host the source code at Github and create a build pipeline posting the result to Github Pages. After that I set up the domain name at Cloudflare DNS, and throw in their CDN abilities and a couple of cache headers. Free tiers galore.
The only missing ingredient that required a server was the contact form. I’ve tried several solutions until I found one that works well for me, and is free as well.
At first I tried sending a webhook to IFTTT. But they do not support CORS headers, so it didn’t work. Then I started sending submissions to Google Forms and set up notifications there. The input names needed to use unreadable idebtifiers, but I was well on board, only while Google do process the request and insert the entry, they do not respond with a success message — so user feedback is was not possible and a false positive would go unnoticed.
Finally I tried Zapier. It allows CORS messaging so form sending can be interactive and relay actual feedback to users. I’m going to describe exactly how to accomplish this.
First build a contact form. I won’t get into form building, verification or sending. You can check out my example form and its source code, but the gist is: Create a form with actual submit POST URL (TBC). Add Javascript enhancement code to prevent default behaviour and send the inputs in an asynchronous request. Supply user feedback accordingly.
Here’s the source code of an example form I built and it’s send module. This is all the code I’ll display in this article. It is not crucial to implement anything this way, as long as you end up sending a POST request to the webhook we’ll be getting later in this guide.
When initially creating the form, you will leave the webhook URL empty or with a placeholder, we’ll populate it later.
Now to create a Zap!
First — head on to Zapier and create an account if you don’t already have one. Then, from your dashboard, click [Make a Zap!] button to start.
Next, we’ll use Zapier’s webhooks and create a catch hook.
Next step will display the created webhook address for us. This step is very useful and allows a great feature up ahead.
Add this URL as your forms’ action and submit. I suggest sending actual valid information in this step, we’ll encounter this information in a couple of steps.
But first, the information from this form will be used to verify everything is working correctly.
The next step is to connect the target service for this information. The obvious choice is email, but for the sake of nonconformity — I’ll set this one up to arrive as a Slack message.
After you connect your Slack account (don’t worry — it’s also easy and self explanatory), you’ll be able to set up the step for creating a message with the information retrieved from the form via the webhook.
You’ll be able to choose which user or channel will receive the messages, what the bot name will be, it’s icon and all sorts of fun stuff. But the Message text is where is all happens. Pulling from the information you sent in the example — Zapier will help you create the message format and test it out. It’s great!
You can even set the botname to the content of one of your fields, so it appears like the person sending the form is actually sending the message.
Last thing and very important: Turn your zap on.
Now you will be getting the messages from your website directly to Slack — or any other messaging service you prefer to set up.
Zapier supports hundreds of services, and you get 100 executions per month in the free tier, which for me is more than enough.
