Effortlessly collect emails on your static site for free with make, formspark, and google sheets
Learn how to collect emails on your static website for free using Make, Formspark, and Google Sheets. Follow this simple step-by-step guide to automate the process and protect your forms from spam.
1. In this guide, we’ll use three tools: Formspark (for static web forms), Google Sheets (to store submissions), and Make (to connect them seamlessly).
Why Use Formspark?
Formspark offers a free plan with up to 500 submissions per month, which is perfect for smaller sites. If you need more, their $25 plan covers up to 5,000 submissions monthly. Plus, Formspark includes free options for reCAPTCHA, custom honeypot fields, and spam word protection.
Why Use Google Sheets?
Google Sheets is free, flexible, and perfect for storing data. You can also use Airtable or other similar tools if they better suit your needs.
Why Use Make?
Make offers a generous free plan with great features, making it a cost-effective alternative to Zapier for automating tasks. If you prefer, Zapier works just as well for this setup.
Disclaimer:
We do not receive any incentives for recommending these tools. Our goal is simply to suggest options that best fit the needs of this setup.
Create Formspark Form
2. Navigate to https://www.formspark.io/
3. Create your free account using your Google, GitHub, or Slack login for easy access.
4. Once you confirm your account or sign up with social media, go to “Create New Form” to set up your first form.
5. Name your Form
6. Choose your favorite tech stack, in our case we will use HTML
7. Click “Create”
8. Now we need our [[form]]action[[ attribute]]
9. Copy the action="" into your static form
Tip: Here’s a ready-to-use HTML form styled with Tailwind CSS that you can copy and paste into your website:
10. Get back to Formspark.io in the “Settings” of your form
11. Click on the “Custom Honeypot” field to set it up. Keep in mind that while honeypots are helpful in reducing spam, they’re not foolproof. Some bots are advanced enough to recognize common honeypot labels (like “captcha” or “gotcha”) or detect hidden fields through CSS. However, this method does add an extra layer of spam protection.
12. Here, I’ve named the honeypot field “message”—a commonly used label that’s less likely to be flagged by bots. Using generic field names can make it harder for bots to detect the honeypot.
13. One great feature of Formspark is its custom spam words filter, which works beautifully to catch unwanted submissions. This lets you block specific keywords and phrases commonly used by spammers, adding another layer of protection to keep your form clean.
14. Here some spammy keywords “crypto,porn,seo,bitcoin,millionaire,risk-free”
15. Select the "" option.
16. Once everything is set up, just hit Save, and you’re good to go! Your form is now ready to start collecting submissions securely.
Add Turnstile Recaptcha (optional)
17. To make things even more secure, I’ve added Turnstile Captcha—it’s a simple, privacy-friendly way to stop bots from messing with your form. But don’t worry, if you prefer something else, you’ve got options! You can also use reCAPTCHA, Botpoison, or hCaptcha, depending on what fits best for you.
Since I host my website on Cloudflare Pages, Turnstile Captcha works really well with that setup.
18. Go to your Cloudflare Account
19. Click “Turnstile”
20. Click “Add widget”
21. Name your Widget Name
22. I let the Managed option
23. Click “Add Hostnames”
24. Don’t forget to add your domain name! You’ll need to add it to Cloudflare first before linking it here. Once that’s done, you can easily connect it to your form and start collecting emails.
25. All set you can create your Turnstile Keys
26. You’ll need to copy the Site Key and add it directly to the frontend of your form. The Secret Key goes into the Formspark settings.
For testing purposes, I used the Turnstile Test Key, which you can find here: https://developers.cloudflare.com/turnstile/troubleshooting/testing/. This is a great way to make sure everything is working properly before going live!
27. You have to add ”[[<div class=“cf-turnstile” data-sitekey=“<YOUR_SITE_KEY>”></div>” ]]above your submit button and don’t forget to add turnstile script
<script src=“https://challenges.cloudflare.com/turnstile/v0/api.js”asyncdefer></script>
28. Copy your Secret Key and go back to your Formspark settings
29. Select the “TURNSTILE” option.
30. Click the “Turnstile secret key*” field and paste your Secret Key and Save
31. You can also customize your form with options like a redirect URL after submission, or set a custom email subject for the confirmation emails.https://documentation.formspark.io/customization/redirection.html#specifying-a-custom-redirect-url
32. Now, give your form a try! Submit it and then head over to the Formspark Dashboard. There, you’ll be able to see your first submission and manage all the forms you’ve created. It’s a great way to track everything in one place!
Connect Formspark with Google Sheet
33. Go to your Make account or create one
34. To make things even easier, Formspark has its own built-in integrations!
https://www.make.com/en/hq/app-invitation/e24b1114d4ac44bb0dbdb918a85b286a
35. Click the “My Organization” field.
36. Click “Install”
37. Click “Go to dashboard”
38. Click “Scenarios”
39. Click “Create a new scenario”
40. Click on ”+”
41. Click the “Search apps or modules” field.
42. Type Formspark and go with New Submission
43. Click “Create a webhook” then press save
44. Click “Copy address to clipboard”
45. Switch to tab Formspark
46. Click “Settings”
47. Click the “Webhook URL” field and paste your webhook url
48. Click “Save”
49. Now, head back to Make and add a new module.
Tip: Before connecting Google Sheets, you’ll need to create a new Google Sheet and add all the form input fields as headers in the first row. For example, if your form collects Name, Email, and Message, make sure these fields are listed in the first row of your Google Sheet.
50. Click “Add Row”
51. Click “Create a connection”
52. Click “Sign in with Google”
53. Here my Google Sheet
54. Click “Click here to choose file”
55. Choose the file where you want to collect the data
56. Click on your sheet name to open it.
57. Now, you’ll need to add the inputs to your Google Sheet, but don’t worry if they don’t appear right away. You’ll need to submit the form again to see the data populate in your sheet. Once you submit it, the form fields will be mapped to the columns in your sheet, and the data will show up!
Save your module
58. Save your Scenario
Alert: Don’t Forget to submit your form in order to get your data structure
59. Go back to your make scenario and click “Run Once”
60. Click “Use existing data”
61. When you go back to your Google Sheets Module and add the inputs, you should now see the Formspark inputs appear. These will be the form fields you mapped earlier, and now they’ll be ready to capture and store your form submissions automatically!
62. Click “OK”
63. Click “Save”
64. Now activate your Make Scenario
65. Here, it basically asks if you want to keep the test data that was used earlier. You have two options:
- Delete it: If you don’t want to keep the test data, simply remove it.
- Process it: If you’d like to keep the test data, you can process it, and it will automatically be added to your Google Sheet along with any future submissions.
In the second case, the test data will be stored in your sheet along with new form submissions.
66. Now you’re all set! Just submit your form, and voilà! You’ll have a fully functional, static form that’s well protected against spam, and all the data will be stored neatly in your Google Sheet. It’s that simple—your form is ready to collect and manage submissions with ease!
67.
