FormEasy Save
A simple open source library to receive contact forms for static sites
FormEasy
FormEasy is a free and open source apps script library that lets you receive forms from your static sites very easily.
Script ID: 1CAyzGbXdwMlko81SbJAjRp7ewxhyGKhDipDK4v8ZvlpYqrMAAzbFNccL
Adding FormEasy library to Apps Script
- Open a new Google sheets file(this is where your form data gets stored)
- From the menu bar click Extensions > Apps Script and it opens up a new apps script file
- In the left bar of apps script file click
+button besideLibraries - Add the
Script IDlisted above and clickLook upbutton and select the latest version. Note the identifier it is going to be used to invoke the functions in the library and finally clickAddbutton.
Now you can use FormEasy object inside the apps script file.
Usage
Clear the default function if any in the apps script file and add the below function.
Simplest case
function doPost(req) {
FormEasy.setEmail('[email protected]'); // To receive email notification(optional)
return FormEasy.action(req); // Mandatory to return action method
}
The default data fields are: name, email and message. To add more, use setFields method as shown below.
With more customizations
function doPost(req) {
FormEasy.setSheet('Sheet1'); // Optional
FormEasy.setEmail('[email protected]'); // To receive email notification(optional)
FormEasy.setSubject('Email subject'); // Optional
FormEasy.setFormHeading('Form heading inside email'); // Optional
FormEasy.setFields('name', 'email', 'website', 'message', ...); // Optional(name, email, messsage are default)
return FormEasy.action(req); // It should be at the end and return it
}
After adding the above function click the Deploy button at top right corner and select New deployment and select type to Web app from the gear icon.
Select/fill the below options
- Description(optional),
- Execute as
Me(you email) - Who has access
Anyone
Click Deploy button(authorize the script if you haven't done before) and you will get a URL under Web app, copy that and it is going to be the end point for submitting the POST request.
Note: You need not make New deployment everytime if you want to use the same web app URL. Select Manage deployments and update the version to keep the same URL.
Form submission using fetch
const data = {
name: 'John',
email: '[email protected]',
message: 'Receiving forms is easy and simple now!',
};
const url = 'https://script.google.com/macros/s/<Deployment ID>/exec';
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'text/plain;charset=utf-8',
},
body: JSON.stringify(data),
})
.then((res) => res.json())
.then((data) => console.log('data', data))
.catch((err) => console.log('err', err));
Note: The keys of the data object should match with the fields that are set using setFields method in the apps script file. The default keys are name, email and message.
Article: https://devapt.com/formspree-alternative-formeasy
Demo submission with live Google sheet
Here is the demo code and the live Google sheet to get an idea on how this FormEasy library helps in receiving forms.
Captcha validation
FormEasy supports multiple captcha providers to allow you to prevent unverified submissions by robots. Each provider is unique and requires a unique configuration. Please refer to the documentation below to enable a specific captcha provider.
Google reCAPTCHA V2
-
Register a site and get your secret key, and site key: https://www.google.com/recaptcha/admin/create
-
In your apps script file, inside function
doPost, add the following configuration:
function doPost(req) {
// ...
FormEasy.setRecaptcha('YOUR_SECRET_KEY'); // To validate reCAPTCHA
// ...
return FormEasy.action(req); // Mandatory to return action method
}
- On your website, add the reCAPTCHA library at the end of the
<head>tag:
<head>
<!-- ... -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
- Add reCAPTCHA input into your form:
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
-
You should see
I am not a robotbox on your site. If you don't, please refer to reCAPTCHA Docs for debugging. -
Inside your
fetch()method, add a reCAPTCHA response from the input:
const data = {
// ...
gCaptchaResponse: document.getElementById('g-recaptcha-response').value,
};
// ...
Google reCAPTCHA V3
Steps 1 & 2 same as above.
- On your website, add the reCAPTCHA library at the end of the
<head>tag:
<head>
<!-- ... -->
<script src="https://www.google.com/recaptcha/api.js?render=<YOUR_SITE_KEY>" async defer></script>
</head>
- Read the form data, reCAPTCHA V3 response token and send the request.
const siteKey = '<YOUR_SITE_KEY>';
const url = 'https://script.google.com/macros/s/<Deployment ID>/exec';
function handleSubmit(event) {
event.preventDefault();
// Make an API call to get the reCAPTCHA token
grecaptcha.ready(function () {
grecaptcha.execute(siteKey, { action: 'submit' }).then(function (token) {
// Add the reCAPTCHA token to the form data
data.gCaptchaResponse = token;
data.name = document.getElementById('name').value;
data.website = document.getElementById('website').value;
data.email = document.getElementById('email').value;
data.message = document.getElementById('message').value;
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'text/plain;charset=utf-8',
},
body: JSON.stringify(data),
})
.then((res) => res.json())
.then((data) => console.log('data', data))
.catch((err) => console.log('err', err));
});
});
}
document.getElementById('<YOUR_FORM_ID>').addEventListener('submit', handleSubmit);
Video instructions
To see all the above instructions step by step, check this quick demo video.
FAQs
1. Is it safe to grant permission to the apps script file while using FormEasy library?
Yes, it is completely safe.FormEasy code doesn't interact with any remote servers. You can check the source code of the FormEasy library using its ScriptID.
Google shows it unsafe because it hasn't verified the script. Even if you write your own script and grant permission the same message will be shown.
2. Can I customize FormEasy script?
Yes. You're free to customize any part of the FormEasy script and deploy on your own to reflect the same.
If you want even others to use your customizations then you can contribute your code and once verified it will be pushed to the main script. You can check contributing guidelines.
3. What are the limitations of FormEasy?
There are no specific limitations for FormEasy library.
But Google Apps Script limits the email to 100/day and script run time to 6min/execution. You can see more about those here
Contributing
Pull Requests are always welcome!
If you wish to contribute using Github, you can work on any feature ideas you have or any bug fixes if you have noticed.
After your PR gets merged, you'll be apparing on the contributors page.
-
Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.
-
Please read
CONTRIBUTINGfor details on CODE OF CONDUCT, and the process for submitting pull requests.
License
FormEasy is distributed using the MIT License. Check the License details.
Support
If you found this library helpful, please give a star ⭐️
If you like this open source work, consider supporting with a coffee ↓
Open Source Agenda Badge
