In the early days of the internet, the information on the web consisted of just static pages. When it became interactive people started generating web pages on the server, making them more dynamic in nature.&nbsp;
With the advent of new technologies and site generators, a new philosophy of serving web pages is making us think about static pages again.&nbsp;
This new philosophy or architecture is called JAMstack which stands for JavaScript, APIs and Markdown stack.
The whole idea of JAMstack is to serve websites as static pages, giving dynamic nature using JavaScript, and exchange data through APIs.&nbsp;
As a result, it makes the developer experience simpler, improves performance with greater scalability, and reduces the cost of maintenance.&nbsp;
There are many static site generators available these days viz., NextJS, Hugo, Gatsby, etc.&nbsp;
With the help of third-party tools or services, these static sites can be made more dynamic.&nbsp;
Creating and maintaining static sites is inexpensive but adding dynamic features is where one has to spend on third-party tools.
One essential service which almost every website needs is a contact form and handling contact forms on static sites can be done through third-party services as we don't maintain a full-fledged server to handle forms on static sites.
Some of the static site form handling services are FormSpree, FormKeep, GetForm etc. These third-party services come at a price and free tier services have limitations in data and the number of submissions.&nbsp;
But here is a solution that helps you to handle forms on static sites without the need for these third-party tools.&nbsp;
It is called FormEasy which is a FREE and open-source apps script library that helps you to receive forms on static sites with full control of your data.
Form spree is a quite popular service for handling forms on static websites and <a href="https://devapt.com/formeasy" target="_blank" rel="noopener">FormEasy</a> can be the best formspree alternative with all customizations you want.
Let's see how to set up this FormEasy apps script library to handle static site forms.
<h2 style="text-align: center;">FormEasy setup</h2>
In a few simple steps, forms on static sites can be handled using FormEasy library.&nbsp;
<ol>
<li>Create an empty Google sheets file</li>
<li>Open the Apps Script file connected to it</li>
<li>Add the FormEasy library using ScriptID</li>
<li>Add <code>doPost</code> apps script function</li>
<li>Deploy the apps script code and get the Web app URL to make POST requests</li>
</ol>
<h3 id="create_empty_google_sheet">1. Create an empty Google sheets file</h3>
Visit this <a href="https://docs.google.com/spreadsheets/u/0/" target="_blank" rel="noopener">link</a> to create a new blank Google sheets file.
<img src="../images/formeasy/create-empty-google-sheet.png" alt="Create-empty-Google-sheets-file-formeasy" />
<h3 id="open_apps_script_file">2. Open the Apps Script file</h3>
After creating an empty Google sheet file(you can rename the file if you want to), go to Extensions in the menu bar and click Apps Script.
It opens up an apps script file connected with the Google sheet.&nbsp;
<img src="../images/formeasy/open-apps-script.png" alt="Open-apps-script-in-google-sheets" />
<h3 id="add_formeasy_library">3. Add the FormEasy library</h3>
In the left bar of apps script file click <code>+</code> button beside Libraries and add the below Script ID and click Look up button.
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%;">
<blockquote>ScriptID: 1CAyzGbXdwMlko81SbJAjRp7ewxhyGKhDipDK4v8ZvlpYqrMAAzbFNccL</blockquote>
</td>
</tr>
</tbody>
</table>
<img src="../images/formeasy/add-formeasy-library.png" alt="Add-FormEasy-library-to-apps-script" />
You will see two options Version and Identifier.&nbsp;
Select the latest version to reflect the latest changes made to the library if any or you can select the specific version as per the features you want.
For the identifier, the default name is FormEasy it is the name of the object used to call methods in the library. You can change it if you want but keeping it as it is can help you use the ready code snippets related to FormEasy.
<h3 id="add_dopost_function">4. Add doPost function</h3>
Clear the default functions if any in the default apps script file Code.gs.
Create a function named <code>doPost</code>.&nbsp;
<code>doPost</code> function name is the default name of the function that runs whenever a POST request is made to the script.
Next set the email if you want to get notified whenever any form gets submitted using <code>setEmail</code> method on FormEasy object. (FormEasy is the default identifier if you do not make any changes to the identifier while adding the FormEasy library)
Setting email is optional, the data gets logged in the Google sheet and you will not be notified through email if you do not set the email.
You need to return <code>action</code> method on FormEasy object with the <code>req</code> argument from the doPost function and this is the only mandatory method to use and all other methods on FormEasy are optional.&nbsp;
<img src="../images/formeasy/add-formeasy-code.png" alt="Add-FormEasy-code" />
All the available methods on FormEasy library are:
<div>
<ul>
<li>setSheet - To select the specific sheet for saving the data(Default is active sheet)</li>
<li>setEmail - To set the email for receiving notification</li>
<li>setSubject - To set the subject of the email</li>
<li>setFormHeading - To set the heading(inside email)</li>
<li>setFields - To set the fields of the form(Lower case letters, also the keys of the JSON object)</li>
<li>action - To return the response after submitting the form(Mandatory to return)</li>
</ul>
The above all are optional methods except the <code>action</code>.
The simplest case looks like below:
<pre class="language-javascript"><code>function doPost(req) {
 FormEasy.setEmail('youremail@domain.com'); // To receive email notification(optional)
 return FormEasy.action(req); // Mandatory to return action method
}</code></pre>
</div>
<h3 id="deploy_apps_script">5. Deploy the apps script code</h3>
After saving all the changes to the code, it has to be deployed to use it.&nbsp;
To deploy, click the Deploy button at the top right corner and select&nbsp;New deployment&nbsp;and select type to&nbsp;Web app&nbsp;from the gear icon.
Select/fill the below options
<ul dir="auto">
<li>Description(optional),</li>
<li>Execute as&nbsp;Me(you email)</li>
<li>Who has access&nbsp;Anyone</li>
</ul>
Click the Deploy&nbsp;button(authorize the script if you haven't done it before) and you will get a URL under&nbsp;Web app, copy that and it is going to be the endpoint for submitting the POST requests.&nbsp;
That's it. Now you can submit forms on this endpoint and they get logged in the Google sheet you selected. If you had set email then you will be notified through email whenever any form submission happens.
<img src="../images/formeasy/deploy-apps-script.png" alt="Deploy-apps-script-code" />
If you want to make any changes to the script, like changing the subject text, email etc, you can do so and save the script. And while redeploying it instead of selecting New deployment, this time you have to select Manage deployments and click the pencil icon, select the New version, and click the deploy button.&nbsp;
The changes will be get reflected when you make the POST requests after that.&nbsp;
Note: Whenever you make a new deployment, the web app URL changes. But when you redeploy using Manage deployments&nbsp;option the URL remains the same.
Here is how a sample POST request using JavaScript <code>fetch</code> looks like.
<pre class="language-javascript"><code>const data = {
 name: 'John',
 email: 'john@domain.com',
 message: 'Receiving forms is easy and simple now!',
};

const url = 'https://script.google.com/macros/s/&lt;Deployment ID&gt;/exec';

fetch(url, {
 method: 'POST',
 headers: {
 'Content-Type': 'text/plain;charset=utf-8',
 },
 body: JSON.stringify(data),
})
 .then((res) =&gt; res.json())
 .then((data) =&gt; console.log('data', data))
 .catch((err) =&gt; console.log('err', err));</code></pre>
If you want to follow all the above instructions in the form of a video you can check this demo video.
<div class="flex justify-center"><iframe class=" rounded-xl overflow-hidden" title="Text to image chrome extension intro" src="https://www.youtube-nocookie.com/embed/0u75mtnhifM?rel=0" width="680" height="350" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
As said already FormEasy is an open-source FormSpree alternative. You can check the source code of this library, fork it, make changes, use it yourself or you can contribute your code to the <a href="https://github.com/Basharath/FormEasy" target="_blank" rel="noopener">FormEasy Github repo</a>.
Hope this is a good solution to handle contact forms on static websites for FREE. If you have or found any such useful solution for static sites then do share it with us.

Here is the free and open source formspree alternative to handle contact forms on static websites.
You can have full control of your data. 

Posts tagged with Static-Site

Free FormSpree alternative to handle forms on static sites