This page looks best with JavaScript enabled

Contact Forms in Static Sites

 ·   ·  ☕ 3 min read

I don’t quite see value in ‘contact us’ forms anymore.

  • No one uses it
  • It is prone to spam
  • No one uses it (yes, this is repeated)

However, my personal opinions do not always align with client expectations. So it follows that I create these forms on a static site with resigned indignation.

Contact form is not quite a native feature of static sites. However, there are more than few solutions to this problem.

Use contact form from a third party site

Use the form provided by the email marketing provider, or use a service like Formspree. You just need to use some Javascript or use a simple URL to embed the form in the site.

For example, Formspree just requires you to include following content -

<form action="" method="POST">
  <input type="text" name="name" />
  <input type="email" name="_replyto" />
  <input type="submit" value="Send" />

User-entered data is maintained and processed by the service provider. You as a developer do not have anything additional to do here.

On the flip side, the features provided by the form provider may not quite match client expectations. The low-tier plans or free plans may be a tad too limited for the client tastes (but without the option to bump up the tiers).

Use an external site that is already owned by client organization in order to provide the contact form. This has the added advantage of centralizing contact information from multiple sources, and forcing the same tried-and-tested procedure to process contact requests.

Or, build (/ consume) a small API in existing enterprise applications (like Zoho) to feed in the contact information.

These third party sites, however, are not always an option that is readily available (or within budget).

Use Netlify Forms if you are hosted on Netlify

The simplest solution of them all is to use Netlify forms. All you need to do is include the netlify tag in the forms.

<form name="contact" method="POST" data-netlify="true">
    <label>Your Email: <input type="email" name="email" /></label>

Any user entered data will be redirected to Netlify and the data is available to internal users through the Netlify admin function. You also have the option to send this data to external systems without fuss if you are on a non-free tier.

But.. contact forms?

I often see potential customers calling up the customer-facing team rather than use contact forms in the case of smaller industries in my clientele. However, I need to do a better test one of these days rather than relying on my intellect that is far too superior for my own good.

Stay in touch!
Share on

Prashanth Krishnamurthy
Prashanth Krishnamurthy
Technologist | Creator of Things