├── getting-started ├── examples │ ├── README.md │ ├── with-multiple-checkbox.md │ ├── file-upload-form.md │ ├── raw-contact-form.md │ ├── advanced-all-options.md │ ├── basic-html-contact-form.md │ ├── contact-form-with-dark-mode.md │ ├── recaptcha-v3.md │ ├── ajax-contact-form-using-javascript.md │ ├── multi-column-contact-form.md │ └── javascript-form-validation.md ├── integrations │ ├── README.md │ ├── examples │ │ ├── README.md │ │ ├── airtable.md │ │ ├── google-sheets.md │ │ └── telegram-notifications.md │ ├── zapier.md │ └── integromat.md ├── customizations │ ├── README.md │ ├── from-name.md │ ├── spam-protection │ │ ├── report-spam.md │ │ ├── recaptcha-and-turnstile.md │ │ ├── README.md │ │ ├── spam-protection.md │ │ └── hcaptcha.md │ ├── custom-reply-to.md │ ├── success-thank-you-page.md │ ├── redirection.md │ └── email-subject.md ├── options-reference.md ├── pro-features │ ├── README.md │ ├── intro-text.md │ ├── add-cc-email.md │ ├── restrict-to-domain.md │ ├── autoresponder.md │ ├── webhooks.md │ ├── cloudflare-turnstile-captcha.md │ ├── file-attachments.md │ ├── recaptcha-integration.md │ └── advanced-file-uploader.md ├── faq.md ├── api-reference.md ├── installation.md └── troubleshooting.md ├── how-to-guides ├── wordpress │ ├── README.md │ ├── elementor.md │ └── oxygen-builder.md ├── js-frameworks │ ├── README.md │ ├── react-js.md │ ├── vue-js.md │ ├── svelte.md │ ├── alpine.js.md │ ├── react-js │ │ ├── simple-react-contact-form.md │ │ ├── react-file-upload-form.md │ │ ├── react-hook-form-file-upload.md │ │ ├── react-google-recaptcha-v3.md │ │ └── react-js.md │ ├── react-plugin.md │ └── angular-js.md ├── site-builders │ ├── README.md │ ├── dorik.md │ ├── carrd.co.md │ ├── squarespace.md │ ├── wix.md │ ├── webflow.md │ └── framer.md ├── hosting-providers │ ├── README.md │ ├── aws.md │ ├── cloudflare.md │ ├── digital-ocean.md │ ├── vercel.md │ ├── github.md │ └── netlify.md ├── landing-page-builders │ ├── README.md │ ├── pagewiz.md │ ├── instapage.md │ ├── unbounce.md │ └── groovefunnels.md ├── static-site-generators │ ├── README.md │ ├── jekyll.md │ ├── eleventy.md │ ├── hugo.md │ ├── gatsby.md │ ├── gridsome.md │ ├── next.js.md │ ├── nuxt.js.md │ └── astro.md ├── jam-stack.md └── html-and-javascript.md ├── .gitbook └── assets │ ├── email.png │ ├── image.png │ ├── app-live.png │ ├── congrats.png │ ├── github.png │ ├── netlify.png │ ├── vercel.png │ ├── image (1).png │ ├── image (2).png │ ├── image (3).png │ ├── image (4).png │ ├── deploy-vercel.png │ ├── github-branch.png │ ├── github-pages.png │ ├── github-repo.png │ ├── vercel-scope.png │ ├── import-git-repo.png │ ├── netlify-deploy.png │ ├── site-published.png │ ├── netlify-congrats.png │ ├── netlify-dashboard.png │ ├── netlify-import-git.png │ ├── image (4) (2) (2) (2).png │ ├── netlify-repo-configure.png │ ├── image (4) (2) (2) (2) (1).png │ ├── image (4) (2) (2) (2) (2).png │ ├── 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.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.png │ ├── CleanShot 2024-02-02 at 13.24.19@2x.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.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.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 │ ├── CleanShot 2025-11-03 at 13.25.23@2x.png │ ├── CleanShot 2025-11-03 at 13.28.45@2x.png │ ├── CleanShot 2025-11-03 at 13.35.31@2x.png │ ├── CleanShot 2024-01-31 at 14.23.49@2x (1).png │ ├── CleanShot 2024-02-02 at 13.16.55@2x (1).png │ ├── CleanShot 2024-02-03 at 13.57.32@2x (1).png │ ├── CleanShot 2024-02-03 at 14.03.10@2x (1).png │ ├── CleanShot 2024-02-03 at 14.04.29@2x (1).png │ └── CleanShot 2024-06-28 at 13.12.51@2x (1).png ├── README.md └── SUMMARY.md /getting-started/examples/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | -------------------------------------------------------------------------------- /how-to-guides/wordpress/README.md: -------------------------------------------------------------------------------- 1 | # WordPress 2 | 3 | -------------------------------------------------------------------------------- /getting-started/integrations/README.md: -------------------------------------------------------------------------------- 1 | # Integrations 2 | 3 | -------------------------------------------------------------------------------- /how-to-guides/js-frameworks/README.md: -------------------------------------------------------------------------------- 1 | # JS Frameworks 2 | 3 | -------------------------------------------------------------------------------- /how-to-guides/site-builders/README.md: -------------------------------------------------------------------------------- 1 | # Site Builders 2 | 3 | -------------------------------------------------------------------------------- /getting-started/customizations/README.md: -------------------------------------------------------------------------------- 1 | # Customizations 2 | 3 | -------------------------------------------------------------------------------- /getting-started/integrations/examples/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | -------------------------------------------------------------------------------- /how-to-guides/hosting-providers/README.md: -------------------------------------------------------------------------------- 1 | # Hosting Providers 2 | 3 | -------------------------------------------------------------------------------- /how-to-guides/landing-page-builders/README.md: -------------------------------------------------------------------------------- 1 | # Landing Page Builders 2 | 3 | -------------------------------------------------------------------------------- /how-to-guides/static-site-generators/README.md: -------------------------------------------------------------------------------- 1 | # Static Site Generators 2 | 3 | -------------------------------------------------------------------------------- /.gitbook/assets/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/email.png -------------------------------------------------------------------------------- /.gitbook/assets/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/image.png -------------------------------------------------------------------------------- /.gitbook/assets/app-live.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/app-live.png -------------------------------------------------------------------------------- /.gitbook/assets/congrats.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/congrats.png -------------------------------------------------------------------------------- /.gitbook/assets/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/github.png -------------------------------------------------------------------------------- /.gitbook/assets/netlify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/netlify.png -------------------------------------------------------------------------------- /.gitbook/assets/vercel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/vercel.png -------------------------------------------------------------------------------- /.gitbook/assets/image (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/image (1).png -------------------------------------------------------------------------------- /.gitbook/assets/image (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/image (2).png -------------------------------------------------------------------------------- /.gitbook/assets/image (3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/image (3).png -------------------------------------------------------------------------------- /.gitbook/assets/image (4).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/image (4).png -------------------------------------------------------------------------------- /.gitbook/assets/deploy-vercel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/deploy-vercel.png -------------------------------------------------------------------------------- /.gitbook/assets/github-branch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/github-branch.png -------------------------------------------------------------------------------- /.gitbook/assets/github-pages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/github-pages.png -------------------------------------------------------------------------------- /.gitbook/assets/github-repo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/github-repo.png -------------------------------------------------------------------------------- /.gitbook/assets/vercel-scope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/vercel-scope.png -------------------------------------------------------------------------------- /.gitbook/assets/import-git-repo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/import-git-repo.png -------------------------------------------------------------------------------- /.gitbook/assets/netlify-deploy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/netlify-deploy.png -------------------------------------------------------------------------------- /.gitbook/assets/site-published.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/site-published.png -------------------------------------------------------------------------------- /.gitbook/assets/netlify-congrats.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/netlify-congrats.png -------------------------------------------------------------------------------- /.gitbook/assets/netlify-dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/netlify-dashboard.png -------------------------------------------------------------------------------- /.gitbook/assets/netlify-import-git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/netlify-import-git.png -------------------------------------------------------------------------------- /.gitbook/assets/image (4) (2) (2) (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/image (4) (2) (2) (2).png -------------------------------------------------------------------------------- /.gitbook/assets/netlify-repo-configure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/netlify-repo-configure.png -------------------------------------------------------------------------------- /.gitbook/assets/image (4) (2) (2) (2) (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.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/HEAD/.gitbook/assets/image (4) (2) (2) (2) (2).png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2022-08-19 at 18.47.23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.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/HEAD/.gitbook/assets/CleanShot 2024-01-31 at 13.59.59@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-01-31 at 14.23.49@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.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/HEAD/.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/HEAD/.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/HEAD/.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/HEAD/.gitbook/assets/CleanShot 2024-01-31 at 14.41.03@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-02 at 13.16.55@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.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/HEAD/.gitbook/assets/CleanShot 2024-02-02 at 13.24.19@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-03 at 13.57.32@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.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/HEAD/.gitbook/assets/CleanShot 2024-02-03 at 14.01.32@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-03 at 14.03.10@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/CleanShot 2024-02-03 at 14.03.10@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-03 at 14.04.29@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.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/HEAD/.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/HEAD/.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/HEAD/.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/HEAD/.gitbook/assets/CleanShot 2024-06-28 at 13.12.23@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-06-28 at 13.12.51@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.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/HEAD/.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/HEAD/.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/HEAD/.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/HEAD/.gitbook/assets/CleanShot 2024-11-04 at 18.21.54@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2025-11-03 at 13.25.23@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/CleanShot 2025-11-03 at 13.25.23@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2025-11-03 at 13.28.45@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/CleanShot 2025-11-03 at 13.28.45@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2025-11-03 at 13.35.31@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/CleanShot 2025-11-03 at 13.35.31@2x.png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-01-31 at 14.23.49@2x (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/CleanShot 2024-01-31 at 14.23.49@2x (1).png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-02 at 13.16.55@2x (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/CleanShot 2024-02-02 at 13.16.55@2x (1).png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-03 at 13.57.32@2x (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/CleanShot 2024-02-03 at 13.57.32@2x (1).png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-03 at 14.03.10@2x (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/CleanShot 2024-02-03 at 14.03.10@2x (1).png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-02-03 at 14.04.29@2x (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/CleanShot 2024-02-03 at 14.04.29@2x (1).png -------------------------------------------------------------------------------- /.gitbook/assets/CleanShot 2024-06-28 at 13.12.51@2x (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surjithctly/web3forms-docs/HEAD/.gitbook/assets/CleanShot 2024-06-28 at 13.12.51@2x (1).png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/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/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/intro-text.md: -------------------------------------------------------------------------------- 1 | # Intro Text 2 | 3 | Email Intro Text customizations are available for all Paid users. You can change them in Form Settings in [https://app.webforms.com](https://app.webforms.com/). 4 | 5 |
6 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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/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/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 subscription 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, you must add the domains you wanted to use in form settings. You can add multiple domains separated with comma. Do not add protocols like https:// in the domain name. 14 | 15 | {% hint style="info" %} 16 | Only root or subdomain allowed. Once added forms will only work on the added domain and it will not work locally. So you must add this feature only after testing. 17 | {% endhint %} 18 | 19 |
20 | -------------------------------------------------------------------------------- /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/js-frameworks/vue-js.md: -------------------------------------------------------------------------------- 1 | # Vue JS 2 | 3 | ```html 4 | 31 | 39 | ``` 40 | -------------------------------------------------------------------------------- /how-to-guides/js-frameworks/svelte.md: -------------------------------------------------------------------------------- 1 | # Svelte 2 | 3 | Here's a simple working contact form code example for Svelte with Web3Forms 4 | 5 | ```markup 6 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 |
37 | 38 |
{status}
39 | ``` 40 | -------------------------------------------------------------------------------- /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/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 subscription to use this feature. 5 | {% endhint %} 6 | 7 | Autoresponder is available for all Pro/Agency users. Following details can be customised. 8 | 9 | ### Enable Autoreponder 10 | 11 | You can enable autoresponder from the Form Settings Page from our dashboard: [https://app.webforms.com](https://app.webforms.com/) 12 | 13 | #### Available Options 14 | 15 | 1. From Name (Company Name) 16 | 2. Autoresponder Subject 17 | 3. Autoresponder Intro Text (eg: Thanks for submitting the form..) 18 | 4. Show copy of their submission in the email - Yes/No 19 | 5. Full `https://` path of your Logo Image (PNG preferred)\ 20 | eg: `https://yoursite.com/img/logo.png` 21 | 22 |
23 | 24 | Also, to make the autoresponder work, you must make sure your `
` has 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. 25 | 26 | ```html 27 | // example code ⌄⌄⌄⌄⌄⌄⌄⌄⌄⌄⌄ 28 | 29 | ``` 30 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | You can add your webhook link to your form in the /integrations Tab inside Form Settings. 20 | 21 |
22 | 23 | ### Webhook Payload Structure 24 | 25 | 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. 26 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /how-to-guides/js-frameworks/react-js/simple-react-contact-form.md: -------------------------------------------------------------------------------- 1 | # Simple React Contact Form 2 | 3 | In this guide, you will learn how to setup a simple working contact form using React Framework and Web3Forms. No need to setup an SMTP or Custom Backend or Server. It all happens in the front end. You can copy paste to your react app and it will work. 4 | 5 | Here's the code: 6 | 7 | ```jsx 8 | import React from "react"; 9 | 10 | function App() { 11 | const [result, setResult] = React.useState(""); 12 | 13 | const onSubmit = async (event) => { 14 | event.preventDefault(); 15 | setResult("Sending...."); 16 | const formData = new FormData(event.target); 17 | 18 | formData.append("access_key", "YOUR_ACCESS_KEY_HERE"); 19 | 20 | const response = await fetch("https://api.web3forms.com/submit", { 21 | method: "POST", 22 | body: formData 23 | }); 24 | 25 | const data = await response.json(); 26 | 27 | if (data.success) { 28 | setResult("Form Submitted Successfully"); 29 | event.target.reset(); 30 | } else { 31 | console.log("Error", data); 32 | setResult(data.message); 33 | } 34 | }; 35 | 36 | return ( 37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 | {result} 47 | 48 |
49 | ); 50 | } 51 | 52 | export default App; 53 | ``` 54 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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/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/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/js-frameworks/react-js/react-hook-form-file-upload.md: -------------------------------------------------------------------------------- 1 | # React Hook Form File Upload 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 NOT using React Hook form, Please [see this guide](react-file-upload-form.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-hook-form-file-upload-km3bsh?file=/src/App.js" %} 14 | React Hook Form File Upload 15 | {% endembed %} 16 | 17 | Here's the code: 18 | 19 | ```jsx 20 | import React from "react"; 21 | import { useForm } from "react-hook-form"; 22 | 23 | function App() { 24 | const { register, handleSubmit } = useForm(); 25 | const [result, setResult] = React.useState(""); 26 | 27 | const onSubmit = async (data) => { 28 | console.log(data); 29 | 30 | setResult("Sending...."); 31 | const formData = new FormData(); 32 | 33 | formData.append("access_key", "YOUR_ACCESS_KEY_HERE"); 34 | 35 | for (const key in data) { 36 | if (key === "file") { 37 | formData.append(key, data[key][0]); 38 | } else { 39 | formData.append(key, data[key]); 40 | } 41 | } 42 | 43 | const res = await fetch("https://api.web3forms.com/submit", { 44 | method: "POST", 45 | body: formData 46 | }).then((res) => res.json()); 47 | 48 | if (res.success) { 49 | console.log("Success", res); 50 | setResult(res.message); 51 | } else { 52 | console.log("Error", res); 53 | setResult(res.message); 54 | } 55 | }; 56 | 57 | return ( 58 |
59 |

React Hook Form File Upload

60 |
61 | 62 |
63 |
64 | 65 |
66 |
67 | 68 |
69 |
70 | 71 |
72 |
73 | {result} 74 |
75 | ); 76 | } 77 | 78 | export default App; 79 | 80 | ``` 81 | -------------------------------------------------------------------------------- /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/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: https://app.webforms.com 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: \ 55 | [https://developers.cloudflare.com/turnstile/get-started/](https://developers.cloudflare.com/turnstile/get-started/) 56 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 subscription 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/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 | -------------------------------------------------------------------------------- /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 | 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/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, visit the dashboard: [https://app.webforms.com](https://app.webforms.com/) and click on your form and then enable hCaptcha as your preferred captcha 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/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/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 | ## Form works locally, but not working on my hosted domain. 138 | 139 | To prevent spam & abuse, we block certain domains, sub-domains & LTDs by default. If your form works as expected in localhost and not working in your custom domain website, please [contact us](https://web3forms.com/contact) with the domain name to review. Once approved, you can submit form as usual. 140 | 141 | To approve certain free sub-domains provided by some platforms won't be approved. So please add a custom domain and contact us if its not working. Otherwise, you would need a paid plan to allow the free sub-domain. 142 | 143 | ## 403 : This method is not allowed 144 | 145 | Web3Forms API is expected to run on client side for spam prevention. If you call the API on the server side, you might get this method is not allowed error. 146 | 147 | To fix this, make sure you run our API on the client side. Our API fetch should be visible in the network tab in browser developer console. Do not proxy it in another API or server side code. The access key can be public and safe to add in client side code. 148 | 149 | If your use-case require you to use server side code, then you must add your server IP address to our Safelist + you must have an active **Paid** subscription. Please contact support with your server IP to activate server side API calls. 150 | 151 | ## 429: Rate limited because of too many requests 152 | 153 | When we detect too many requests from single IP address in a short period of time, we block the IP for a certain period temporarily to prevent spamming or abuse of our system. 154 | 155 | If you get this error, which means you tried to submit forms too many times quickly. Please wait for one hour and try again. For testing, make sure you take some time for each submissions to avoid rate-limits. 156 | 157 | Rate-limits for your IP address will be removed automatically after one hour. 158 | 159 | -------------------------------------------------------------------------------- /how-to-guides/js-frameworks/react-plugin.md: -------------------------------------------------------------------------------- 1 | # Web3Forms React Plugin 2 | 3 | We have an official Web3Forms React Plugin to help you send form submissions easily using Web3Forms & React, Next.js etc. 4 | 5 | [@web3forms/react](https://www.npmjs.com/package/@web3forms/react) is available to download from [npm](https://www.npmjs.com/package/@web3forms/react) and the source on [github](https://github.com/web3forms/web3forms-react). 6 | 7 | The following example shows how you can create a working contact form using this react hook. 8 | 9 | First, install the plugins from NPM: 10 | 11 | ```bash 12 | npm install @web3forms/react 13 | npm install react-hook-form 14 | # or 15 | pnpm add @web3forms/react 16 | pnpm add react-hook-form 17 | ``` 18 | 19 | Then, Import the Plugin & add the following code. 20 | 21 | ### Basic Example 22 | 23 | ```jsx 24 | import { useState, useEffect } from "react"; 25 | // npm install react-hook-form @web3forms/react 26 | import { useForm } from "react-hook-form"; 27 | import useWeb3Forms from "@web3forms/react"; 28 | 29 | export default function Contact() { 30 | 31 | const {register, reset, handleSubmit} = useForm(); 32 | 33 | const [isSuccess, setIsSuccess] = useState(false); 34 | const [result, setResult] = useState(null); 35 | 36 | const accessKey = "YOUR_ACCESS_KEY_HERE"; 37 | 38 | const { submit: onSubmit } = useWeb3Forms({ 39 | access_key: accessKey, 40 | settings: { 41 | from_name: "Acme Inc", 42 | subject: "New Contact Message from your Website", 43 | // ... other settings 44 | }, 45 | onSuccess: (msg, data) => { 46 | setIsSuccess(true); 47 | setResult(msg); 48 | reset(); 49 | }, 50 | onError: (msg, data) => { 51 | setIsSuccess(false); 52 | setResult(msg); 53 | }, 54 | }); 55 | 56 | return ( 57 |
58 |
59 | 60 | 61 | 62 | 63 | 64 | 65 |
66 | 67 |
{result}
68 |
69 | ); 70 | } 71 | ``` 72 | 73 | ### Advanced Example (with tailwindcss) 74 | 75 | {% code title="contact.js" %} 76 | ```jsx 77 | // This example uses `@web3forms/react` plugin and tailwindcss for css styling 78 | 79 | import { useState, useEffect } from "react"; 80 | import { useForm } from "react-hook-form"; 81 | import useWeb3Forms from "@web3forms/react"; 82 | 83 | export default function Contact() { 84 | const { 85 | register, 86 | handleSubmit, 87 | reset, 88 | watch, 89 | control, 90 | setValue, 91 | formState: { errors, isSubmitSuccessful, isSubmitting }, 92 | } = useForm({ 93 | mode: "onTouched", 94 | }); 95 | const [isSuccess, setIsSuccess] = useState(false); 96 | const [message, setMessage] = useState(false); 97 | 98 | // Please update the Access Key in the .env 99 | const apiKey = process.env.PUBLIC_ACCESS_KEY || "YOUR_ACCESS_KEY_HERE"; 100 | 101 | const { submit: onSubmit } = useWeb3Forms({ 102 | access_key: apiKey, 103 | settings: { 104 | from_name: "Acme Inc", 105 | subject: "New Contact Message from your Website", 106 | }, 107 | onSuccess: (msg, data) => { 108 | setIsSuccess(true); 109 | setMessage(msg); 110 | reset(); 111 | }, 112 | onError: (msg, data) => { 113 | setIsSuccess(false); 114 | setMessage(msg); 115 | }, 116 | }); 117 | 118 | return ( 119 | <> 120 |
121 | 127 | 128 |
129 | 143 | {errors.name && ( 144 |
145 | {errors.name.message} 146 |
147 | )} 148 |
149 | 150 |
151 | 154 | 173 | {errors.email && ( 174 |
175 | {errors.email.message} 176 |
177 | )} 178 |
179 | 180 |
181 | 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 | -------------------------------------------------------------------------------- /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/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" 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 | {% hint style="danger" %} 28 | For advanced uploader, `enctype=""` is not required and must be removed from the `
`
29 | {% endhint %} 30 | 31 | **Step 2: Add the following script before the closing of \** 32 | 33 | ```html 34 | 35 | 36 | ``` 37 | 38 | ### Advanced Options 39 | 40 | You can configure some options in the advanced uploader like multiple, accept types, max file size etc. See below: 41 | 42 | ```html 43 | 52 | ``` 53 | 54 | ⚠️ **Note on `data-form-id` :** We will try to get the form-id from your form action URL or access key from the hidden `access_key` input inside ``. if you are using them dynamically or in other places, you need to fill that here as well. 55 | 56 | ### Live Demo on Codepen 57 | 58 | [https://codepen.io/surjithctly/pen/RwXBQZR](https://codepen.io/surjithctly/pen/RwXBQZR) 59 | 60 | ### Example Code 61 | 62 | ```html 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 77 | 78 | 79 |
80 | 81 | 82 | 83 | ``` 84 | 85 | If you add just two lines to your contact form, you will get an advanced file upload form. 86 | 87 | {% hint style="warning" %} 88 | Note: You do not need to use `multipart/form-data` if you are using our advanced file uploader. You can use the normal method. 89 | {% endhint %} 90 | 91 | ### Styling & Theme 92 | 93 | 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: 94 | 95 | ```html 96 | 97 | 98 | 106 | 107 | ``` 108 | 109 | 110 | 111 | ### Client Side Validation 112 | 113 | Use this snippet to make the file upload field required and to validate if the file is uploaded or not. 114 | 115 | Add the following code block just above the closing of \ and make sure `YOUR_FORM_ID` is updated with your form id. 116 | 117 | ```html 118 | 132 | ``` 133 | 134 | ## Javascript Example 135 | 136 | {% hint style="warning" %} 137 | For Javascript usage, you must serialize the data and include `Content-Type` headers as `application/json` 138 | {% endhint %} 139 | 140 | 
const form = document.getElementById('form');
141 | const submitBtn = form.querySelector('button[type="submit"]');
142 | 
143 | form.addEventListener('submit', async (e) => {
144 |     e.preventDefault();
145 |     
146 |     const formData = new FormData(form);
147 |     const object = Object.fromEntries(formData);
148 |     const json = JSON.stringify(object);
149 |     
150 |     const originalText = submitBtn.textContent;
151 |     
152 |     submitBtn.textContent = "Sending...";
153 |     submitBtn.disabled = true;
154 |     
155 |     try {
156 |         const response = await fetch("https://api.web3forms.com/submit", {
157 |             method: "POST",
158 |             body: json,
159 |            headers: {
160 |              "Content-Type": "application/json"
161 |            }
162 |         });
163 |         
164 |         const data = await response.json();
165 |         
166 |         if (response.ok) {
167 |             alert("Success! Your message has been sent.");
168 |             form.reset();
169 |         } else {
170 |             alert("Error: " + data.message);
171 |         }
172 |         
173 |     } catch (error) {
174 |         alert("Something went wrong. Please try again.");
175 |     } finally {
176 |         submitBtn.textContent = originalText;
177 |         submitBtn.disabled = false;
178 |     }
179 | });
180 |
181 | 182 | ## Usage with React 183 | 184 | Iif you are using react, we suggest you to use the Filepond Library directly. 185 | 186 | Also check: [Filepond React](https://github.com/pqina/react-filepond) 187 | 188 | **File Uploader Widget** 189 | 190 | ```jsx 191 | import React, { useState } from 'react'; 192 | import { FilePond, registerPlugin } from 'react-filepond'; 193 | import 'filepond/dist/filepond.min.css'; 194 | 195 | // Register plugins if needed 196 | // registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview); 197 | 198 | function FileUploader() { 199 | const [files, setFiles] = useState([]); 200 | 201 | const getPresignedUrl = async (file) => { 202 | try { 203 | const response = await fetch(`https://api.web3forms.com/upload?file=${file.name}`); 204 | const data = await response.json(); 205 | return data; 206 | } catch (error) { 207 | console.error('Error generating pre-signed URL:', error); 208 | throw error; 209 | } 210 | }; 211 | 212 | return ( 213 | { 222 | try { 223 | const { url, key } = await getPresignedUrl(file); 224 | 225 | const response = await fetch(url, { 226 | method: 'PUT', 227 | body: file, 228 | headers: { 229 | 'Content-Type': file.type, 230 | }, 231 | }); 232 | 233 | if (response.ok) { 234 | load(key); 235 | } else { 236 | error('Upload failed'); 237 | } 238 | } catch (err) { 239 | error('Error uploading file'); 240 | } 241 | }, 242 | }} 243 | /> 244 | ); 245 | } 246 | 247 | export default FileUploader; 248 | ``` 249 | 250 | **Using it with Vanilla React** 251 | 252 | ```jsx 253 | import React from 'react'; 254 | import FileUploader from './FileUploader'; 255 | 256 | function App() { 257 | return ( 258 |
259 |

File Upload Example

260 |
261 | 266 | 267 | 268 | 269 | 270 |
271 | ); 272 | } 273 | 274 | export default App; 275 | ``` 276 | 277 | 278 | 279 | **Usage with React Hook Form** 280 | 281 | ```jsx 282 | import { useForm, Controller } from "react-hook-form"; 283 | import FileUploader from './FileUploader'; 284 | 285 | export default function Support() { 286 | const { register, handleSubmit } = useForm({ 287 | mode: "onTouched", 288 | }); 289 | 290 | const onSubmit = async (data, e) => { 291 | // Replace with actual call to Web3Forms 292 | console.log(data); 293 | }; 294 | 295 | return ( 296 |
297 | 298 | ( 302 | field.onChange(e.cdnUrl)} 304 | /> 305 | )} 306 | /> 307 | 308 | 309 | ); 310 | } 311 | 312 | ``` 313 | -------------------------------------------------------------------------------- /how-to-guides/js-frameworks/react-js/react-js.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: React contact form example using react-hook-form plugin 3 | --- 4 | 5 | # React Hook Form 6 | 7 | Here's a sample React Contact Form built with `react-hook-form` plugin. See [Plugin docs here](https://react-hook-form.com/). 8 | 9 | This example uses TailwindCSS for styling. You may use your own if needed. 10 | 11 | ```jsx 12 | import React from "react"; 13 | import { useForm, useWatch } from "react-hook-form"; 14 | 15 | export default function ContactForm() { 16 | const { 17 | register, 18 | handleSubmit, 19 | setValue, 20 | reset, 21 | control, 22 | formState: { errors, isSubmitSuccessful, isSubmitting }, 23 | } = useForm({ 24 | mode: "onTouched", 25 | }); 26 | const [isSuccess, setIsSuccess] = React.useState(false); 27 | const [Message, setMessage] = React.useState(""); 28 | 29 | const userName = useWatch({ 30 | control, 31 | name: "name", 32 | defaultValue: "Someone" 33 | }); 34 | 35 | useEffect(() => { 36 | setValue('subject', `${userName} sent a message from Website`) 37 | }, [userName, setValue]); 38 | 39 | const onSubmit = async (data, e) => { 40 | console.log(data); 41 | await fetch("https://api.web3forms.com/submit", { 42 | method: "POST", 43 | headers: { 44 | "Content-Type": "application/json", 45 | Accept: "application/json", 46 | }, 47 | body: JSON.stringify(data, null, 2), 48 | }) 49 | .then(async (response) => { 50 | let json = await response.json(); 51 | if (json.success) { 52 | setIsSuccess(true); 53 | setMessage(json.message); 54 | e.target.reset(); 55 | reset(); 56 | } else { 57 | setIsSuccess(false); 58 | setMessage(json.message); 59 | } 60 | }) 61 | .catch((error) => { 62 | setIsSuccess(false); 63 | setMessage("Client Error. Please check the console.log for more info"); 64 | console.log(error); 65 | }); 66 | }; 67 | 68 | return ( 69 | <> 70 |
71 | {!isSubmitSuccessful && ( 72 |
73 | 78 | 82 | 87 | 93 | 94 |
95 | 109 | {errors.name && ( 110 |
111 | {errors.name.message} 112 |
113 | )} 114 |
115 | 116 |
117 | 120 | 139 | {errors.email && ( 140 |
141 | {errors.email.message} 142 |
143 | )} 144 |
145 | 146 |
147 |