Author: Viacheslav Kysil, founder of Form2chat.io
Static websites are very popular nowadays. They’re simple, easy to maintain and super fast. A normal static site hosted on a CDN can be 10 times faster time-to-first-byte than a site built with a CMS or framework. A static site is also reliable as it doesn’t depend on the database and other services. And we can also worry less about deploy and just publish a static site on Github Pages for free or use any of the countless hosting providers around the world.
No surprise there is a variety of online platforms nowadays where anyone can build a static website without knowing how to code and also many awesome static sites generators for coders.
However, their greatest advantage — being static — turns into a problem when you want to do something dynamic, like setting up a simple contact form.
The other day, my friend, who is a private entrepreneur and works most of the time on her own, asked me to add a contact form to her static website. It was important for her to be able to get notified about new leads as fast as possible. Also, she is usually away from her laptop most of the day. Given those conditions, notifications to the Telegram mobile app seemed like an ideal solution for her.
We’ve quickly created a workflow for her with form2chat.io service. The primary goal of this app is to enable people to connect any website form to a chat platform of their choice: Telegram, Messenger, Viber or Slack. There are also other features available, for example, auto-responses to submissions with custom email templates, webhooks, file uploads and more. The full list can be found here.
A final result was like this:
Demo of serverless contact form with form2chat.io app.
Here is step by step guide of how to add a similar solution to any other static website.
1. Sign up on form2chat.io and obtain endpoint URL
Simply sign up, enter a name for your first endpoint and click to copy its URL.
How to obtain an endpoint URL
2. Update your contact form with obtained URL
Update your form’s “action” attribute with your form2chat.io endpoint URL:
<form method="post" action="https://form2chat.io/f/asdfasdf"> <input type="text" name="name" placeholder="Name"> <input type="text" name="contact" placeholder="Email or orther contact"> <textarea name="message" placeholder="Message"></textarea> <input type="submit" value="Send message"> </form>
3. Setup Telegram integration
- Go to the
Integrationspage on form2chat.io.
- Select “Telegram”.
- Copy verification code, open chat with our bot in your telegram app and simply send verification code to the bot. That’s it!
How to configure telegram integration.
4. You are all set!
You will now receive new form submissions to your telegram account. You may also review, filter and add comments to any submission in the submissions dashboard.
There is also a basic analytics page with charts on submissions sent over time, as well as details on devices and browsers of your leads.
Bonus: Anti-spam protection
No one likes spam. To make sure that only submissions from humans hit your inbox, configure anti-spam protection in your form’s settings:
- Visit the form Settings page.
- Click on “Spam Protection” tab.
- Check “Require ReCaptcha validation” checkbox.
- Configure acceptable ReCaptcha score.
1.0is very likely a good interaction,
0.0is very likely a bot. Default recommendation by ReCaptcha is
- Visit Docs Page and add required custom scripts to your website.
Spam Protection settings.
That’s basically it. Form2chat app will now verify every form submission with ReCaptcha service and only resend your submissions that are not flagged as spam.
Bonus 2: GDPR compliance
If you need to keep your forms GDPR compliant visit “Privacy & GDPR” tab in your form settings, set desired data retention period and enable data receipt emails to your leads.
I hope you found this guide helpful. If you have any questions or comments, let me know through the medium responses or twitter!