Contact forms on a static webpage
Static web pages are a great way of hosting your websites for free, but they come with a few caveats. One problem you have is that you can not just do a POST request to your server using a simple html form, which is how most contact forms are made. In order to fill the need of users that would like a contact form on their github pages websites, multiple solutions were created. One of these is formspree.io. The way it works is you create a form with an action url containing your email. An example from their web page is:
<form method="POST" action="https://email@example.com"> <input type="email" name="email" placeholder="Your email"> <textarea name="message" placeholder="Test Message"></textarea> <button type="submit">Send Test</button> </form>
This solution is free and it even provides spam protection, but unfortunately it does not allow AJAX requests and it forces a redirect to a ‘thank you page’ after the form is submitted. I propose a solution that does not offer spam protection, but allows AJAX requests and does not redirect to a thank you page.
We will use the IFTTT (If This than That) platform. First step you need to do is create an applet where this (a trigger) is a webhook and that (action) is an email. What this does is creates a url, where a POST request sends an email to your inbox. You can customize how the body of the message will look like, the way I have set it up is:
As you can see, the email is sent in an html envelope, so I added
pre tags in order not to lose the newline information in the message. To test this, we can use
curl to send a POST request.
At the end of this post I will try and address the problem with spam protection. With proposed solution, you are limited to a client side detection, so there is not much you can do. But there are at least three ways of trying to catch those kids:
- dynamically determine POST url,
- use a hidden input field, which only robots will fill up and
- use a timer (humans need a bit of time to fill out the form)
IFTTT solution already covers the first bullet, as for the other two, they are simple enough for most programmers to implement.