How to add a contact form to a Static Website

Sandeep Rajaram — Mon, 10 Aug 2020 11:29:17 +0000

Static sites aren’t static anymore. With the rise of modern web technologies, you can build dynamic functionality to your sites. They are fast, reliable, scalable, secure and we don’t even have to deal with database errors.

Did you know that Static websites are 10 times faster than a dynamic site built with a CMS?

What good is a website without a contact form? The traditional way of building a data collection functionality in this case — a contact form, would require you to bother with server-side code, web frameworks, etc., It requires you to write up your own form submission backend, which contradicts your motive to go static.

Enter form backend solutions! There are many services out there like netlify forms, getform….but in this case, we are going to use formX.

Create a new workspace for your domain and a new form, from the formX dashboard.
You will get a code snippet. Add that formX snippet to your HTML code. It is a one-time process.
Create your HTML form (obviously!). “HTML element id” is the only mandatory attribute in the form tag. Attributes like “method” and “post” are not needed.
Replace “form_id” with your own “HTML element id”.

[Fun fact: If you add this snippet to all the pages of your website, you can track insights like the list of pages the user visits before submitting the form, No of website visits, time spent on websites, UTM parameters, activity score, etc.,]

Now sit back and see your submissions on the dashboard as they arrive. Stay updated with submissions through email, slack, or any other channel of your choice. You also can set Auto redirect URL and Autoresponder emails to let your submitters know you are listening. They have Google reCaptcha and Honeypot algorithms to weed out spam entries.

Why formX?

I’ve tried many form backend solutions before, but the reasons I prefer formX to others are;

They don’t cap on the number of submissions you receive or the number of forms you can create.
They have a nifty little CRM like feature that I use to process leads for my own convenience.
We can add multiple users to the account so that I can keep my entire team on loop.

Conclusion

Thus creating form backends is just as easy as copy and pasting. It generally takes me less than 2 mins to set up my forms. They are not limited to contact forms alone, you can create forms for feedback, newsletter signups, marketing signups, lead gen materials, mailing list subscribers, etc., Hope you get an idea on how to leverage form backend solutions while still using static sites and saving yourself time & money.

DEV Community: Sandeep Rajaram

How to add a contact form to a Static Website

Why formX?

Conclusion