Web3Forms
  • Introduction
  • Getting Started
    • Installation
    • Customizations
      • Email Subject line
      • Success / Thank You Page
      • Custom Redirection
      • Captcha & SPAM
        • hCaptcha
        • reCaptcha & Turnstile
        • Honeypot
        • Report Spam
      • Custom Reply-To
      • From Name
    • Pro Features
      • reCaptcha Integration
      • Cloudflare Turnstile Captcha
      • Add CC Email
      • Autoresponder (Auto-Reply)
      • File Attachments
      • Advanced File Uploader
      • Webhooks
      • Restrict to Domain
      • Intro Text
    • Examples
      • Basic HTML Contact Form
      • Advanced - All Options
      • Ajax Contact Form using Javascript
      • Multi Column Contact Form
      • Javascript Form Validation
      • Contact Form with Dark Mode
      • Raw Contact Form
      • Google reCaptcha v3
      • File Upload Form
      • With Multiple Checkbox
    • Integrations
      • Zapier
      • Integromat
      • Examples
        • Google Sheets
        • Airtable
        • Telegram Notifications
    • Options Reference
    • API Reference
    • Troubleshooting
    • FAQ
  • How-to Guides
    • HTML & JavaScript
    • JS Frameworks
      • React JS
        • Web3Forms React Plugin
        • React Hook Form
        • Simple React Contact Form
        • React File Upload Form
        • React Google ReCaptcha v3
        • React Hook Form File Upload
      • Vue JS
      • Svelte
      • Angular JS
      • Alpine.js
    • Site Builders
      • Webflow
      • Framer
      • Carrd.co
      • Squarespace
      • Wix
      • Dorik
    • Static Site Generators
      • Next.js
      • Astro
      • Nuxt.js
      • Hugo
      • Jekyll
      • Gatsby
      • Gridsome
      • Eleventy
    • Hosting Providers
      • Vercel
      • Netlify
      • Digital Ocean
      • AWS
      • Github
      • Cloudflare
    • JAM Stack
    • Landing Page Builders
      • Unbounce
      • Instapage
      • Pagewiz
      • Groovefunnels
    • WordPress
      • Elementor
      • Oxygen Builder
Powered by GitBook
On this page
  • 1. Create a Form Block in Webflow
  • 2. Create a hidden input field in Webflow
  • 3. Add Access Key inside the HTML Embed Block
  • 4. Add Form Action URL
  • 5. Done.

Was this helpful?

Edit on Git
  1. How-to Guides
  2. Site Builders

Webflow

Here's a guide on how to integrate Web3Forms with Webflow using Form Block and HTML Embed

PreviousSite BuildersNextFramer

Last updated 1 year ago

Was this helpful?

Example Demo:

1. Create a Form Block in Webflow

First, you need to drag the form block element from the Webflow sidebar to your website.

2. Create a hidden input field in Webflow

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.

3. Add Access Key inside the HTML Embed Block

Now, add the hidden HTML Code as shown below inside the code editor and click Save.

Make sure the embed block is inside the Form Block.

4. Add Form Action URL

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.

Action URL: https://api.web3forms.com/submit

5. Done.

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 section for more details.

Customizations
https://web3forms-contact-form.webflow.io/
Drag the form block the canvas
Drag Embed Option inside the <Form> Block