├── .gitbook └── assets │ ├── CleanShot 2022-08-19 at 18.47.23.png │ ├── CleanShot 2024-01-31 at 13.59.59@2x.png │ ├── CleanShot 2024-01-31 at 14.23.49@2x (1).png │ ├── CleanShot 2024-01-31 at 14.23.49@2x.png │ ├── CleanShot 2024-01-31 at 14.28.40@2x.png │ ├── CleanShot 2024-01-31 at 14.30.49@2x.png │ ├── CleanShot 2024-01-31 at 14.33.30@2x.png │ ├── CleanShot 2024-01-31 at 14.41.03@2x.png │ ├── CleanShot 2024-02-02 at 13.16.55@2x (1).png │ ├── CleanShot 2024-02-02 at 13.16.55@2x.png │ ├── CleanShot 2024-02-02 at 13.24.19@2x.png │ ├── CleanShot 2024-02-03 at 13.57.32@2x (1).png │ ├── CleanShot 2024-02-03 at 13.57.32@2x.png │ ├── CleanShot 2024-02-03 at 14.01.32@2x.png │ ├── CleanShot 2024-02-03 at 14.03.10@2x (1).png │ ├── CleanShot 2024-02-03 at 14.03.10@2x.png │ ├── CleanShot 2024-02-03 at 14.04.29@2x (1).png │ ├── CleanShot 2024-02-03 at 14.04.29@2x.png │ ├── CleanShot 2024-06-10 at 14.24.39@2x.png │ ├── CleanShot 2024-06-12 at 13.05.00@2x.png │ ├── CleanShot 2024-06-28 at 12.54.58@2x.png │ ├── CleanShot 2024-06-28 at 13.12.23@2x.png │ ├── CleanShot 2024-06-28 at 13.12.51@2x (1).png │ ├── CleanShot 2024-06-28 at 13.12.51@2x.png │ ├── CleanShot 2024-06-28 at 13.21.59@2x.png │ ├── CleanShot 2024-06-28 at 13.28.03@2x.png │ ├── CleanShot 2024-06-28 at 13.35.41@2x.png │ ├── CleanShot 2024-11-04 at 18.21.54@2x.png │ ├── app-live.png │ ├── congrats.png │ ├── deploy-vercel.png │ ├── email.png │ ├── github-branch.png │ ├── github-pages.png │ ├── github-repo.png │ ├── github.png │ ├── image (1).png │ ├── image (2).png │ ├── image (3).png │ ├── image (4) (2) (2) (2) (1).png │ ├── image (4) (2) (2) (2) (2).png │ ├── image (4) (2) (2) (2).png │ ├── image (4) (2) (2).png │ ├── image.png │ ├── import-git-repo.png │ ├── netlify-congrats.png │ ├── netlify-dashboard.png │ ├── netlify-deploy.png │ ├── netlify-import-git.png │ ├── netlify-repo-configure.png │ ├── netlify.png │ ├── site-published.png │ ├── vercel-scope.png │ └── vercel.png ├── README.md ├── SUMMARY.md ├── getting-started ├── api-reference.md ├── customizations │ ├── README.md │ ├── custom-reply-to.md │ ├── email-subject.md │ ├── from-name.md │ ├── redirection.md │ ├── spam-protection │ │ ├── README.md │ │ ├── hcaptcha.md │ │ ├── recaptcha-and-turnstile.md │ │ ├── report-spam.md │ │ └── spam-protection.md │ └── success-thank-you-page.md ├── examples │ ├── README.md │ ├── advanced-all-options.md │ ├── ajax-contact-form-using-javascript.md │ ├── basic-html-contact-form.md │ ├── contact-form-with-dark-mode.md │ ├── file-upload-form.md │ ├── javascript-form-validation.md │ ├── multi-column-contact-form.md │ ├── raw-contact-form.md │ ├── recaptcha-v3.md │ └── with-multiple-checkbox.md ├── faq.md ├── installation.md ├── integrations │ ├── README.md │ ├── examples │ │ ├── README.md │ │ ├── airtable.md │ │ ├── google-sheets.md │ │ └── telegram-notifications.md │ ├── integromat.md │ └── zapier.md ├── options-reference.md ├── pro-features │ ├── README.md │ ├── add-cc-email.md │ ├── advanced-file-uploader.md │ ├── autoresponder.md │ ├── cloudflare-turnstile-captcha.md │ ├── file-attachments.md │ ├── intro-text.md │ ├── recaptcha-integration.md │ ├── restrict-to-domain.md │ └── webhooks.md └── troubleshooting.md └── how-to-guides ├── hosting-providers ├── README.md ├── aws.md ├── cloudflare.md ├── digital-ocean.md ├── github.md ├── netlify.md └── vercel.md ├── html-and-javascript.md ├── jam-stack.md ├── js-frameworks ├── README.md ├── alpine.js.md ├── angular-js.md ├── react-js.md ├── react-js │ ├── react-file-upload-form.md │ ├── react-google-recaptcha-v3.md │ ├── react-hook-form-file-upload.md │ ├── react-js.md │ └── simple-react-contact-form.md ├── react-plugin.md ├── svelte.md └── vue-js.md ├── landing-page-builders ├── README.md ├── groovefunnels.md ├── instapage.md ├── pagewiz.md └── unbounce.md ├── site-builders ├── README.md ├── carrd.co.md ├── dorik.md ├── framer.md ├── squarespace.md ├── webflow.md └── wix.md ├── static-site-generators ├── README.md ├── astro.md ├── eleventy.md ├── gatsby.md ├── gridsome.md ├── hugo.md ├── jekyll.md ├── next.js.md └── nuxt.js.md └── wordpress ├── README.md ├── elementor.md └── oxygen-builder.md /.gitbook/assets/CleanShot 2022-08-19 at 18.47.23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2022-08-19 at 18.47.23.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-01-31 at 13.59.59@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-01-31 at 13.59.59@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-01-31 at 14.23.49@2x (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-01-31 at 14.23.49@2x (1).png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-01-31 at 14.23.49@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-01-31 at 14.23.49@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-01-31 at 14.28.40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-01-31 at 14.28.40@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-01-31 at 14.30.49@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-01-31 at 14.30.49@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-01-31 at 14.33.30@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-01-31 at 14.33.30@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-01-31 at 14.41.03@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-01-31 at 14.41.03@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-02 at 13.16.55@2x (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-02-02 at 13.16.55@2x (1).png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-02 at 13.16.55@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-02-02 at 13.16.55@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-02 at 13.24.19@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-02-02 at 13.24.19@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-03 at 13.57.32@2x (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-02-03 at 13.57.32@2x (1).png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-03 at 13.57.32@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-02-03 at 13.57.32@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-03 at 14.01.32@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-02-03 at 14.01.32@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-03 at 14.03.10@2x (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-02-03 at 14.03.10@2x (1).png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-03 at 14.03.10@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-02-03 at 14.03.10@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-03 at 14.04.29@2x (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-02-03 at 14.04.29@2x (1).png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-03 at 14.04.29@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-02-03 at 14.04.29@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-06-10 at 14.24.39@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-06-10 at 14.24.39@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-06-12 at 13.05.00@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-06-12 at 13.05.00@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-06-28 at 12.54.58@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-06-28 at 12.54.58@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-06-28 at 13.12.23@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-06-28 at 13.12.23@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-06-28 at 13.12.51@2x (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-06-28 at 13.12.51@2x (1).png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-06-28 at 13.12.51@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-06-28 at 13.12.51@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-06-28 at 13.21.59@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-06-28 at 13.21.59@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-06-28 at 13.28.03@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-06-28 at 13.28.03@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-06-28 at 13.35.41@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-06-28 at 13.35.41@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-11-04 at 18.21.54@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/CleanShot 2024-11-04 at 18.21.54@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/app-live.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/app-live.png -------------------------------------------------------------------------------- /.gitbook/assets/congrats.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/congrats.png -------------------------------------------------------------------------------- /.gitbook/assets/deploy-vercel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/deploy-vercel.png -------------------------------------------------------------------------------- /.gitbook/assets/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/email.png -------------------------------------------------------------------------------- /.gitbook/assets/github-branch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/github-branch.png -------------------------------------------------------------------------------- /.gitbook/assets/github-pages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/github-pages.png -------------------------------------------------------------------------------- /.gitbook/assets/github-repo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/github-repo.png -------------------------------------------------------------------------------- /.gitbook/assets/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/github.png -------------------------------------------------------------------------------- /.gitbook/assets/image (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/image (1).png -------------------------------------------------------------------------------- /.gitbook/assets/image (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/image (2).png -------------------------------------------------------------------------------- /.gitbook/assets/image (3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/image (3).png -------------------------------------------------------------------------------- /.gitbook/assets/image (4) (2) (2) (2) (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/image (4) (2) (2) (2) (1).png -------------------------------------------------------------------------------- /.gitbook/assets/image (4) (2) (2) (2) (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/image (4) (2) (2) (2) (2).png -------------------------------------------------------------------------------- /.gitbook/assets/image (4) (2) (2) (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/image (4) (2) (2) (2).png -------------------------------------------------------------------------------- /.gitbook/assets/image (4) (2) (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/image (4) (2) (2).png -------------------------------------------------------------------------------- /.gitbook/assets/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/image.png -------------------------------------------------------------------------------- /.gitbook/assets/import-git-repo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/import-git-repo.png -------------------------------------------------------------------------------- /.gitbook/assets/netlify-congrats.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/netlify-congrats.png -------------------------------------------------------------------------------- /.gitbook/assets/netlify-dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/netlify-dashboard.png -------------------------------------------------------------------------------- /.gitbook/assets/netlify-deploy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/netlify-deploy.png -------------------------------------------------------------------------------- /.gitbook/assets/netlify-import-git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/netlify-import-git.png -------------------------------------------------------------------------------- /.gitbook/assets/netlify-repo-configure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/netlify-repo-configure.png -------------------------------------------------------------------------------- /.gitbook/assets/netlify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/netlify.png -------------------------------------------------------------------------------- /.gitbook/assets/site-published.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/site-published.png -------------------------------------------------------------------------------- /.gitbook/assets/vercel-scope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/vercel-scope.png -------------------------------------------------------------------------------- /.gitbook/assets/vercel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/7b22d7248bdbdb467fa6114cae6be8f67500478c/.gitbook/assets/vercel.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | Welcome to the documentation for [Web3Forms](https://web3forms.com/) 4 | 5 | Web3Forms is a simple tool to set up Contact Forms for Static Websites. Receive form submissions directly in your email inbox without any server or back-end code. Its free! Web3Forms is perfect for static / JAM Stack websites. Start receiving submissions by creating an [Access Key](https://web3forms.com/#start) 6 | 7 | Start this documentation by clicking the links below or choose your topic from the left side. 8 | 9 | {% page-ref page="getting-started/customizations/" %} 10 | 11 | -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Table of contents 2 | 3 | * [Introduction](README.md) 4 | 5 | ## Getting Started 6 | 7 | * [Installation](getting-started/installation.md) 8 | * [Customizations](getting-started/customizations/README.md) 9 | * [Email Subject line](getting-started/customizations/email-subject.md) 10 | * [Success / Thank You Page](getting-started/customizations/success-thank-you-page.md) 11 | * [Custom Redirection](getting-started/customizations/redirection.md) 12 | * [Captcha & SPAM](getting-started/customizations/spam-protection/README.md) 13 | * [hCaptcha](getting-started/customizations/spam-protection/hcaptcha.md) 14 | * [reCaptcha & Turnstile](getting-started/customizations/spam-protection/recaptcha-and-turnstile.md) 15 | * [Honeypot](getting-started/customizations/spam-protection/spam-protection.md) 16 | * [Report Spam](getting-started/customizations/spam-protection/report-spam.md) 17 | * [Custom Reply-To](getting-started/customizations/custom-reply-to.md) 18 | * [From Name](getting-started/customizations/from-name.md) 19 | * [Pro Features](getting-started/pro-features/README.md) 20 | * [reCaptcha Integration](getting-started/pro-features/recaptcha-integration.md) 21 | * [Cloudflare Turnstile Captcha](getting-started/pro-features/cloudflare-turnstile-captcha.md) 22 | * [Add CC Email](getting-started/pro-features/add-cc-email.md) 23 | * [Autoresponder (Auto-Reply)](getting-started/pro-features/autoresponder.md) 24 | * [File Attachments](getting-started/pro-features/file-attachments.md) 25 | * [Advanced File Uploader](getting-started/pro-features/advanced-file-uploader.md) 26 | * [Webhooks](getting-started/pro-features/webhooks.md) 27 | * [Restrict to Domain](getting-started/pro-features/restrict-to-domain.md) 28 | * [Intro Text](getting-started/pro-features/intro-text.md) 29 | * [Examples](getting-started/integrations/examples/README.md) 30 | * [Basic HTML Contact Form](getting-started/examples/basic-html-contact-form.md) 31 | * [Advanced - All Options](getting-started/examples/advanced-all-options.md) 32 | * [Ajax Contact Form using Javascript](getting-started/examples/ajax-contact-form-using-javascript.md) 33 | * [Multi Column Contact Form](getting-started/examples/multi-column-contact-form.md) 34 | * [Javascript Form Validation](getting-started/examples/javascript-form-validation.md) 35 | * [Contact Form with Dark Mode](getting-started/examples/contact-form-with-dark-mode.md) 36 | * [Raw Contact Form](getting-started/examples/raw-contact-form.md) 37 | * [Google reCaptcha v3](getting-started/examples/recaptcha-v3.md) 38 | * [File Upload Form](getting-started/examples/file-upload-form.md) 39 | * [With Multiple Checkbox](getting-started/examples/with-multiple-checkbox.md) 40 | * [Integrations](getting-started/integrations/README.md) 41 | * [Zapier](getting-started/integrations/zapier.md) 42 | * [Integromat](getting-started/integrations/integromat.md) 43 | * [Examples](getting-started/examples/README.md) 44 | * [Google Sheets](getting-started/integrations/examples/google-sheets.md) 45 | * [Airtable](getting-started/integrations/examples/airtable.md) 46 | * [Telegram Notifications](getting-started/integrations/examples/telegram-notifications.md) 47 | * [Options Reference](getting-started/options-reference.md) 48 | * [API Reference](getting-started/api-reference.md) 49 | * [Troubleshooting](getting-started/troubleshooting.md) 50 | * [FAQ](getting-started/faq.md) 51 | 52 | ## How-to Guides 53 | 54 | * [HTML & JavaScript](how-to-guides/html-and-javascript.md) 55 | * [JS Frameworks](how-to-guides/js-frameworks/README.md) 56 | * [React JS](how-to-guides/js-frameworks/react-js.md) 57 | * [Web3Forms React Plugin](how-to-guides/js-frameworks/react-plugin.md) 58 | * [React Hook Form](how-to-guides/js-frameworks/react-js/react-js.md) 59 | * [Simple React Contact Form](how-to-guides/js-frameworks/react-js/simple-react-contact-form.md) 60 | * [React File Upload Form](how-to-guides/js-frameworks/react-js/react-file-upload-form.md) 61 | * [React Google ReCaptcha v3](how-to-guides/js-frameworks/react-js/react-google-recaptcha-v3.md) 62 | * [React Hook Form File Upload](how-to-guides/js-frameworks/react-js/react-hook-form-file-upload.md) 63 | * [Vue JS](how-to-guides/js-frameworks/vue-js.md) 64 | * [Svelte](how-to-guides/js-frameworks/svelte.md) 65 | * [Angular JS](how-to-guides/js-frameworks/angular-js.md) 66 | * [Alpine.js](how-to-guides/js-frameworks/alpine.js.md) 67 | * [Site Builders](how-to-guides/site-builders/README.md) 68 | * [Webflow](how-to-guides/site-builders/webflow.md) 69 | * [Framer](how-to-guides/site-builders/framer.md) 70 | * [Carrd.co](how-to-guides/site-builders/carrd.co.md) 71 | * [Squarespace](how-to-guides/site-builders/squarespace.md) 72 | * [Wix](how-to-guides/site-builders/wix.md) 73 | * [Dorik](how-to-guides/site-builders/dorik.md) 74 | * [Static Site Generators](how-to-guides/static-site-generators/README.md) 75 | * [Next.js](how-to-guides/static-site-generators/next.js.md) 76 | * [Astro](how-to-guides/static-site-generators/astro.md) 77 | * [Nuxt.js](how-to-guides/static-site-generators/nuxt.js.md) 78 | * [Hugo](how-to-guides/static-site-generators/hugo.md) 79 | * [Jekyll](how-to-guides/static-site-generators/jekyll.md) 80 | * [Gatsby](how-to-guides/static-site-generators/gatsby.md) 81 | * [Gridsome](how-to-guides/static-site-generators/gridsome.md) 82 | * [Eleventy](how-to-guides/static-site-generators/eleventy.md) 83 | * [Hosting Providers](how-to-guides/hosting-providers/README.md) 84 | * [Vercel](how-to-guides/hosting-providers/vercel.md) 85 | * [Netlify](how-to-guides/hosting-providers/netlify.md) 86 | * [Digital Ocean](how-to-guides/hosting-providers/digital-ocean.md) 87 | * [AWS](how-to-guides/hosting-providers/aws.md) 88 | * [Github](how-to-guides/hosting-providers/github.md) 89 | * [Cloudflare](how-to-guides/hosting-providers/cloudflare.md) 90 | * [JAM Stack](how-to-guides/jam-stack.md) 91 | * [Landing Page Builders](how-to-guides/landing-page-builders/README.md) 92 | * [Unbounce](how-to-guides/landing-page-builders/unbounce.md) 93 | * [Instapage](how-to-guides/landing-page-builders/instapage.md) 94 | * [Pagewiz](how-to-guides/landing-page-builders/pagewiz.md) 95 | * [Groovefunnels](how-to-guides/landing-page-builders/groovefunnels.md) 96 | * [WordPress](how-to-guides/wordpress/README.md) 97 | * [Elementor](how-to-guides/wordpress/elementor.md) 98 | * [Oxygen Builder](how-to-guides/wordpress/oxygen-builder.md) 99 | -------------------------------------------------------------------------------- /getting-started/api-reference.md: -------------------------------------------------------------------------------- 1 | # API Reference 2 | 3 | {% swagger baseUrl="https://api.web3forms.com" path="/submit" method="post" summary="Form Submission" %} 4 | {% swagger-description %} 5 | This endpoint allows you to submit form submissions. The following are the reserved names that will trigger form functions. You may use any other names in your forms as you need and it will be forwarded to your email as-is. 6 | {% endswagger-description %} 7 | 8 | {% swagger-parameter in="body" name="access_key" type="string" required="true" %} 9 | This is where you should pass your Access Key. It is required to send the form to your email address. 10 | {% endswagger-parameter %} 11 | 12 | {% swagger-parameter in="body" name="email" type="string" %} 13 | User Email. This will be used to set reply to address. So its easy to follow-up. 14 | {% endswagger-parameter %} 15 | 16 | {% swagger-parameter in="body" name="subject" type="string" %} 17 | Email Subject. It can be submitted by user or prefilled using `hidden` attribute. 18 | {% endswagger-parameter %} 19 | 20 | {% swagger-parameter in="body" name="ccemail" type="string" %} 21 | **PRO feature:** Add your co-workers to your email notification. 22 | {% endswagger-parameter %} 23 | 24 | {% swagger-parameter in="body" name="replyto" type="string" %} 25 | Reply to Email. If you don't want to use `email` as replyto, you can assign a custom email here. 26 | {% endswagger-parameter %} 27 | 28 | {% swagger-parameter in="body" name="redirect" type="string" %} 29 | URL. You can use a custom URL to redirect to a page when the form submits successfully.\ 30 | `NOTE: Only recommended when using without JavaScript` 31 | {% endswagger-parameter %} 32 | 33 | {% swagger-parameter in="body" name="botcheck" type="boolean" %} 34 | Hidden. To prevent Spam Submissions. Make sure its hidden by adding `display:none;` 35 | {% endswagger-parameter %} 36 | 37 | {% swagger-parameter in="body" name="attachment" type="file" %} 38 | **PRO feature:** Send a file. 39 | {% endswagger-parameter %} 40 | 41 | {% swagger-parameter in="body" name="webhook" type="string" %} 42 | **PRO feature:** Hidden. Trigger a webhook when form is submitted. 43 | {% endswagger-parameter %} 44 | 45 | {% swagger-response status="200" description="Form Submitted Successfully" %} 46 | ```javascript 47 | { 48 | "statusCode":200, 49 | "success":true, 50 | "body":{ 51 | "data":{ 52 | [USER SUBMITTED DATA] 53 | }, 54 | "message":"Email sent successfully!" 55 | } 56 | } 57 | ``` 58 | {% endswagger-response %} 59 | 60 | {% swagger-response status="400" description="Could not complete the request due to client error!" %} 61 | ```javascript 62 | { 63 | "statusCode":400, 64 | "success":false, 65 | "body":{ 66 | "data":{ 67 | [USER SUBMITTED DATA] 68 | }, 69 | "message":"Error Description" 70 | } 71 | } 72 | ``` 73 | {% endswagger-response %} 74 | 75 | {% swagger-response status="500" description="Something wrong happened in the server!" %} 76 | ```javascript 77 | { 78 | "statusCode":500, 79 | "success":false, 80 | "body":{ 81 | "data":{ 82 | [USER SUBMITTED DATA] 83 | }, 84 | "message":"Something went wrong. " 85 | } 86 | } 87 | ``` 88 | {% endswagger-response %} 89 | {% endswagger %} 90 | -------------------------------------------------------------------------------- /getting-started/customizations/README.md: -------------------------------------------------------------------------------- 1 | # Customizations 2 | 3 | -------------------------------------------------------------------------------- /getting-started/customizations/custom-reply-to.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Set a custom reply-to email for your submission. 3 | --- 4 | 5 | # Custom Reply-To 6 | 7 | By default, we take `email` as the `replyto` address. So if your form has an `email` input, you don't need to configure anything. In the submission you receive, you can see the reply to email. 8 | 9 | However, If you want to add a custom `replyto` email address, you can use the following code. 10 | 11 | ```markup 12 | 13 | ``` 14 | 15 | **Here's an example with full code:** 16 | 17 | ```markup 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 | ``` 41 | -------------------------------------------------------------------------------- /getting-started/customizations/email-subject.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Customize your notification email subject 3 | --- 4 | 5 | # Email Subject line 6 | 7 | ## `subject` 8 | 9 | There are two ways you can setup Email Subject. 10 | 11 | ## 1. Pre-defined Subject 12 | 13 | You can add a pre-defined subject by adding a form `input` with `type="hidden"` along with your subject in `value`. See the code below. 14 | 15 | ```markup 16 | 17 | ``` 18 | 19 | ## 2. User Generated Subject 20 | 21 | In this case, the subject can be filled by the website visitor. For that, you can use an input `type="text"`. See Code below. 22 | 23 | ```markup 24 | 25 | ``` 26 | 27 | {% hint style="info" %} 28 | The Name attribute must be called `subject` 29 | {% endhint %} 30 | 31 | ### 3. Custom Subject with User Input Value 32 | 33 | You can also customize the subject value to include user submitted value such as their first name. This will be easier to manage in emails when you have multiple emails coming from different users. 34 | 35 | Below is a **javascript** example for creating custom subject. For react, [check this example](../../how-to-guides/js-frameworks/react-js/react-js.md). 36 | 37 | 
const form = document.getElementById('form');
38 | const result = document.getElementById('result');
39 | 
40 | form.addEventListener('submit', function(e) {
41 |     e.preventDefault();
42 |     
43 |     const formData = new FormData(form);
44 |     
45 |     // Get the name input value
46 |     const name = formData.get('name');
47 |     
48 |     // Create a custom subject
49 |     const subject = `${name} sent a message from website`;
50 |     
51 |     // Append the custom subject to the form data
52 |     formData.append('subject', subject);
53 |     
54 |     const object = Object.fromEntries(formData);
55 |     const json = JSON.stringify(object);
56 |     
57 |     result.innerHTML = "Please wait...";
58 | 
59 |     fetch('https://api.web3forms.com/submit', {
60 |         method: 'POST',
61 |         headers: {
62 |             'Content-Type': 'application/json',
63 |             'Accept': 'application/json'
64 |         },
65 |         body: json
66 |     })
67 |     .then(async (response) => {
68 |         let json = await response.json();
69 |         if (response.status == 200) {
70 |             result.innerHTML = json.message;
71 |         } else {
72 |             console.log(response);
73 |             result.innerHTML = json.message;
74 |         }
75 |     })
76 |     .catch(error => {
77 |         console.log(error);
78 |         result.innerHTML = "Something went wrong!";
79 |     })
80 |     .then(function() {
81 |         form.reset();
82 |         setTimeout(() => {
83 |             result.style.display = "none";
84 |         }, 3000);
85 |     });
86 | });
87 |
88 | 89 | -------------------------------------------------------------------------------- /getting-started/customizations/from-name.md: -------------------------------------------------------------------------------- 1 | # From Name 2 | 3 | You can customize the **From Name** of the email you receive using the `from_name` hidden tag. The default From Name is "**Notifications**" 4 | 5 | ```markup 6 | 7 | ``` 8 | 9 | ![](../../.gitbook/assets/image%20%283%29.png) 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /getting-started/customizations/redirection.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Customize Success Redirection to your website after form submission 3 | --- 4 | 5 | # Custom Redirection 6 | 7 | ## `redirect` 8 | 9 | {% hint style="danger" %} 10 | This can be only used if you are using the Default HTML Form without Javascript. 11 | 12 | If you are using JavaScript or any other front-end Technology, Please use appropriate redirection method instead. [See Javascript Example](../../how-to-guides/html-and-javascript.md) 13 | {% endhint %} 14 | 15 | By default, Web3Forms redirects to our website after form submission, However if you have a custom URL on your website if you want to redirect after a successful form redirection, you can use the `redirect` option. You can set any URL you want. This could be a page on your website or a different website. See the code below. Make sure its an absolute URL with `https://` not relative. 16 | 17 | #### Examples 18 | 19 | ```html 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ``` 29 | 30 | Also, make sure you provide full URL as the value instead of relative URL 31 | 32 | ```html 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | ``` 41 | 42 | {% hint style="info" %} 43 | The Input type should be `hidden` and the name should be `redirect` 44 | {% endhint %} 45 | -------------------------------------------------------------------------------- /getting-started/customizations/spam-protection/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Prevent bots and spammers using your forms to send emails. 3 | --- 4 | 5 | # SPAM Protection 6 | 7 | Web3Forms provides variety of spam prevention methods. 8 | 9 | First of all, we do run a server-side spam check on all form submissions. So even if you have not implemented any client side spam check, you will receive less spam because of our server side spam check. 10 | 11 | However, to block more spam, we recommend adding one of the following server side spam check. Please click on each guide to see more detailed instructions. 12 | 13 | * [hCaptcha](hcaptcha.md) 14 | * [Honeypot](spam-protection.md) 15 | * [Google reCaptcha](../../pro-features/recaptcha-integration.md) (Pro only) 16 | -------------------------------------------------------------------------------- /getting-started/customizations/spam-protection/hcaptcha.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: >- 3 | hCaptcha is the privacy friendly alternative to Google reCaptcha. Used by 4 | Cloudflare, Shopify & more.. 5 | --- 6 | 7 | # hCaptcha 8 | 9 |

hCaptcha checkbox

10 | 11 |

hcaptcha solve problem

12 | 13 | Web3Forms provides zero-config integration with hCaptcha. You don't need to setup your own keys or register with them. Just use the following code and add a script. You're done. 14 | 15 | {% hint style="info" %} 16 | Remember **hCaptcha's** captcha mostly feels a bit difficult for users to solve. In that case, you can either use hCaptcha Paid Plan or use alternatives like hidden [honeypot](spam-protection.md) (less secure) or [reCaptcha](../../pro-features/recaptcha-integration.md) / [Cloudflare Turnstile Captcha](../../pro-features/cloudflare-turnstile-captcha.md) method (Pro). 17 | {% endhint %} 18 | 19 | **Step 1: Add a \
inside your form** 20 | 21 | ```html 22 |
23 | ... 24 | 25 |
26 | ... 27 |
28 | ``` 29 | 30 | **Step 2: Add the script before the closing of \** 31 | 32 | ```html 33 | 34 | 35 | ``` 36 | 37 | ### Configuration Options 38 | 39 | You can provide all options provided by hCaptcha by default. You need to append the option with `data-*` attribute. See example below 40 | 41 | ```markup 42 |
50 | ``` 51 | 52 | For more configuration options, visit: [https://docs.hcaptcha.com/configuration](https://docs.hcaptcha.com/configuration) 53 | 54 | ### Activate hCaptcha to your form 55 | 56 | Once everything's setup you need to activate hCaptcha on your form to make it mandatory on each form submissions. For that, submit the form by checking the checkbox once and send the form. Now your hCaptcha will be activated. 57 | 58 | {% hint style="info" %} 59 | Add Client Side Validation as shown below to prevent form submission without checking the hCaptcha field. 60 | {% endhint %} 61 | 62 | ### Client Side Validation 63 | 64 | Use this snippet if you are using the HTML form-embedded method without Javascript to check whether the hCaptcha is filled or not. 65 | 66 | Add this code block just above the closing of \ and make sure `YOUR_FORM_ID` is updated with your form id. 67 | 68 | ```html 69 | 83 | ``` 84 | 85 | ### Manual Setup 86 | 87 | If you want to load hCaptcha directly instead of using web3forms proxy, make sure you use the following **sitekey** for free plans. You can set your own site key and secret key on all paid plans, 88 | 89 | ```javascript 90 | // hCaptcha Site Key for Web3Forms 91 | data-sitekey="50b2fe65-b00b-4b9e-ad62-3ba471098be2" 92 | ``` 93 | 94 | ### Full Code 95 | 96 | ```html 97 |
98 | 99 | 100 | 101 | 102 | 103 | 104 |
105 | 106 | 107 |
108 | 109 | 110 | 111 | ``` 112 | 113 | If you add just two lines to your contact form, you will get a working hCaptcha to protect your form. 114 | 115 | ## Usage with React / Next.js 116 | 117 | To use hCaptcha with React or Next.js, please follow the instructions below. 118 | 119 | First, install the [@hcaptcha/react-hcaptcha ](https://www.npmjs.com/package/@hcaptcha/react-hcaptcha)package from NPM. 120 | 121 | ```bash 122 | npm install @hcaptcha/react-hcaptcha --save 123 | # or 124 | pnpm add @hcaptcha/react-hcaptcha 125 | ``` 126 | 127 | Then, add the \ component inside the form. 128 | 129 | Make sure you are using `50b2fe65-b00b-4b9e-ad62-3ba471098be2`as the `sitekey` for free plans. Also make sure `reCaptchaCompat` is false. 130 | 131 | You can use a custom site key if you are on a Paid plan. 132 | 133 | 
import { useForm } from "react-hook-form";
134 | import HCaptcha from '@hcaptcha/react-hcaptcha';
135 | 
136 | export default function ContactForm() {
137 |   const { register, handleSubmit, setValue } = useForm();
138 |   
139 |   const onHCaptchaChange = (token) => {
140 |     setValue("h-captcha-response", token);
141 |   };
142 |   
143 |   const onSubmit = async (data) => {
144 |     console.log(data);
145 |     
146 |     await fetch("https://api.web3forms.com/submit", {
147 |       method: "POST",
148 |       body: data
149 |     }).then((res) => res.json());
150 |   }
151 | 
152 | return (
153 |   <form onSubmit={handleSubmit(onSubmit)}>
154 |      {/* // other form fields */}
155 |       <HCaptcha
156 |          sitekey="50b2fe65-b00b-4b9e-ad62-3ba471098be2"
157 |          reCaptchaCompat={false}
158 |          onVerify={onHCaptchaChange} 
159 |       /> 
160 |   </form>
161 | )}
162 |
163 | 164 | That's it. 165 | 166 | Make sure you have enabled `hcaptcha` as the Block Spam option in the settings. Login to your dashboard to change it if not enabled already. 167 | 168 | #### Other implementations 169 | 170 | You can see the following guide for more examples. Just make sure you are using the correct `sitekey` as mentioned above.\ 171 | \ 172 | [https://www.npmjs.com/package/@hcaptcha/react-hcaptcha](https://www.npmjs.com/package/@hcaptcha/react-hcaptcha) 173 | -------------------------------------------------------------------------------- /getting-started/customizations/spam-protection/recaptcha-and-turnstile.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: This is a Pro feature. 3 | --- 4 | 5 | # reCaptcha & Turnstile 6 | 7 | reCaptcha & Turnstile captcha is available for Pro users. 8 | 9 | Check out the relavant pages: 10 | 11 | {% content-ref url="../../pro-features/recaptcha-integration.md" %} 12 | [recaptcha-integration.md](../../pro-features/recaptcha-integration.md) 13 | {% endcontent-ref %} 14 | 15 | {% content-ref url="../../pro-features/cloudflare-turnstile-captcha.md" %} 16 | [cloudflare-turnstile-captcha.md](../../pro-features/cloudflare-turnstile-captcha.md) 17 | {% endcontent-ref %} 18 | 19 | -------------------------------------------------------------------------------- /getting-started/customizations/spam-protection/report-spam.md: -------------------------------------------------------------------------------- 1 | # Report Spam 2 | 3 | We do filter all spam on the server side, so you can be safe. We block almost **8000+** spam every month for our users. 4 | 5 | However, there are some times when you will still get spam, In that case, please report that spam by forwarding the email to `support@web3forms.com` 6 | 7 | ![](../../../.gitbook/assets/image%20%282%29.png) 8 | 9 | In the email body, please also mention that you have received spam and want to block it. We will block the user IP and the corresponding message. 10 | 11 | -------------------------------------------------------------------------------- /getting-started/customizations/spam-protection/spam-protection.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'NOT RECOMMENDED: Prevent bots and spammers using your forms to send emails.' 3 | --- 4 | 5 | # Honeypot 6 | 7 | {% hint style="danger" %} 8 | **Warning:** This feature is depreciated. Please use any other captcha. 9 | 10 | _Honeypot seems to be less effective in forms to prevent spam submissions. So, we suggest you add a proper captcha to protect your form._ 11 | {% endhint %} 12 | 13 | Bots and Spam Submissions are prevented using the Honeypot Spam Prevention method. By now, these bots are getting advanced, so we have made sure to add some extra layer of protection for this Honeypot. This will stop most bots from submitting your form. 14 | 15 | ### `botcheck` 16 | 17 | {% hint style="info" %} 18 | Honeypot is optional to include, however we recommend adding this if you are not using the [hCaptcha](hcaptcha.md) or [reCaptcha Integration](../../pro-features/recaptcha-integration.md) 19 | {% endhint %} 20 | 21 | See the code below. 22 | 23 | ```markup 24 | 25 | ``` 26 | 27 | {% hint style="info" %} 28 | The Input type should be `checkbox` and the name should be `botcheck` 29 | {% endhint %} 30 | 31 | -------------------------------------------------------------------------------- /getting-started/customizations/success-thank-you-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: >- 3 | You can customize the success / thank you page as you like. See the options 4 | below. 5 | --- 6 | 7 | # Success / Thank You Page 8 | 9 | {% hint style="info" %} 10 | Tip: To use your own thank you page, visit [redirection.md](redirection.md "mention") page. 11 | {% endhint %} 12 | 13 |

Default Success Page

14 | 15 | ### Fix Stale Form Data after clicking "Go Back" 16 | 17 | You might have noticed, after successful form submission, the user will show success page as shown above. However, once user clicked the "Go Back" button, the contact form fileds will still show the form data. it will not clear. In that case, make sure you add the following code to fix that. 18 | 19 | ```html 20 | 26 | ``` 27 | 28 | ### Redirect to your your own Website / URL 29 | 30 | To redirect the success page to your own website or another different URL, please use the custom redirection. See this guide [redirection.md](redirection.md "mention")for more details. 31 | 32 | ### Show Success Message on the Same Page (Do not redirect) 33 | 34 | To skip redirection after the contact form submission and instead, if you want to show a success message on the same page, you can use the Javascript Method or similar. See [html-and-javascript.md](../../how-to-guides/html-and-javascript.md "mention")page for sample code. 35 | -------------------------------------------------------------------------------- /getting-started/examples/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | -------------------------------------------------------------------------------- /getting-started/examples/advanced-all-options.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: >- 3 | Here's an example with all possible customization options. Checkout other 4 | pages for more examples. 5 | --- 6 | 7 | # Advanced - All Options 8 | 9 | ```html 10 |
11 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 21 | 22 | 23 | 25 | 26 | 27 | 29 | 30 | 31 | 33 | 34 | 35 | 37 | 38 | 39 | 40 |
41 | 42 | 44 | 45 |
46 | 47 | 49 | 50 | 51 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
67 | 68 | 69 | 70 | 71 | ``` 72 | -------------------------------------------------------------------------------- /getting-started/examples/ajax-contact-form-using-javascript.md: -------------------------------------------------------------------------------- 1 | # Ajax Contact Form using Javascript 2 | 3 | [Check it out on Codepen](https://codepen.io/surjithctly/pen/OJWMKYG) 4 | 5 | ## HTML 6 | 7 | ```markup 8 | 18 | 19 |
20 |
21 |
22 |
23 |

26 | Contact Us 27 |

28 |

29 | Fill up the form below to send us a message. 30 |

31 |
32 |
33 |
34 | 35 | 40 | 41 | 42 |
43 | 48 | 56 |
57 |
58 | 63 | 71 |
72 |
73 | 76 | 84 |
85 |
86 | 91 | 92 | 100 |
101 |
102 | 108 |
109 |

110 |
111 |
112 |
113 |
114 |
115 | ``` 116 | 117 | ## Javascript 118 | 119 | ```javascript 120 | const form = document.getElementById("form"); 121 | const result = document.getElementById("result"); 122 | 123 | form.addEventListener("submit", function (e) { 124 | e.preventDefault(); 125 | 126 | const formData = new FormData(form); 127 | const object = Object.fromEntries(formData); 128 | const json = JSON.stringify(object); 129 | 130 | result.innerHTML = "Please wait..."; 131 | 132 | fetch("https://api.web3forms.com/submit", { 133 | method: "POST", 134 | headers: { 135 | "Content-Type": "application/json", 136 | Accept: "application/json", 137 | }, 138 | body: json, 139 | }) 140 | .then(async (response) => { 141 | let json = await response.json(); 142 | if (response.status == 200) { 143 | result.innerHTML = json.message; 144 | result.classList.remove("text-gray-500"); 145 | result.classList.add("text-green-500"); 146 | } else { 147 | console.log(response); 148 | result.innerHTML = json.message; 149 | result.classList.remove("text-gray-500"); 150 | result.classList.add("text-red-500"); 151 | } 152 | }) 153 | .catch((error) => { 154 | console.log(error); 155 | result.innerHTML = "Something went wrong!"; 156 | }) 157 | .then(function () { 158 | form.reset(); 159 | setTimeout(() => { 160 | result.style.display = "none"; 161 | }, 5000); 162 | }); 163 | }); 164 | ``` 165 | -------------------------------------------------------------------------------- /getting-started/examples/basic-html-contact-form.md: -------------------------------------------------------------------------------- 1 | # Basic HTML Contact Form 2 | 3 | ### Basic Example 4 | 5 | ```html 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | ``` 19 | 20 | 21 | 22 | ## Contact form with TailwindCSS 23 | 24 | [Check it out on Codepen](https://codepen.io/surjithctly/pen/ZELQggB) 25 | 26 | ```markup 27 |
28 |
29 |
30 |
31 |

34 | Contact Us 35 |

36 |

37 | Fill up the form below to send us a message. 38 |

39 |
40 |
41 |
42 | 43 | 48 | 53 | 54 |
55 | 60 | 68 |
69 |
70 | 75 | 83 |
84 |
85 | 88 | 96 |
97 |
98 | 103 | 104 | 112 |
113 |
114 | 120 |
121 |

122 |
123 |
124 |
125 |
126 |
127 | ``` 128 | -------------------------------------------------------------------------------- /getting-started/examples/contact-form-with-dark-mode.md: -------------------------------------------------------------------------------- 1 | # Contact Form with Dark Mode 2 | 3 | [Check it out on Codepen](https://codepen.io/surjithctly/pen/MWJygKb) 4 | 5 | ## HTML 6 | 7 | ```markup 8 | 18 | 19 |
20 |
21 |
22 |
23 |

Contact Us

24 |

25 | Fill up the form below to send us a message. 26 |

27 |
28 |
29 |
30 | 31 | 36 | 37 | 38 |
39 | 42 | 50 |
51 |
52 | 55 | 63 |
64 |
65 | 68 | 76 |
77 |
78 | 81 | 82 | 90 |
91 |
92 | 98 |
99 |

100 |
101 |
102 |
103 |
104 |
105 | ``` 106 | 107 | ## Javascript 108 | 109 | ```javascript 110 | const form = document.getElementById("form"); 111 | const result = document.getElementById("result"); 112 | 113 | form.addEventListener("submit", function (e) { 114 | e.preventDefault(); 115 | 116 | const formData = new FormData(form); 117 | const object = Object.fromEntries(formData); 118 | const json = JSON.stringify(object); 119 | result.innerHTML = "Please wait..."; 120 | 121 | fetch("https://api.web3forms.com/submit", { 122 | method: "POST", 123 | headers: { 124 | "Content-Type": "application/json", 125 | Accept: "application/json", 126 | }, 127 | body: json, 128 | }) 129 | .then(async (response) => { 130 | let json = await response.json(); 131 | if (response.status == 200) { 132 | result.innerHTML = json.message; 133 | result.classList.remove("text-gray-500"); 134 | result.classList.add("text-green-500"); 135 | } else { 136 | console.log(response); 137 | result.innerHTML = json.message; 138 | result.classList.remove("text-gray-500"); 139 | result.classList.add("text-red-500"); 140 | } 141 | }) 142 | .catch((error) => { 143 | console.log(error); 144 | result.innerHTML = "Something went wrong!"; 145 | }) 146 | .then(function () { 147 | form.reset(); 148 | setTimeout(() => { 149 | result.style.display = "none"; 150 | }, 5000); 151 | }); 152 | }); 153 | ``` 154 | -------------------------------------------------------------------------------- /getting-started/examples/file-upload-form.md: -------------------------------------------------------------------------------- 1 | # File Upload Form 2 | 3 | ### File Upload using Multipart/form-data 4 | 5 | ```html 6 |
7 | 8 | 9 | 10 | 11 | 12 |
13 | ``` 14 | 15 | ## File upload with Javascript 16 | 17 | #### Here's an example code with Javascript 18 | 19 | ```html 20 |
21 | ... 22 | 23 | ... 24 | 25 |
26 | ``` 27 | 28 | ```javascript 29 | const form = document.getElementById("myForm"); 30 | 31 | form.addEventListener("submit", function (e) { 32 | e.preventDefault(); 33 | 34 | const formData = new FormData(form); 35 | 36 | formData.append("access_key", "YOUR_ACCESS_KEY_HERE"); 37 | formData.append("subject", "New Submission from Web3Forms"); 38 | 39 | const file = document.getElementById("attachment"); 40 | const filesize = file.files[0].size / 1024; 41 | 42 | if (filesize > 1000) { 43 | alert("Please upload file less than 1 MB"); 44 | return; 45 | } 46 | 47 | // Don't add `headers` or `content-type` in this fetch call 48 | // Since it contains attachments, the browser auto-adds them. 49 | fetch("https://api.web3forms.com/submit", { 50 | method: "POST", 51 | body: formData 52 | }) 53 | .then(async (response) => { 54 | let json = await response.json(); 55 | if (response.status == 200) { 56 | console.log(json.message); 57 | } else { 58 | console.log(response); 59 | } 60 | }) 61 | .catch((error) => { 62 | console.log(error); 63 | }) 64 | .then(function () { 65 | form.reset(); 66 | }); 67 | }); 68 | 69 | ``` 70 | -------------------------------------------------------------------------------- /getting-started/examples/javascript-form-validation.md: -------------------------------------------------------------------------------- 1 | # Javascript Form Validation 2 | 3 | [Check it out on Codepen](https://codepen.io/surjithctly/pen/LYxNPEm) 4 | 5 | ## HTML 6 | 7 | ```markup 8 | 18 | 19 |
20 |
21 |
22 |
23 |

26 | Contact Us 27 |

28 |

29 | Fill up the form below to send us a message. 30 |

31 |
32 |
33 |
40 | 41 | 46 | 47 | 48 |
49 |
50 | 55 | 63 |
66 | Please provide your first name. 67 |
68 |
69 |
70 | 75 | 83 |
86 | Please provide your last name. 87 |
88 |
89 |
90 | 91 |
92 |
93 | 98 | 106 |
107 | Please provide your email address. 108 |
109 |
110 | Please provide a valid email address. 111 |
112 |
113 | 114 |
115 | 120 | 128 | 129 |
132 | Please provide your phone number. 133 |
134 |
135 |
136 |
137 | 142 | 143 | 151 |
154 | Please enter your message. 155 |
156 |
157 |
158 | 164 |
165 |

166 |
167 |
168 |
169 |
170 |
171 | ``` 172 | 173 | ## CSS 174 | 175 | ```css 176 | .invalid-feedback, 177 | .empty-feedback { 178 | display: none; 179 | } 180 | 181 | .was-validated :placeholder-shown:invalid ~ .empty-feedback { 182 | display: block; 183 | } 184 | 185 | .was-validated :not(:placeholder-shown):invalid ~ .invalid-feedback { 186 | display: block; 187 | } 188 | 189 | .is-invalid, 190 | .was-validated :invalid { 191 | border-color: #dc3545; 192 | } 193 | ``` 194 | 195 | ## Javascript 196 | 197 | ```javascript 198 | (function () { 199 | "use strict"; 200 | /* 201 | * Form Validation 202 | */ 203 | 204 | // Fetch all the forms we want to apply custom validation styles to 205 | const forms = document.querySelectorAll(".needs-validation"); 206 | const result = document.getElementById("result"); 207 | // Loop over them and prevent submission 208 | Array.prototype.slice.call(forms).forEach(function (form) { 209 | form.addEventListener( 210 | "submit", 211 | function (event) { 212 | if (!form.checkValidity()) { 213 | event.preventDefault(); 214 | event.stopPropagation(); 215 | 216 | form.querySelectorAll(":invalid")[0].focus(); 217 | } else { 218 | /* 219 | * Form Submission using fetch() 220 | */ 221 | event.preventDefault(); 222 | event.stopPropagation(); 223 | 224 | const formData = new FormData(form); 225 | const object = Object.fromEntries(formData); 226 | const json = JSON.stringify(object); 227 | result.innerHTML = "Please wait..."; 228 | 229 | fetch("https://api.web3forms.com/submit", { 230 | method: "POST", 231 | headers: { 232 | "Content-Type": "application/json", 233 | Accept: "application/json", 234 | }, 235 | body: json, 236 | }) 237 | .then(async (response) => { 238 | let json = await response.json(); 239 | if (response.status == 200) { 240 | result.innerHTML = json.message; 241 | result.classList.remove("text-gray-500"); 242 | result.classList.add("text-green-500"); 243 | } else { 244 | console.log(response); 245 | result.innerHTML = json.message; 246 | result.classList.remove("text-gray-500"); 247 | result.classList.add("text-red-500"); 248 | } 249 | }) 250 | .catch((error) => { 251 | console.log(error); 252 | result.innerHTML = "Something went wrong!"; 253 | }) 254 | .then(function () { 255 | form.reset(); 256 | form.classList.remove("was-validated"); 257 | setTimeout(() => { 258 | result.style.display = "none"; 259 | }, 5000); 260 | }); 261 | } 262 | form.classList.add("was-validated"); 263 | }, 264 | false 265 | ); 266 | }); 267 | })(); 268 | ``` 269 | -------------------------------------------------------------------------------- /getting-started/examples/multi-column-contact-form.md: -------------------------------------------------------------------------------- 1 | # Multi Column Contact Form 2 | 3 | [Check it out on Codepen](https://codepen.io/surjithctly/pen/poRgMdz) 4 | 5 | ## HTML 6 | 7 | ```markup 8 | 18 | 19 |
20 |
21 |
22 |
23 |

26 | Contact Us 27 |

28 |

29 | Fill up the form below to send us a message. 30 |

31 |
32 |
33 |
34 | 35 | 40 | 41 | 42 |
43 |
44 | 49 | 57 |
58 |
59 | 64 | 72 |
73 |
74 | 75 |
76 |
77 | 82 | 90 |
91 | 92 |
93 | 98 | 106 |
107 |
108 |
109 | 114 | 115 | 123 |
124 |
125 | 131 |
132 |

133 |
134 |
135 |
136 |
137 |
138 | ``` 139 | 140 | ## Javascript 141 | 142 | ```javascript 143 | const form = document.getElementById("form"); 144 | const result = document.getElementById("result"); 145 | 146 | form.addEventListener("submit", function (e) { 147 | e.preventDefault(); 148 | 149 | const formData = new FormData(form); 150 | const object = Object.fromEntries(formData); 151 | const json = JSON.stringify(object); 152 | 153 | result.innerHTML = "Please wait..."; 154 | 155 | fetch("https://api.web3forms.com/submit", { 156 | method: "POST", 157 | headers: { 158 | "Content-Type": "application/json", 159 | Accept: "application/json", 160 | }, 161 | body: json, 162 | }) 163 | .then(async (response) => { 164 | let json = await response.json(); 165 | if (response.status == 200) { 166 | result.innerHTML = json.message; 167 | result.classList.remove("text-gray-500"); 168 | result.classList.add("text-green-500"); 169 | } else { 170 | console.log(response); 171 | result.innerHTML = json.message; 172 | result.classList.remove("text-gray-500"); 173 | result.classList.add("text-red-500"); 174 | } 175 | }) 176 | .catch((error) => { 177 | console.log(error); 178 | result.innerHTML = "Something went wrong!"; 179 | }) 180 | .then(function () { 181 | form.reset(); 182 | setTimeout(() => { 183 | result.style.display = "none"; 184 | }, 5000); 185 | }); 186 | }); 187 | ``` 188 | -------------------------------------------------------------------------------- /getting-started/examples/raw-contact-form.md: -------------------------------------------------------------------------------- 1 | # Raw Contact Form 2 | 3 | [Check it out on Codepen](https://codepen.io/surjithctly/pen/WNRwwdx) 4 | 5 | ## HTML 6 | 7 | ```markup 8 | 18 | 19 |
20 |
21 | Contact Form 22 | 23 | 24 | 29 | 30 |
31 |
32 | 39 |

40 |
41 |
42 |
43 |

50 |
51 |
52 | 53 |
54 |

61 |
62 |
63 | 64 |
65 |

73 |
74 | 75 | 76 |
77 |
78 | ``` 79 | 80 | ## CSS 81 | 82 | ```css 83 | form { 84 | max-width: 500px; 85 | margin: 150px auto; 86 | } 87 | 88 | fieldset { 89 | padding: 30px; 90 | } 91 | 92 | input, 93 | textarea, 94 | button { 95 | width: 100%; 96 | } 97 | ``` 98 | -------------------------------------------------------------------------------- /getting-started/examples/recaptcha-v3.md: -------------------------------------------------------------------------------- 1 | # Google reCaptcha v3 2 | 3 | HTML (Styled using TailwindCSS) 4 | 5 | ```html 6 |
7 |
8 |
9 |
10 |

11 | Contact Us 12 |

13 |

14 | Fill up the form below to send us a message. 15 |

16 |
17 |
18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 |
34 | 35 | 36 |
37 |
38 | 39 | 40 | 41 |
42 |
43 | 46 |
47 |

48 |
49 |
50 |
51 |
52 |
53 | 54 | 55 | 56 | 57 | 66 | ``` 67 | 68 | Javascript 69 | 70 | ```javascript 71 | const form = document.getElementById("form"); 72 | const result = document.getElementById("result"); 73 | 74 | form.addEventListener("submit", function (e) { 75 | e.preventDefault(); 76 | 77 | const formData = new FormData(form); 78 | const object = Object.fromEntries(formData); 79 | const json = JSON.stringify(object); 80 | result.innerHTML = "Please wait..."; 81 | 82 | fetch("https://api.web3forms.com/submit", { 83 | method: "POST", 84 | headers: { 85 | "Content-Type": "application/json", 86 | Accept: "application/json" 87 | }, 88 | body: json 89 | }) 90 | .then(async (response) => { 91 | let json = await response.json(); 92 | if (response.status == 200) { 93 | result.innerHTML = json.message; 94 | result.classList.remove("text-gray-500"); 95 | result.classList.add("text-green-500"); 96 | } else { 97 | console.log(response); 98 | result.innerHTML = json.message; 99 | result.classList.remove("text-gray-500"); 100 | result.classList.add("text-red-500"); 101 | } 102 | }) 103 | .catch((error) => { 104 | console.log(error); 105 | result.innerHTML = "Something went wrong!"; 106 | }) 107 | .then(function () { 108 | form.reset(); 109 | setTimeout(() => { 110 | result.style.display = "none"; 111 | }, 5000); 112 | }); 113 | }); 114 | 115 | ``` 116 | -------------------------------------------------------------------------------- /getting-started/examples/with-multiple-checkbox.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: How to integrate Checkbox with Web3Forms Properly 3 | --- 4 | 5 | # With Multiple Checkbox 6 | 7 | There are some confusions on how multiple checkboxes works and how to to integrate it with Web3Forms. 8 | 9 | If you simply added a checkbox like this and sent the data to a regular form action, `check` would return `on` or `off` based on whether the user checked or not. 10 | 11 | ```html 12 | 13 | ``` 14 | 15 | However, if you need to add a value to your checkbox, you need to define it like this: 16 | 17 | ``` 18 | 19 | ``` 20 | 21 | Now, this would return `check: checked` 22 | 23 | ### Multiple Checkboxes 24 | 25 | You need to add the same **name** with different values for multiple checkboxes. See: 26 | 27 | ```html 28 | 29 | 30 | 31 | 32 | 33 | ``` 34 | 35 | Web3Forms will then automatically parse them to be comma-separated like this: 36 | 37 | ``` 38 | Interests 39 | coding,music 40 | ``` 41 | 42 | ### Multiple Checkbox with Javascript 43 | 44 | If you are using javascript, you have to manually stringify multiple data like this before sending the request to Web3Forms API. See example code: 45 | 46 | ```javascript 47 | const formData = new FormData(form); 48 | const interests = []; 49 | 50 | form.querySelectorAll('input[name="interest"]:checked').forEach((checkbox) => { 51 | interests.push(checkbox.value); 52 | }); 53 | 54 | formData.set('interest', interests); 55 | ``` 56 | 57 | This will set the checkbox as you intended. 58 | 59 | #### Live Demo 60 | 61 | {% embed url="https://codepen.io/surjithctly/pen/eYobEbO" %} 62 | [View Codepen](https://codepen.io/surjithctly/pen/eYobEbO?editors=1010) 63 | {% endembed %} 64 | 65 | -------------------------------------------------------------------------------- /getting-started/faq.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Frequently Asked Questions 3 | --- 4 | 5 | # FAQ 6 | 7 | ## 1. Access Keys 8 | 9 | ### Do I need to hide access key? 10 | 11 | No. You do not need to hide the access key. Access key is public. No need to confuse it with secret API key. An access key is used to send emails to a particular email. It doesn't store any sensitive data. Think of it as an alias to your email, but one step harder. 12 | 13 | ### What happens if someone else got my access key? 14 | 15 | Nothing much. What happens if you accidentally made your email address public? They can send you emails. Similarly, if someone else has access to your access\_key, they can only send you emails. 16 | 17 | ### Can someone spam me if they got my access key? 18 | 19 | Same as email address, they can use it to send you unsolicited emails. But Web3Forms has multiple security measures to prevent such things from happening. We have a firewall & active spam check algorithms which blocks spam emails reaching from your inbox. 20 | 21 | As a user, you have multiple additional options to protect your form. 22 | 23 | ### How to prevent spam and Protect my form? 24 | 25 | To protect your form from unauthorized uses, you can use following measures: 26 | 27 | 1. A**dd Captcha:** This is a simple and effective way to stop such spam as each submission must have a valid captcha token. You can use multiple captchas such as [hCaptcha](customizations/spam-protection/hcaptcha.md), [reCaptcha](pro-features/recaptcha-integration.md) or [Turnstile](pro-features/cloudflare-turnstile-captcha.md) 28 | 2. **Domain Restriction:** You can also enable domain restrictions on your form so that only forms submitted from your website will go through. All other submissions will be blocked. Please note that this is a pro feature. 29 | 30 | ## 2. GDPR & Privacy 31 | 32 | ### Are you GDPR Compliant? 33 | 34 | We do not store any form submissions of our users. We process them and forward to your email or the endpoint you specified such as webhooks. So, we are confident that we comply with GDPR regulations, but we cannot make any legal statements. You can consult with your legal advisor to ask opinion. 35 | 36 | There might be server logs containing personally identifiable informations which we delete periodically (every 2 months) 37 | 38 | ### Where are your servers located? 39 | 40 | Our servers are located in the United States US-East Region. We are not based on Europe. 41 | 42 | ### Are you a registered company? 43 | 44 | Web3forms is a subsidiary product of our parent company named Web3Creative which is a registered business based in Kerala, India. Registration Details: 45 | 46 | Registration Certificate (LCAS): SH091040080115 47 | 48 | IEC Code: \[redacted for privacy] 49 | 50 | Udyam Registration: UDYAM-KL-10-0039115 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /getting-started/installation.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | ## Step 01: Get Access Key 4 | 5 | First step is to get an Access Key from Web3Forms. [Create Access Key](https://web3forms.com/#start) 6 | 7 | Once you submit the form, you will get the Access key in your Email. Copy that key so that we can use this later. 8 | 9 | ## Step 2: Create HTML Form 10 | 11 | Create a form in your website with our form endpoint inside action attribute. Following is a simple example on how it should look like: 12 | 13 | {% tabs %} 14 | {% tab title="Basic Example" %} 15 | ```html 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | ``` 28 | {% endtab %} 29 | 30 | {% tab title="Advanced Example" %} 31 | ```html 32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 44 | 45 | 46 | 47 | 48 | 49 | 51 | 52 | 53 | 55 | 56 | 57 | 58 | 59 | 61 | 62 | 63 | 65 | 66 | 67 | 68 | 69 | 70 | 72 | 73 | 74 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 |
84 | ``` 85 | {% endtab %} 86 | {% endtabs %} 87 | 88 | {% hint style="info" %} 89 | Make sure you added \`name\` attribute, form action URL and the \`access\_key\` to make the form work as expected 90 | {% endhint %} 91 | 92 | ## Step 3: Add your Access Key 93 | 94 | Add your access key to start receiving email submissions. 95 | 96 | ```html 97 | 98 | ``` 99 | 100 | ## Step 4: Done 101 | 102 | That's it. Run your code on a browser and it should work. This is a simple starting example. However you can customize it with unlimited possibilities. Checkout other pages to know more. 103 | -------------------------------------------------------------------------------- /getting-started/integrations/README.md: -------------------------------------------------------------------------------- 1 | # Integrations 2 | 3 | -------------------------------------------------------------------------------- /getting-started/integrations/examples/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | -------------------------------------------------------------------------------- /getting-started/integrations/examples/airtable.md: -------------------------------------------------------------------------------- 1 | # Airtable 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /getting-started/integrations/examples/google-sheets.md: -------------------------------------------------------------------------------- 1 | # Google Sheets 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /getting-started/integrations/examples/telegram-notifications.md: -------------------------------------------------------------------------------- 1 | # Telegram Notifications 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /getting-started/integrations/integromat.md: -------------------------------------------------------------------------------- 1 | # Integromat 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /getting-started/integrations/zapier.md: -------------------------------------------------------------------------------- 1 | # Zapier 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /getting-started/options-reference.md: -------------------------------------------------------------------------------- 1 | # Options Reference 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /getting-started/pro-features/README.md: -------------------------------------------------------------------------------- 1 | # Pro Features 2 | 3 | The [Pro plan](https://web3forms.com/pricing) offers even more possibilities: 4 | 5 | * Everything from Free Plan 6 | * High Submission Limits 7 | * File Attachments 8 | * reCaptcha Integration 9 | * Webhooks 10 | * Autoresponders 11 | * Form Templates 12 | * Domain Whitelisting 13 | * and more.. 14 | -------------------------------------------------------------------------------- /getting-started/pro-features/add-cc-email.md: -------------------------------------------------------------------------------- 1 | # Add CC Email 2 | 3 | {% hint style="info" %} 4 | Heads Up! This is a PRO feature. You must have an active membership to use this feature. 5 | {% endhint %} 6 | 7 | ```markup 8 | 9 | ``` 10 | 11 | If you have multiple cc emails, you can add them using semi-column `;` as a separator. 12 | 13 | Example: 14 | 15 | ```markup 16 | 17 | ``` 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /getting-started/pro-features/advanced-file-uploader.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: >- 3 | For large attachments or multiple file uploads, use our advanced file 4 | uploader. 5 | --- 6 | 7 | # Advanced File Uploader 8 | 9 | {% hint style="info" %} 10 | Heads Up! This is a PRO feature. You must have an active subscription to use this feature. 11 | {% endhint %} 12 | 13 |
14 | 15 | Our Default HTML5 File Uploader only supports file attachments up to 5 MB. Also currently it does not support multiple files. If you need to upload large files or multiple files, use our advanced file uploader. 16 | 17 | **Step 1: Add a File input inside your form with \`**data-advanced**\` attribute** 18 | 19 | 
<form action="https://api.web3forms.com/submit" enctype="multipart/form-data" method="POST">
 20 |   ...
 21 |    <! -- Step 1: Add this line -->
 22 |    <input type="file" data-advanced="true" name="attachment" style="display:none;" />
 23 |   ...
 24 | </form>
 25 |
26 | 27 | **Step 2: Add the following script before the closing of \** 28 | 29 | ```html 30 | 31 | 32 | ``` 33 | 34 | ### Advanced Options 35 | 36 | You can configure some options in the advanced uploader like multiple, accept types, max file size etc. See below: 37 | 38 | ```html 39 | 47 | ``` 48 | 49 | ### Live Demo on Codepen 50 | 51 | [https://codepen.io/surjithctly/pen/RwXBQZR](https://codepen.io/surjithctly/pen/RwXBQZR) 52 | 53 | ### Example Code 54 | 55 | ```html 56 |
57 | 58 | 59 | 60 | 61 | 62 | 63 | 70 | 71 | 72 |
73 | 74 | 75 | 76 | ``` 77 | 78 | If you add just two lines to your contact form, you will get an advanced file upload form. 79 | 80 | {% hint style="info" %} 81 | Note: You do not need to use `multipart/form-data` if you are using our advanced file uploader. You can use the normal method. 82 | {% endhint %} 83 | 84 | ### Styling & Theme 85 | 86 | You can set your own theme & style as you wish by overwriting the class names provided by filepond. Here's how a dark theme would look like: 87 | 88 | ```html 89 | 90 | 91 | 99 | 100 | ``` 101 | 102 | 103 | 104 | ### Client Side Validation 105 | 106 | Use this snippet to make the file upload field required and to validate if the file is uploaded or not. 107 | 108 | Add the following code block just above the closing of \ and make sure `YOUR_FORM_ID` is updated with your form id. 109 | 110 | ```html 111 | 125 | ``` 126 | 127 | ## Usage with React 128 | 129 | Iif you are using react, we suggest you to use the Filepond Library directly. 130 | 131 | Also check: [Filepond React](https://github.com/pqina/react-filepond) 132 | 133 | **File Uploader Widget** 134 | 135 | ```jsx 136 | import React, { useState } from 'react'; 137 | import { FilePond, registerPlugin } from 'react-filepond'; 138 | import 'filepond/dist/filepond.min.css'; 139 | 140 | // Register plugins if needed 141 | // registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview); 142 | 143 | function FileUploader() { 144 | const [files, setFiles] = useState([]); 145 | 146 | const getPresignedUrl = async (file) => { 147 | try { 148 | const response = await fetch(`https://api.web3forms.com/upload?file=${file.name}`); 149 | const data = await response.json(); 150 | return data; 151 | } catch (error) { 152 | console.error('Error generating pre-signed URL:', error); 153 | throw error; 154 | } 155 | }; 156 | 157 | return ( 158 | { 167 | try { 168 | const { url, key } = await getPresignedUrl(file); 169 | 170 | const response = await fetch(url, { 171 | method: 'PUT', 172 | body: file, 173 | headers: { 174 | 'Content-Type': file.type, 175 | }, 176 | }); 177 | 178 | if (response.ok) { 179 | load(key); 180 | } else { 181 | error('Upload failed'); 182 | } 183 | } catch (err) { 184 | error('Error uploading file'); 185 | } 186 | }, 187 | }} 188 | /> 189 | ); 190 | } 191 | 192 | export default FileUploader; 193 | ``` 194 | 195 | **Using it with Vanilla React** 196 | 197 | ```jsx 198 | import React from 'react'; 199 | import FileUploader from './FileUploader'; 200 | 201 | function App() { 202 | return ( 203 |
204 |

File Upload Example

205 |
206 | 211 | 212 | 213 | 214 | 215 |
216 | ); 217 | } 218 | 219 | export default App; 220 | ``` 221 | 222 | 223 | 224 | **Usage with React Hook Form** 225 | 226 | ```jsx 227 | import { useForm, Controller } from "react-hook-form"; 228 | import FileUploader from './FileUploader'; 229 | 230 | export default function Support() { 231 | const { register, handleSubmit } = useForm({ 232 | mode: "onTouched", 233 | }); 234 | 235 | const onSubmit = async (data, e) => { 236 | // Replace with actual call to Web3Forms 237 | console.log(data); 238 | }; 239 | 240 | return ( 241 |
242 | 243 | ( 247 | field.onChange(e.cdnUrl)} 249 | /> 250 | )} 251 | /> 252 | 253 | 254 | ); 255 | } 256 | 257 | ``` 258 | -------------------------------------------------------------------------------- /getting-started/pro-features/autoresponder.md: -------------------------------------------------------------------------------- 1 | # Autoresponder (Auto-Reply) 2 | 3 | {% hint style="info" %} 4 | Heads Up! This is a PRO feature. You must have an active membership to use this feature. 5 | {% endhint %} 6 | 7 | Autoresponder is available for all Pro users. Contact support with the following details. 8 | 9 | 1. From Name (Company Name) 10 | 2. Autoresponder Subject 11 | 3. Autoresponder Intro Text (eg: Thanks for submitting the form..) 12 | 4. Show copy of their submission in the email - Yes/No 13 | 5. Full `https://` path of your Logo Image (PNG preferred)\ 14 | eg: `https://yoursite.com/img/logo.png` 15 | 16 | Also, to make the autoresponder work, you must make sure an **email field** with name attribute `email` or `Email` is included in the form. The autoresponder will send emails to that particular email once user filled the form. 17 | 18 | ```html 19 | // example code ⌄⌄⌄⌄⌄⌄⌄⌄⌄⌄⌄ 20 | 21 | ``` 22 | -------------------------------------------------------------------------------- /getting-started/pro-features/cloudflare-turnstile-captcha.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Web3Forms supports cloudflare turnstile captcha in our forms. 3 | --- 4 | 5 | # Cloudflare Turnstile Captcha 6 | 7 | **Codepen Demo**: [https://codepen.io/surjithctly/pen/ExdGwpE](https://codepen.io/surjithctly/pen/ExdGwpE) 8 | 9 | {% hint style="info" %} 10 | Heads Up! This is a PRO feature. \ 11 | You must have an active subscription to use this feature. 12 | {% endhint %} 13 | 14 | ## Steps 15 | 16 | ### 1. Create Turnstile Captcha Accounut 17 | 18 | 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/?to=/:account/turnstile) and select your account. 19 | 2. Go to **Turnstile**. 20 | 3. In the widget overview, select **Settings**. 21 | 4. Copy your **sitekey** and **secret key**. 22 | 23 | ### 2. Add the Turnstile Script to your website 24 | 25 | To add the Turnstile script: 26 | 27 | 1. Insert the Turnstile script snippet in your HTML’s `` element: 28 | 29 | ``` 30 | 31 | ``` 32 | 33 | ### 3. Render the widget inside your form 34 | 35 | To render the Turnstile widget in your form: 36 | 37 | 1. Insert the below code inside your `
` tag. Make sure to change `YOUR_SITE_KEY_HERE` with the actual site key. 38 | 39 | ``` 40 |
41 | ``` 42 | 43 | ### 4. Add Secret Keys to your Web3Forms Dashboard 44 | 45 | 1. Visit the Web3Forms Dashboard and select your form. 46 | 2. Open Settings and choose `turnstile` as your captcha provider 47 | 3. Enter the **Secret Key** in the Textbox below 48 | 4. Save Changes 49 | 50 | That's it. Your form will automatically be protected with Cloudflare Captcha. 51 | 52 | \--- 53 | 54 | To read more detailed guide, visit the official docs here: [https://developers.cloudflare.com/turnstile/get-started/](https://developers.cloudflare.com/turnstile/get-started/) 55 | -------------------------------------------------------------------------------- /getting-started/pro-features/file-attachments.md: -------------------------------------------------------------------------------- 1 | # File Attachments 2 | 3 | {% hint style="info" %} 4 | Heads Up! This is a PRO feature. You must have an active membership to use this feature. 5 | {% endhint %} 6 | 7 | ```markup 8 | 9 | ``` 10 | 11 | You will need to add `enctype="multipart/form-data"` to the Form Element to make the attachment work. 12 | 13 | ```markup 14 | 15 | ... 16 | 17 | ... 18 |
19 | ``` 20 | 21 | {% hint style="info" %} 22 | If you are using Javascript / Ajax to submit the form, make sure you set the Headers accordingly. Setting wrong headers will throw an error. 23 | {% endhint %} 24 | 25 | ### Multiple File Attachments 26 | 27 | We support multiple file attachments on the contact form. We process them together and send them to you. 28 | 29 | ```html 30 |
31 | ... 32 | 33 | 34 | 35 | 36 | 37 | ... 38 |
39 | ``` 40 | 41 | ### Advanced File Uploader 42 | 43 | Our Default HTML5 File uploader works only for single files up to 5 MB only. To upload multiple files or larger attachments, we recommend using our Advanced File Uploader. [Please see the guide here](file-attachments.md#undefined) 44 | 45 | ## File upload with Javascript 46 | 47 | #### Here's an example code with Javascript 48 | 49 | ```html 50 |
51 | ... 52 | 53 | ... 54 | 55 |
56 | ``` 57 | 58 | ```javascript 59 | const form = document.getElementById("myForm"); 60 | 61 | form.addEventListener("submit", function (e) { 62 | e.preventDefault(); 63 | 64 | const formData = new FormData(form); 65 | 66 | formData.append("access_key", "YOUR_ACCESS_KEY_HERE"); 67 | formData.append("subject", "New Submission from Web3Forms"); 68 | 69 | const file = document.getElementById("attachment"); 70 | const filesize = file.files[0].size / 1024; 71 | 72 | if (filesize > 1000) { 73 | alert("Please upload file less than 1 MB"); 74 | return; 75 | } 76 | 77 | // Don't add `headers` or `content-type` in this fetch call 78 | // Since it contains attachments, the browser auto-adds them. 79 | fetch("https://api.web3forms.com/submit", { 80 | method: "POST", 81 | body: formData 82 | }) 83 | .then(async (response) => { 84 | let json = await response.json(); 85 | if (response.status == 200) { 86 | console.log(json.message); 87 | } else { 88 | console.log(response); 89 | } 90 | }) 91 | .catch((error) => { 92 | console.log(error); 93 | }) 94 | .then(function () { 95 | form.reset(); 96 | }); 97 | }); 98 | 99 | ``` 100 | -------------------------------------------------------------------------------- /getting-started/pro-features/intro-text.md: -------------------------------------------------------------------------------- 1 | # Intro Text 2 | 3 | Email Intro Text customizations are available for all Paid users. Contact Support to Enable. 4 | 5 |
6 | -------------------------------------------------------------------------------- /getting-started/pro-features/recaptcha-integration.md: -------------------------------------------------------------------------------- 1 | # reCaptcha Integration 2 | 3 | Web3forms supports Google's reCaptcha for forms. We recommend to use the v3 version since its easy for humans and hard for bots. 4 | 5 | **Codepen Demo**: [https://codepen.io/surjithctly/pen/BaZQLyR](https://codepen.io/surjithctly/pen/BaZQLyR) 6 | 7 | {% hint style="info" %} 8 | Heads Up! This is a PRO feature. You must have an active membership to use this feature. 9 | {% endhint %} 10 | 11 | To setup, first you should register your domain on Google reCaptcha and generate API keys from their website. Go to [reCaptcha Website](https://www.google.com/recaptcha/admin/create) to create new keys. Choose reCaptcha v3 from the option. Add your domain name and submit to create your keys. You will need both Site Key and Secret Key. Copy those code and save it in your notepad. We will need this later. 12 | 13 | ![Registering reCaptcha](<../../.gitbook/assets/image (4) (2) (2) (2) (2).png>) 14 | 15 | Now login to Web3Forms Dashboard (Beta Access) and add your reCaptcha Secret Key in the form settings. 16 | 17 | Now open your HTML file where your form exists and paste the following code just before the closing of `` tag. 18 | 19 | ```markup 20 | 21 | 22 | 23 | 34 | ``` 35 | 36 | Now replace `YOUR_SITE_KEY_HERE` with your actual Site key you've obtained from the reCaptcha Website. You need to replace it in two places above. `LINE 3` & `LINE 6` 37 | 38 | {% hint style="warning" %} 39 | Heads Up! You'll need to change the SITE KEY in two places in the above code. 40 | {% endhint %} 41 | 42 | Now add the following code inside your `
` tag. 43 | 44 | ```markup 45 | 46 | ``` 47 | 48 | That's it. Now test your form and it should work without any extra configuration. 49 | 50 | #### How to know the reCaptcha is working as expected? 51 | 52 | To test, right click the page and choose **Inspect Element**. Now inspect the `` part where the above `recaptcha_response` will be populated with a large key value. If you don't see that, check `console.log()` for more info. 53 | -------------------------------------------------------------------------------- /getting-started/pro-features/restrict-to-domain.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Whitelist a domain to send the form from. 3 | --- 4 | 5 | # Restrict to Domain 6 | 7 | {% hint style="info" %} 8 | Heads Up! This is a PRO feature. You must have an active membership to use this feature. 9 | {% endhint %} 10 | 11 | You can restrict the form from sending only through a whitelisted domain. This will potentially reduce spam attacks. So even if someone else got the access key, they cannot send emails to you. Only emails from your website are counted. 12 | 13 | To enable this feature, Please **contact support**. 14 | -------------------------------------------------------------------------------- /getting-started/pro-features/webhooks.md: -------------------------------------------------------------------------------- 1 | # Webhooks 2 | 3 | Webhooks can be a great way to connect your form to other apps via Zapier or Integromat. The possibilites are limitless. 4 | 5 | Using Webhooks, you can transform the data you received to your favorite CRM or Email Newsletter Provider. Or you can create Notifications & Alerts on Slack or Telegram. And you can also transfrom the data to the plain good ol' google sheets. 6 | 7 | Its up to you how you want to transform the data. Everything is possible just by adding your webhook URL to the form. 8 | 9 | {% hint style="info" %} 10 | Heads Up! This is a PRO feature. You must have an active membership to use this feature. 11 | {% endhint %} 12 | 13 | ### Creating Webhooks URL 14 | 15 | Webhook URL can be created on apps like [Zapier](https://zapier.com/) or [Make](https://www.make.com/) or [Pipedream](https://pipedream.com/). We recommend Pipedream if you are technical because it has a good free plan to try out webhooks. 16 | 17 | ### Adding Webhooks to your form 18 | 19 | Just add the following line inside your `` and make sure the change the `value=""` with your actual webhook URL from your app. 20 | 21 | ```markup 22 | 23 | ``` 24 | 25 | ### Webhook Payload Structure 26 | 27 | We will be sending the same data you sent to Web3Forms as `body` to your webhook URL. However, will also delete some metadata such as `access_key` & attachments before we send. 28 | -------------------------------------------------------------------------------- /getting-started/troubleshooting.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Here are common issues with Web3Forms and how to fix them. 3 | --- 4 | 5 | # Troubleshooting 6 | 7 | ## Form submitted successfully but email not received 8 | 9 | Form Submission Emails are sent instantly and will reach your inbox in seconds. In rare cases, it can take up to 1-2 minutes. Even if you don't receive any email after waiting, please make sure you check the "Promotions" or "Updates" tab if you are using Gmail. Otherwise, you can check the "Spam/Junk" folder once to confirm the email is landed there. 10 | 11 | Once you have received the email, it is recommended to drag the email to your Primary Inbox and press "YES" when asked if you want to mark future emails as important. So all future emails from our `notify+{hash}@web3forms.com` will reach your primary inbox. 12 | 13 | #### **Bounced Emails** 14 | 15 | Another chance is that sometimes the email might be bounced. Thus it will prevent all subsequent request to that particular email. This usally happens when you create an Access key before the email is configured. \ 16 | \ 17 | If that's the case, [contact support](https://web3forms.com/help?contact=true) and we will remove it from the **suppression list**. 18 | 19 | ## Email received without any data 20 | 21 | Ensure you have added a `name` attribute to each of your form elements. Form data is processed only if `name` attribute is present in the formData. 22 | 23 | ```markup 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | ``` 35 | 36 | ## Emails going to Spam/Junk Folder 37 | 38 | if your Web3Forms Submission emails lands in your email provider's spam/junk folder especially if you are using hotmail or outlook, follow the steps. 39 | 40 | 1. Add _`notify@web3forms.com`_ email to your contact list 41 | 2. Add our domain `web3forms.com` to your safe sender's list 42 | 43 |

enabling safe sender in outlook

44 | 45 | **In Gmail:** 46 | 47 | 1. Manually mark a few of the emails as Not Spam / Not Junk 48 | 2. Move a few emails to your Primary/Main Inbox Tab 49 | 3. Add a filter to enable "Never Send to Spam" for emails coming from Web3Forms. 50 | 51 | ## CORS Error 52 | 53 | Sometimes, you might receive a following error message while submitting form to web3forms. 54 | 55 | {% hint style="info" %} 56 | _Access to fetch at `https://api.web3forms.com/submit` from origin `https://yourwebsite.com` has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled._ 57 | {% endhint %} 58 | 59 | This is not an issue with Web3Forms, but it can be easily fixed by modifying your code. By default Web3Forms allow CORS from any website, but here are few things you need to keep in mind to fix them: 60 | 61 | Web3Forms supports two types of Content-Type 62 | 63 | 1. `x-www-form-urlencoded` 64 | 2. `application/json` 65 | 66 | The first one is used by the browser automatically when submitting the form using the default HTML Method, There is nothing you need to configure and it works as expected in modern browsers. 67 | 68 | The `application/json` is however to be used while sending the formData from Javascript or from your framework. So the server will return `application/json` to the client as well. Now you can show success message based on the return json or redirect to another page. 69 | 70 | ### How to fix the CORS Error in Web3Forms? 71 | 72 | #### **301 Redirect Cors Error** 73 | 74 | If you are using the javascript method to send the form, you should not use `redirect` in the HTML form. You should remove that and add the redirect inside the javascript success callback using `window.location.href` 75 | 76 | ```html 77 | // ❌ Wrong 78 | 79 | 80 | ... 81 | 82 | ... 83 |
84 | 85 | 86 | 87 | // ✅ Correct 88 | 89 |
90 | ... 91 |
92 | 93 | 102 | ``` 103 | 104 | #### Mixed Content-Type Error 105 | 106 | The CORS error usually happens when you mix javascript and form-urlencoded together. 107 | 108 | You should never use `x-www-form-urlencoded` while sending data through Web3Forms as it returns a `301` redirect after form submission. This will result in a CORS error for the user while the message delivers as usual. 109 | 110 | To fix the issue, you must always use `application/json` for custom POST method or use the [FormData()](https://developer.mozilla.org/en-US/docs/Web/API/FormData) function provided by Javascript. This will ensure correct response from Web3Forms server. 111 | 112 | ```javascript 113 | // ❌ Wrong 114 | 115 | const response = await fetch('https://api.web3forms.com/submit', { 116 | method: 'POST', 117 | headers: { 118 | 'Content-Type': 'x-www-form-urlencoded', 119 | }, 120 | body: JSON.stringify(data), 121 | }); 122 | 123 | 124 | 125 | // ✅ Correct 126 | 127 | const response = await fetch('https://api.web3forms.com/submit', { 128 | method: 'POST', 129 | headers: { 130 | 'Content-Type': 'application/json', 131 | }, 132 | body: JSON.stringify(data), 133 | }); 134 | 135 | ``` 136 | 137 | ## 403: Forbidden 138 | 139 | In some rare cases, you/your customers might receive `{ message: forbidden }` error with HTTP code `403` from our server. This is usually because the IP address might have triggered our firewall. This usually happens when the IP has been previously blacklisted for Spam activity. Sometimes, It happens on broadband connections with pooled IP as well. 140 | 141 | If you got this error and you think it's a mistake, please contact support for further assistance. 142 | 143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /how-to-guides/hosting-providers/README.md: -------------------------------------------------------------------------------- 1 | # Hosting Providers 2 | 3 | -------------------------------------------------------------------------------- /how-to-guides/hosting-providers/aws.md: -------------------------------------------------------------------------------- 1 | # AWS 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /how-to-guides/hosting-providers/cloudflare.md: -------------------------------------------------------------------------------- 1 | # Cloudflare 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /how-to-guides/hosting-providers/digital-ocean.md: -------------------------------------------------------------------------------- 1 | # Digital Ocean 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /how-to-guides/hosting-providers/github.md: -------------------------------------------------------------------------------- 1 | # Github 2 | 3 | ## Step 01: Create HTML Form 4 | 5 | First of all we need to create a `html` page with web3forms. Learn how to setup on our [installation](https://docs.web3forms.com/getting-started/installation) page. 6 | 7 | ## Step 02: Create an account on Github 8 | 9 | ![](../../.gitbook/assets/github.png) 10 | 11 | First Step is to create a Github account if you don't already have one. 12 | 13 | ## Step 03: Create a GIT Repository 14 | 15 | Now, you should create a new GitHub repository and add your `html` code to your repo. 16 | 17 | ## Step 04: Add code to GIT repository 18 | 19 | Follow the code to initialise and add your code files to your repo. 20 | 21 | ```bash 22 | git init 23 | git add index.html 24 | git commit -m "first commit" 25 | git branch -M main 26 | git remote add origin your_origin_url 27 | git push -u origin main 28 | ``` 29 | 30 | ## Step 05: Go to Settings 31 | 32 | ![](../../.gitbook/assets/github-repo.png) 33 | 34 | On your github repository, you can see a tab called **Settings**, just click on the tab. 35 | 36 | ## Step 06: Go to Pages Table 37 | 38 | ![](../../.gitbook/assets/github-pages.png) 39 | 40 | On your settings page, you can see a tab called **Pages** on the left. Just click on tab. 41 | 42 | ## Step 07: Choose Branch 43 | 44 | ![](../../.gitbook/assets/github-branch.png) 45 | 46 | Here, you can should set your branch as `main` and click on **Save** button. You're good to go! 47 | 48 | ## Step 08: Congratulations! You're App is deployed 49 | 50 | ![](../../.gitbook/assets/site-published.png) 51 | 52 | Congrats, You're app is now deployed on github. Your hosting url will be _username.github.io/repo_ You can now visit it! It will work absolutely fine. Well done! 👏 53 | 54 | ## Test App 55 | 56 | ![](../../.gitbook/assets/app-live.png) 57 | 58 | Now, here comes the final part! It is time to test. Head over to the app, and submit the form. Open your mail, you can see a new one. It will look like this 👇 59 | 60 | ![](../../.gitbook/assets/email.png) 61 | 62 | -------------------------------------------------------------------------------- /how-to-guides/hosting-providers/netlify.md: -------------------------------------------------------------------------------- 1 | # Netlify 2 | 3 | ## Step 01: Create HTML Form 4 | 5 | First of all we need to create a `html` page with web3forms. Learn how to setup on our [installation](https://docs.web3forms.com/getting-started/installation) page. 6 | 7 | ## Step 02: Create an account on Github 8 | 9 | ![](../../.gitbook/assets/github.png) 10 | 11 | First Step is to create a Github account if you don't already have one. 12 | 13 | ## Step 03: Create a GIT Repository 14 | 15 | Now, you should create a new GitHub repository and add your `html` code to your repo. 16 | 17 | ## Step 04: Create an account on Netlify 18 | 19 | ![](../../.gitbook/assets/netlify.png) 20 | 21 | Head over to [http://netlify.com/](http://netlify.com/) and create an account on Netlify. If you already have one, sign in to your account. You will be redirected to your dashboard. 22 | 23 | ## Step 05: Create a New Project 24 | 25 | ![](../../.gitbook/assets/netlify-dashboard.png) 26 | 27 | Now, click [New Site From GIT](https://app.netlify.com/start) button from your dashboard. 28 | 29 | ## Step 06: Connect GIT Repository 30 | 31 | ![](../../.gitbook/assets/netlify-import-git.png) 32 | 33 | Now, just click on **Github** button to connect Netlify with your Github Account. 34 | 35 | ## Step 07: Choose Github Repository 36 | 37 | ![](../../.gitbook/assets/netlify-repo-configure.png) 38 | 39 | You will now be able to see your repos. Just click on the repository you want to deploy! 40 | 41 | ## Step 08: Deploy on Netlify 42 | 43 | ![](../../.gitbook/assets/netlify-deploy.png) 44 | 45 | You can now add your details, Finally lets click on **Deploy Site** button and you're good to go! 46 | 47 | ## Step 09: Congratulations! You're App is deployed 48 | 49 | ![](../../.gitbook/assets/netlify-congrats.png) 50 | 51 | Congrats, You're app is now deployed on Netlify. If you wish to change your domain, just click on **Domain Settings** and change your domain. You can now visit your App! It will work absolutely fine. Well done! 👏 52 | 53 | ## Test App 54 | 55 | ![](../../.gitbook/assets/app-live.png) 56 | 57 | Now, here comes the final part! It is time to test. Head over to the app, and submit the form. Open your mail, you can see a new one. It will look like this 👇 58 | 59 | ![](../../.gitbook/assets/email.png) 60 | 61 | -------------------------------------------------------------------------------- /how-to-guides/hosting-providers/vercel.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: >- 3 | Here's how to setup a Working HTML Contact Form on Websites hosted with Vercel 4 | Platform. 5 | --- 6 | 7 | # Vercel 8 | 9 | **Vercel Platform Guide:** [**https://web3forms.com/platforms/vercel-contact-form**](https://web3forms.com/platforms/vercel-contact-form) 10 | 11 | ### Step 01: Create an HTML Form 12 | 13 | First of all, we need to create a `html` page with web3forms. Learn how to setup on our [installation](https://docs.web3forms.com/getting-started/installation) page. 14 | 15 | ### Step 02: Create a GIT Repository 16 | 17 | Now, you should create a new GitHub repository and add your `html` files to your repo. 18 | 19 | ### Step 03: Create a New Project in Vercel 20 | 21 | Now, click [New Project](https://vercel.com/new) button from your dashboard. 22 | 23 | ### Step 04: Import GIT Repository to Vercel 24 | 25 | ![](../../.gitbook/assets/import-git-repo.png) 26 | 27 | Now, you can see your repos, click on **Import** button near the repo you want to import. 28 | 29 | ### Step 05: Deploy Vercel App 30 | 31 | ![](../../.gitbook/assets/deploy-vercel.png) 32 | 33 | Configure you name and settings. Click on **Deploy** button. You're good to go! 34 | 35 | ### Step 06: Congratulations! You're App is deployed 36 | 37 | ![](../../.gitbook/assets/congrats.png) 38 | 39 | Congrats, You're app is now deployed on vercel. You can now visit it! It will work absolutely fine. Well done! 👏 40 | 41 | ### Test App 42 | 43 | ![](../../.gitbook/assets/app-live.png) 44 | 45 | Now, here comes the final part! It is time to test. Head over to the app, and submit the form. Open your mail, you can see a new one. It will look like this 👇 46 | 47 | ![](../../.gitbook/assets/email.png) 48 | -------------------------------------------------------------------------------- /how-to-guides/html-and-javascript.md: -------------------------------------------------------------------------------- 1 | # HTML & JavaScript 2 | 3 | Sometimes you want to use JavaScript to submit the form and its possible with Web3Forms. If you use JavaScript, you can keep users on the same page instead of redirecting to other page. Also you will be able to code custom form validation or integration with other tools / services. 4 | 5 | The initial steps are same as [Pure HTML](../getting-started/installation.md#step-01-get-access-key). Be sure to check to know how to create Access Key. Then use the following sample code to get started. Modify it according to your needs. 6 | 7 | ## HTML 8 | 9 | ```markup 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 |
27 | ``` 28 | 29 | ## JavaScript 30 | 31 | ```javascript 32 | const form = document.getElementById('form'); 33 | const result = document.getElementById('result'); 34 | 35 | form.addEventListener('submit', function(e) { 36 | e.preventDefault(); 37 | const formData = new FormData(form); 38 | const object = Object.fromEntries(formData); 39 | const json = JSON.stringify(object); 40 | result.innerHTML = "Please wait..." 41 | 42 | fetch('https://api.web3forms.com/submit', { 43 | method: 'POST', 44 | headers: { 45 | 'Content-Type': 'application/json', 46 | 'Accept': 'application/json' 47 | }, 48 | body: json 49 | }) 50 | .then(async (response) => { 51 | let json = await response.json(); 52 | if (response.status == 200) { 53 | result.innerHTML = json.message; 54 | } else { 55 | console.log(response); 56 | result.innerHTML = json.message; 57 | } 58 | }) 59 | .catch(error => { 60 | console.log(error); 61 | result.innerHTML = "Something went wrong!"; 62 | }) 63 | .then(function() { 64 | form.reset(); 65 | setTimeout(() => { 66 | result.style.display = "none"; 67 | }, 3000); 68 | }); 69 | }); 70 | ``` 71 | -------------------------------------------------------------------------------- /how-to-guides/jam-stack.md: -------------------------------------------------------------------------------- 1 | # JAM Stack 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /how-to-guides/js-frameworks/README.md: -------------------------------------------------------------------------------- 1 | # JS Frameworks 2 | 3 | -------------------------------------------------------------------------------- /how-to-guides/js-frameworks/alpine.js.md: -------------------------------------------------------------------------------- 1 | # Alpine.js 2 | 3 | Here's a simple Alpine.js Contact Form Code example with Web3Forms 4 | 5 | ```markup 6 |
7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | 47 | ``` 48 | -------------------------------------------------------------------------------- /how-to-guides/js-frameworks/angular-js.md: -------------------------------------------------------------------------------- 1 | # Use Web3Forms with Angular.js 2 | 3 | ## Prerequisites 4 | 5 | Angular basics: 6 | - **_Services_** 7 | - **_TemplateForms_** 8 | 9 | --- 10 | 11 | ## Let's move to the code part: 12 | - Let's assume that you already initialized your app and you have your component that has the form. 13 | 14 | 1. Create a service (_**mail**_) 15 | ```JS 16 | ng generate service services/mail 17 | ``` 18 | - define a method called (_**sendEmail()**_) that will return a _Promise_ and accept a parameter (**_formData_**) that has type of (_**FormData**_). 19 | - in the method we are going to return the _Promise_ of the built in function (_**fetch()**_), which is accepting 2 arguments: 20 | 21 | 1. API endpoint: `https://api.web3forms.com/submit`. 22 | 23 | 2. Object with 2 properties: 24 | `{ 25 | method: 'POST', 26 | body: formData 27 | }` 28 | 29 | - our _**service mail**_ method should look like: 30 | 31 | ```JS 32 | import { Injectable } from '@angular/core'; 33 | 34 | @Injectable({ 35 | providedIn: 'root', 36 | }) 37 | export class MailService { 38 | constructor() {} 39 | 40 | sendEmail(formData: FormData): Promise { 41 | return fetch('https://api.web3forms.com/submit', { 42 | method: 'POST', 43 | body: formData, 44 | }); 45 | } 46 | } 47 | ``` 48 | 49 | - that's it for the _**mail service**_. 50 | 51 | --- 52 | 53 | - Now let's take a look at the HTML **_form_**: 54 | 55 | _We are you using TailwindCSS for styling_ 56 | 57 | ```JS 58 | 59 |
60 |
65 | 66 |
67 | 77 | 78 |

82 | name is required 83 |

84 |
85 | 86 |
87 | 97 | 98 |

102 | invalid email 103 |

104 |
105 | 106 |
107 | 118 | 119 |

123 | at least write some words (20 characters length) 124 |

125 |
126 | 127 |
132 |

133 | {{ alertMessage }} 134 |

135 |
136 | 137 | 150 |
151 | ``` 152 | 153 | - As you can see we are assigning the values of the inputs to an object in our component class (_**contactFormValues**_) with the help of **_template forms_**, and we have a button being used to submit the form as well as we have (_**ng-container**_) and (_**ng-template**_) inside the button tag to display whether the text (**_send_**) or show a spinning animated (_**icon**_) that indicates the form is being submitted. 154 | 155 | - Let's take a look at the component class properties and methods: 156 | 157 | > - Class properties: 158 | 159 | ```JS 160 | constructor( 161 | private mailService: MailService 162 | ) {} 163 | 164 | private color: string = ''; 165 | showAlert: boolean = false; 166 | alertMessage: string = ''; 167 | onSubmit: boolean = false; 168 | iconLoad = faArrowRotateForward; 169 | contactFormValues = { 170 | name: '', 171 | email: '', 172 | body: '', 173 | }; 174 | ``` 175 | > - Class methods: 176 | 177 | ```JS 178 | get alertColor() { 179 | return `text-${this.color}-400`; 180 | } 181 | 182 | hideAlert() { 183 | setTimeout(() => { 184 | this.showAlert = false; 185 | }, 5000); 186 | } 187 | 188 | async submitEmail(contactForm: NgForm) { 189 | this.onSubmit = true; 190 | // -- set formData values 191 | let formData: FormData = new FormData(); 192 | formData.append('name', this.contactFormValues.name); 193 | formData.append('email', this.contactFormValues.email); 194 | formData.append('body', this.contactFormValues.body); 195 | // -- email customization 196 | formData.append('access_key', environment.form_access_key); 197 | formData.append('subject', 'Email Support From Your Site'); 198 | formData.append('from_name', 'Contact Notification'); 199 | 200 | try { 201 | // -- send email 202 | const res = await this.mailService.sendEmail(formData); 203 | if (!res.ok) { 204 | throw new Error(); 205 | } 206 | this.alertMessage = 'Email sent successfully!'; 207 | this.color = 'green'; 208 | contactForm.reset(); 209 | } catch (err) { 210 | // handle error 211 | this.alertMessage = 'Something went wrong, try again later!'; 212 | this.color = 'red'; 213 | } 214 | // -- reset submit and hide alert 215 | this.onSubmit = false; 216 | this.showAlert = true; 217 | this.hideAlert(); 218 | } 219 | ``` 220 | 221 | ## Class properties explanation: 222 | 223 | - `showAlert: boolean = false;` To display alert message (success or fail). 224 | 225 | - `alertMessage: string = '';` To hold the alert message. 226 | 227 | - `onSubmit: boolean = false;` To set and track submit state. 228 | 229 | - `iconLoad = faArrowRotateForward;` To define and rename the icon from (fontAwesome library). 230 | 231 | - contactFormValues 232 | `contactFormValues = { 233 | name: '', 234 | email: '', 235 | body: '', 236 | };` 237 | 238 | To hold the inputs' values with the help of the template forms of Angular. 239 | 240 | ## Class methods explanation: 241 | 242 | - `hideAlert()` To hide the alert message after 5 seconds. 243 | 244 | - `submitEmail(contactForm)` An async function that accepts an instance of the **_NgForm_** to handle the submit form and in this method let's explain 3 parts of it: 245 | 246 | 1. Create a formData instance and append values (contactFormValues) because it is the way that _Web3Forms_ accepts the form. 247 | - `formData.append('name', this.contactFormValues.name);` add input value (_**name**_) from template to formData, follow the same steps to add the other inputs' values (**_email_**, **_body_**). 248 | - grab your **_access key_** from email you received earlier and add it into the environment variables, in our case we called it (**_form_access_key_**) see example below: 249 | - `formData.append('access_key', environment.form_access_key);` 250 | - `formData.append('subject', 'Email Support From Your Site');` to set subject text. 251 | - `formData.append('from_name', 'Contact Notification');` to set a name for the form. 252 | 253 | You can read more about customizations here: [Web3Forms Customization](https://docs.web3forms.com/getting-started/customizations) 254 | 255 | 2. `try | catch` blocks, in the `try` block we are calling the `mailService.sendEmail()` method to submit the form and in case the form was successfully submitted we show a success message and reset the values to `null` by the help of the instance `NgForm` that has `reset()` method, in our case it is `contactForm.reset()`, and in case there is an error we added a _**guard clause**_ and inside its block we throw an error to force the code to jump to the `catch` block and show an error message. 256 | 257 | 3. and at the end of the method we reset `onSubmit` property to `false`, `showAlert` to `true` and call the `hideAlert()` method. 258 | 259 | --- 260 | 261 | > _**Congratulations! You are all set up and ready to go.**_ 262 | 263 | --- 264 | 265 | *This article is written by [CoderNadir](https://dev.to/codernadir)* 266 | -------------------------------------------------------------------------------- /how-to-guides/js-frameworks/react-js.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: React contact form example using react-hook-form plugin 3 | --- 4 | 5 | # React JS 6 | 7 | Here are the examples and guides if you are using React Framework. Click on one of the guides based on your use and needs. 8 | 9 | * [@web3forms/react Plugin](react-plugin.md) 10 | * [Simple React Contact Form](react-js/simple-react-contact-form.md) 11 | * [Using React Hook Form](react-js/react-js.md) 12 | * [React File Upload Form](react-js/react-file-upload-form.md) 13 | * [React Hook Form File Upload](react-js/react-hook-form-file-upload.md) 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /how-to-guides/js-frameworks/react-js/react-file-upload-form.md: -------------------------------------------------------------------------------- 1 | # React File Upload Form 2 | 3 | File uploading is one of the major features of Web3Forms. Integrating it with React is tricky. Using the following example, you can copy-paste a fully-working React File upload form. 4 | 5 | If you are using React Hook form, Please [see this guide](react-hook-form-file-upload.md). 6 | 7 | {% hint style="warning" %} 8 | Note: File Upload is only available for PRO users. 9 | {% endhint %} 10 | 11 | ### Live Demo 12 | 13 | {% embed url="https://codesandbox.io/s/react-file-upload-form-o4deqz?file=/src/App.js" %} 14 | React File Upload Form 15 | {% endembed %} 16 | 17 | Here's the code: 18 | 19 | ```jsx 20 | import React from "react"; 21 | 22 | function App() { 23 | const [result, setResult] = React.useState(""); 24 | 25 | const onSubmit = async (event) => { 26 | event.preventDefault(); 27 | setResult("Sending...."); 28 | const formData = new FormData(event.target); 29 | 30 | formData.append("access_key", "YOUR_ACCESS_KEY_HERE"); 31 | 32 | const res = await fetch("https://api.web3forms.com/submit", { 33 | method: "POST", 34 | body: formData 35 | }).then((res) => res.json()); 36 | 37 | if (res.success) { 38 | console.log("Success", res); 39 | setResult(res.message); 40 | } else { 41 | console.log("Error", res); 42 | setResult(res.message); 43 | } 44 | }; 45 | 46 | return ( 47 |
48 |

React File Upload Form

49 |
50 | 51 | 52 | 53 | 54 |
55 | {result} 56 |
57 | ); 58 | } 59 | 60 | export default App; 61 | ``` 62 | -------------------------------------------------------------------------------- /how-to-guides/js-frameworks/react-js/react-google-recaptcha-v3.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Next.js Example 3 | --- 4 | 5 | # React Google ReCaptcha v3 6 | 7 | In this example, you can see a working google reCaptcha v3 (Invisible captcha) with React Hook Form. 8 | 9 | {% hint style="warning" %} 10 | Note: File Upload is only available for PRO users. 11 | {% endhint %} 12 | 13 | ### Live Demo 14 | 15 | {% embed url="https://codesandbox.io/s/react-next-js-simple-google-recaptcha-v3-q21ov7?file=/pages/index.tsx" %} 16 | Invisible Google reCaptcha. 17 | {% endembed %} 18 | 19 | Here's the code: 20 | 21 | ```jsx 22 | import React from "react"; 23 | import { useForm } from "react-hook-form"; 24 | import Script from "next/script"; 25 | 26 | function App() { 27 | const { register, handleSubmit, setValue } = useForm(); 28 | const [result, setResult] = React.useState(""); 29 | const [captchatoken, setCaptchaToken] = React.useState(""); 30 | 31 | React.useEffect(() => { 32 | setValue("recaptcha_response", captchatoken); 33 | }); 34 | 35 | const onSubmit = async (data) => { 36 | console.log(data); 37 | 38 | setResult("Sending...."); 39 | const formData = new FormData(); 40 | 41 | formData.append("access_key", "YOUR_ACCESS_KEY_HERE"); 42 | 43 | for (const key in data) { 44 | if (key === "file") { 45 | formData.append(key, data[key][0]); 46 | } else { 47 | formData.append(key, data[key]); 48 | } 49 | } 50 | 51 | const res = await fetch("https://api.web3forms.com/submit", { 52 | method: "POST", 53 | body: formData 54 | }).then((res) => res.json()); 55 | 56 | if (res.success) { 57 | console.log("Success", res); 58 | setResult(res.message); 59 | } else { 60 | console.log("Error", res); 61 | setResult(res.message); 62 | } 63 | }; 64 | 65 | return ( 66 |
67 |

React Hook Form File Upload

68 |
69 | 70 |
71 |
72 | 73 |
74 |
75 | 76 |
77 | 82 |
83 | 84 |
85 |
86 | {result} 87 | 88 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 |
37 | 38 |
{status}
39 | ``` 40 | -------------------------------------------------------------------------------- /how-to-guides/js-frameworks/vue-js.md: -------------------------------------------------------------------------------- 1 | # Vue JS 2 | 3 | ```html 4 | 31 | 39 | ``` 40 | -------------------------------------------------------------------------------- /how-to-guides/landing-page-builders/README.md: -------------------------------------------------------------------------------- 1 | # Landing Page Builders 2 | 3 | -------------------------------------------------------------------------------- /how-to-guides/landing-page-builders/groovefunnels.md: -------------------------------------------------------------------------------- 1 | # Groovefunnels 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /how-to-guides/landing-page-builders/instapage.md: -------------------------------------------------------------------------------- 1 | # Instapage 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /how-to-guides/landing-page-builders/pagewiz.md: -------------------------------------------------------------------------------- 1 | # Pagewiz 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /how-to-guides/landing-page-builders/unbounce.md: -------------------------------------------------------------------------------- 1 | # Unbounce 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /how-to-guides/site-builders/README.md: -------------------------------------------------------------------------------- 1 | # Site Builders 2 | 3 | -------------------------------------------------------------------------------- /how-to-guides/site-builders/carrd.co.md: -------------------------------------------------------------------------------- 1 | # Carrd.co 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /how-to-guides/site-builders/dorik.md: -------------------------------------------------------------------------------- 1 | # Dorik 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /how-to-guides/site-builders/framer.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: >- 3 | Here's a guide on how to integrate Custom Contact Forms in Framer using 4 | Web3Forms 5 | --- 6 | 7 | # Framer 8 | 9 | Here's a step by step instructions on how to setup Web3Forms with the new Framer Forms feature. 10 | 11 | **Live Demo /Remix:** [**https://web3forms-remix.framer.website/**](https://web3forms-remix.framer.website/) 12 | 13 | ### Framer forms Pricing 14 | 15 | Framer forms is providing only 50 submissions per month for free. Once you upgrade to Basic which is $15/m or Pro for $30/mo, you will get 500 & 2500 submissions per month respectively. 16 | 17 | In contrast, using Web3Forms, you will get 250 free submissions per month. Web3Forms provides unlimited submissions for Pro plans which start from $8/mo. 18 | 19 | _Source:_ [_https://www.framer.com/pricing/_](https://www.framer.com/pricing/) _&_ [_https://web3forms.com/pricing_](https://web3forms.com/pricing) 20 | 21 | However, you can now use Web3Forms in Framer. Here are the step by step instructions on how you can use it. 22 | 23 | {% hint style="info" %} 24 | Currently, Framer uses their own proxy for the Web3Forms endpoint which is causing to hit the Framer limit once 50 submissions are reached. You must contact Framer support and ask them to remove the proxy and let you use our endpoint directly. 25 | {% endhint %} 26 | 27 | ## Step 1: Drag and Drop the form builder 28 | 29 | Once you are on the framer project, Click on Insert -> Form -> Form Builder. The drag them to your canvas. 30 | 31 |
32 | 33 | ## Step 2: Add Web3Forms Access Key 34 | 35 | Once you drag and drop the form, you can then add a hidden access\_key you have generated from Web3Forms Home Page. 36 | 37 | Click on the + button below the form and add a new "Text" field. 38 | 39 |
40 | 41 |
42 | 43 |
44 | 45 | Click on the **Label** and remove it. We do not need that for this input. 46 | 47 | Now, click on that textbox field which opens up a right side panel. Click on the **+** button right to the text Input and choose **Hidden.** Now click the + again to add the **Value** field. 48 | 49 |
50 | 51 | Now, edit the following: 52 | 53 | Change Type to Text. 54 | 55 | Name: access\_key 56 | 57 | Value: Insert your access\_key here 58 | 59 | Placeholder: Remove Value 60 | 61 | Required: Yes 62 | 63 |
64 | 65 | ## Step 3: Add Web3Forms Endpoint 66 | 67 | Now, click on the main Form wrapper which opens up a Form panel in the right sidebar. 68 | 69 | Click on the Send To dropdown and choose Webhook. Then add the Web3Forms API endpoint in the Popup. Our endpoint is: `https://api.web3forms.com/submit` 70 | 71 |
72 | 73 | ## Step 4: Test & Publish 74 | 75 | That's it. Done. You can customize form fields as per your requirement or add more hidden inputs for customizing email subject, from\_name etc. Once done. Click on the Play button to preview the website. If everything's good, you can publish the framer website. Now you have a fully customizable working contact form in Framer. 76 | 77 | {% hint style="danger" %} 78 | Currently, Framer uses their own proxy for the Web3Forms endpoint which is causing to hit the Framer limit once 50 submissions are reached. You must contact Framer support and ask them to remove the proxy and let you use our endpoint directly. 79 | {% endhint %} 80 | 81 | If this method does not work for you, you can choose the old method which still works. Here are the steps: 82 | 83 | ## Framer Forms - Old Method 84 | 85 | Framer default contact form is limited. It only allows 2-3 fields and only support a single form backend solution. Using Web3Forms, you can setup a free custom contact form in framer without any custom code. Open the demo website, duplicate the page and you can copy-paste the section to your own project and add unlimited fields and inputs without limitation. 86 | 87 | **Example Demo:** [**https://web3forms.framer.website/**](https://web3forms.framer.website/) 88 | 89 | ### **Step 1: Remix / Duplicate the Form Component** 90 | 91 | Visit our demo link above and click on the Remix / Duplicate link in the top right corner. Then a copy of the same page will be opened in your Framer Workspace. 92 | 93 |

Remix Button in the Pre-made Demo

94 | 95 | ### Step 2: Add Access Key in a hidden input field 96 | 97 | Once you duplicated the project, you can copy it again to your project. Once it's on the page you wanted, click on the Web3Forms Form Area and it will open the Sidebar with customization options. 98 | 99 |

Web3Forms Customization Options

100 | 101 | Now, Click on the **Inputs** and choose Access Key in the bottom. 102 | 103 |
104 | 105 |
106 | 107 |
108 | 109 | Then, in the panel, replace the `YOUR_ACCESS_KEY_HERE` value with your own access key from Web3Forms. 110 | 111 |

Replace Access Key with yours

112 | 113 | ### Step 3: Customize yourself 114 | 115 | You can add more inputs, change name, values or even style by double clicking and edit the code. Have fun! 116 | -------------------------------------------------------------------------------- /how-to-guides/site-builders/squarespace.md: -------------------------------------------------------------------------------- 1 | # Squarespace 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /how-to-guides/site-builders/webflow.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: >- 3 | Here's a guide on how to integrate Web3Forms with Webflow using Form Block and 4 | HTML Embed 5 | --- 6 | 7 | # Webflow 8 | 9 | **Example Demo:** [**https://web3forms-contact-form.webflow.io/**](https://web3forms-contact-form.webflow.io/) 10 | 11 | ### 1. Create a Form Block in Webflow 12 | 13 | First, you need to drag the form block element from the Webflow sidebar to your website. 14 | 15 |

Drag the form block the canvas

16 | 17 | ### 2. Create a hidden input field in Webflow 18 | 19 | To add our access key, we need to create a hidden input field in webflow to make our contact form work. For that, we use the HTML Embed Option. 20 | 21 |

Drag Embed Option inside the <Form> Block

22 | 23 | ### 3. Add Access Key inside the HTML Embed Block 24 | 25 | Now, add the hidden HTML Code as shown below inside the code editor and click Save. 26 | 27 |
28 | 29 | Make sure the embed block is inside the Form Block. 30 | 31 |
32 | 33 | ### 4. Add Form Action URL 34 | 35 | Now, setup the form action URL by selecting the form element and choose "Settings" from the right sidebar. Make sure you select **`POST`** as method. 36 | 37 | Action URL: `https://api.web3forms.com/submit` 38 | 39 |
40 | 41 | ### 5. Done. 42 | 43 | That's it. Web3forms Contact form will work with your Webflow Website now. You can add more customization features like custom redirect, email subject etc using the hidden field similar to step 3. Refer to the [Customizations](../../getting-started/customizations/) section for more details. 44 | -------------------------------------------------------------------------------- /how-to-guides/site-builders/wix.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Setup Web3Forms Form Submission in your Wix Website 3 | --- 4 | 5 | # Wix 6 | 7 | ## Step 1: Login to your Account 8 | 9 | Login to your Wix Account and visit your Dashboard. There you can see the your Website Name. Just click the **Site Actions** Dropdown and then click **Edit Site**. See screenshot below. 10 | 11 | ![](../../.gitbook/assets/image.png) 12 | 13 | ## Step 2: Add the Widget 14 | 15 | Now Click on the **+ Add** icon from the left menu and choose **Embed** => **Custom Embeds** => **Embed a Widget**. See screenshot below 16 | 17 | ![](../../.gitbook/assets/image%20%281%29.png) 18 | 19 | ## Step 3: Add the Form 20 | 21 | Now, you can use the code from[ HTML & JavaScript](../html-and-javascript.md) page to paste it in the textbox. Then edit the **form fields** and your **Access Key**. 22 | 23 | ## Step 4: Save & Publish 24 | 25 | That's it. Now you can Save & Publish your page. Then open the page you've added the form in the browser. You might need to clear the cache if you don't see the changes instantly. 26 | 27 | -------------------------------------------------------------------------------- /how-to-guides/static-site-generators/README.md: -------------------------------------------------------------------------------- 1 | # Static Site Generators 2 | 3 | -------------------------------------------------------------------------------- /how-to-guides/static-site-generators/astro.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Custom Contact form for Astro 3 | --- 4 | 5 | # Astro 6 | 7 | Here's a working contact form example for Astro with Web3Forms 8 | 9 | ```html 10 | --- 11 | import Button from "./ui/button.astro"; 12 | --- 13 | 14 | 15 |
22 | 23 | 24 | 25 | 26 | 27 |
28 | 35 |
36 | Please provide your full name. 37 |
38 |
39 |
40 | 48 |
49 | Please provide your email address. 50 |
51 |
52 | Please provide a valid email address. 53 |
54 |
55 |
56 | 62 |
63 | Please enter your message. 64 |
65 |
66 | 67 |
68 |
69 | 70 | 89 | 90 | 147 | ``` 148 | -------------------------------------------------------------------------------- /how-to-guides/static-site-generators/eleventy.md: -------------------------------------------------------------------------------- 1 | # Eleventy 2 | 3 | Eleventy Contact form working code example with Web3Forms 4 | 5 | ```html 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | ``` 17 | -------------------------------------------------------------------------------- /how-to-guides/static-site-generators/gatsby.md: -------------------------------------------------------------------------------- 1 | # Gatsby 2 | 3 | Gatsby Contact Form - Simple Working Example Code with Web3Forms 4 | 5 | ```jsx 6 | import React from "react"; 7 | 8 | export default function ContactPage() { 9 | return ( 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | ); 20 | } 21 | ``` 22 | -------------------------------------------------------------------------------- /how-to-guides/static-site-generators/gridsome.md: -------------------------------------------------------------------------------- 1 | # Gridsome 2 | 3 | Here's a simple Contact form Working Example for Gridsome with Web3Forms 4 | 5 | ```markup 6 | 14 | 15 | 49 | ``` 50 | -------------------------------------------------------------------------------- /how-to-guides/static-site-generators/hugo.md: -------------------------------------------------------------------------------- 1 | # Hugo 2 | 3 | Here's a working contact form example for Hugo with Web3Forms 4 | 5 | ```markup 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | ``` 17 | -------------------------------------------------------------------------------- /how-to-guides/static-site-generators/jekyll.md: -------------------------------------------------------------------------------- 1 | # Jekyll 2 | 3 | ```markup 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | ``` 15 | -------------------------------------------------------------------------------- /how-to-guides/static-site-generators/next.js.md: -------------------------------------------------------------------------------- 1 | # Next.js 2 | 3 | ## Simple example using in Next.js 4 | 5 | A simple example of implementing Web3Forms in a Next.js project. You can see an advanced version using [react-hook-form here](https://docs.web3forms.com/how-to-guides/js-frameworks/react-js) 6 | 7 | ```jsx 8 | export function Contact() { 9 | async function handleSubmit(e) { 10 | e.preventDefault(); 11 | const response = await fetch("https://api.web3forms.com/submit", { 12 | method: "POST", 13 | headers: { 14 | "Content-Type": "application/json", 15 | Accept: "application/json", 16 | }, 17 | body: JSON.stringify({ 18 | access_key: "YOUR_ACCESS_KEY_HERE", 19 | name: e.target.name.value, 20 | email: e.target.email.value, 21 | message: e.target.message.value, 22 | }), 23 | }); 24 | const result = await response.json(); 25 | if (result.success) { 26 | console.log(result); 27 | } 28 | } 29 | 30 | return ( 31 | <> 32 |
33 |
34 | 35 | 36 |
37 |
38 | 39 | 40 |
41 |
42 | 43 | 44 |
45 | 46 |
47 | 48 | ); 49 | } 50 | ``` 51 | 52 | ## File Upload Form in Next.js 53 | 54 | Here's a simple example code for a file upload contact form in Next.js using React Hook Form. 55 | 56 | ```jsx 57 | import React from "react"; 58 | import { useForm } from "react-hook-form"; 59 | 60 | function App() { 61 | const { register, handleSubmit } = useForm(); 62 | 63 | const onSubmit = async (data) => { 64 | const formData = new FormData(data); 65 | 66 | formData.append("access_key", "YOUR_ACCESS_KEY_HERE"); 67 | formData.append("file", data.file[0]); 68 | 69 | const res = await fetch("https://api.web3forms.com/submit", { 70 | method: "POST", 71 | body: formData, 72 | }).then((res) => res.json()); 73 | 74 | if (res.success) { 75 | console.log("Success", res); 76 | } else { 77 | console.log("Error", res); 78 | } 79 | }; 80 | 81 | return ( 82 |
83 |
84 | 85 | 86 | 87 | 88 |
89 |
90 | ); 91 | } 92 | 93 | export default App; 94 | ``` 95 | -------------------------------------------------------------------------------- /how-to-guides/static-site-generators/nuxt.js.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Create a working contact form in nuxt 3 using web3forms. 3 | --- 4 | 5 | # Nuxt.js 6 | 7 | Here's a simple Contact form Example Code for Nuxt 3 with Web3Forms 8 | 9 | ```markup 10 | 18 | 19 | 64 | ``` 65 | 66 | 67 | 68 | ## Nuxt UI 69 | 70 | Here's another example if you are using Nuxt UI 71 | 72 | ```html 73 | 90 | 91 | 147 | ``` 148 | -------------------------------------------------------------------------------- /how-to-guides/wordpress/README.md: -------------------------------------------------------------------------------- 1 | # WordPress 2 | 3 | -------------------------------------------------------------------------------- /how-to-guides/wordpress/elementor.md: -------------------------------------------------------------------------------- 1 | # Elementor 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | -------------------------------------------------------------------------------- /how-to-guides/wordpress/oxygen-builder.md: -------------------------------------------------------------------------------- 1 | # Oxygen Builder 2 | 3 | {% hint style="warning" %} 4 | This documentation is work in progress. Feel free to [contribute on Github](https://github.com/surjithctly/web3forms-docs). 5 | {% endhint %} 6 | 7 | --------------------------------------------------------------------------------