How to set up form to email on static (Jamstack) websites

How to set up form to email on static (Jamstack) websites

So you have a static website and you still want to be able to use form to email. Form endpoints are the way forward. It's becoming increasingly more common for web designers to create static websites or Jamstack based sites because of their speed / page load benefits and improved security.

When hosting a static website, it's beneficial to host it on a CDN as it makes multiple copies of your website and keeps it on various servers all over the world. This means when someone visits your website, it will load your website from the server closest to them, therefore improving loading times.

The issue with CDN's and static website hosting is you cannot execute backend code, like PHP and since form to email scripts are traditionally coded using backend code like PHP or Python, you are not able to use these for your website.

Enter HTML form endpoints


Using an HTML Form endpoint provider, like Hyperforms, you can still create your static website using a CDN but also still use form to email. How you may ask? By using a unique form endpoint address provided by a service like Hyperforms. So you create your HTML form, this might be a contact form (like below), a lead generation form or a newsletter form.

<form action="" method="POST">

    <label for="name"> Name: 
    	<input type="text" name="name" id="name">
    </label>
    
    <label for="phone"> Phone: 
    	<input type="text" name="phone" id="phone">
    </label>
    
    <label for="email"> Email: 
    	<input type="email" name="email" id="email">
    </label>
    
    <label for="message"> Message: 
    	<textarea name="message" id="message" rows="4"></textarea>
    </label>
    
    <button type="submit">Send Message</button>
    
</form>
Basic HTML contact form structure

Usually if you are using a form to email script, you would add the script location in the action="" attribute, but as you cannot run scripts like that on a static hosting account, you can sign up for a free Hyperforms account, add a new form and then put the unique form endpoint address in your forms action attribute (see example below).

<form action="https://link.hyperforms.app/f/HF0BooU5GdUQZoN" method="POST">

    <label for="name"> Name: 
    	<input type="text" name="name" id="name">
    </label>
    
    <label for="phone"> Phone: 
    	<input type="text" name="phone" id="phone">
    </label>
    
    <label for="email"> Email: 
    	<input type="email" name="email" id="email">
    </label>
    
    <label for="message"> Message: 
    	<textarea name="message" id="message" rows="4"></textarea>
    </label>
    
    <button type="submit">Send Message</button>
    
</form>
Basic HTML contact form with unique form endpoint address

No with that in place the form endpoint service does all the work for you. You don't need a different hosting account, you don't need to create any backend code to send your forms to email or worry about spam filters etc. Hyperforms does all this for you and in seconds.

If you are creating or getting into Jamstack websites, then a form endpoint service is definitely something to have in your tool kit, as it will save you time and money.

To read more on implementing a form, look at our other blog post How to setup Form to Email on your website, the modern way.

Show Comments