LogoLogo
Webstudio Home
  • Basics
    • 👋Welcome
    • 🔥Intro
    • 🎓Building your first site
    • 🤓Courses
    • 🔗Roadmap & Links
    • ❓FAQs
  • NEWS
    • 🆕April Update
    • 🆕December Update
    • 🆕September Update
    • 🆕Webstudio CMS Beta and Experts Network
  • university
    • ⚛️Foundations
      • 🛠️Anatomy of the Webstudio Builder
      • 🧱CSS Variables
      • 🖌️Design Tokens
      • 🔡Data Variables
      • ➕Expression Editor
      • Animations
      • 💾CMS
      • ↔️Copy-Paste
        • ↔️CSS
        • ↔️Markdown
        • ↔️Webflow
      • Commands & Search
      • 🎯SEO Settings
      • Shortcuts
      • ⚙️Project Settings
      • Modes
      • Share Links & Transferring Projects
      • 🌐Publishing & Custom Domains
    • 🧩Core Components
      • 📦Box
      • 🔗Link
      • 🖼️Image
      • 📃List
      • ⌨️HTML Embed
      • Animation Group
      • Text Animation
      • Video Animation
      • Stagger Animation
      • ✍️Webhook Form
      • ✍️Form
      • ⏯️Vimeo
      • ▶️Vimeo Background Video
      • YouTube
      • 💬Blockquote
      • 🔲Slot
      • Head Slot
      • ➖Separator
      • 📄Code Text
      • 🔘Button
      • 💾Collection
      • 🪜Content Embed
      • 🪜Markdown Embed
      • Content Block
      • 📘XML Node
    • ▫️Radix UI Components
      • Accordion
      • Collapsible
      • Dialog
      • Navigation Menu
      • Popover
      • Radio Group
      • Select
      • Sheet
      • Switch
      • Tabs
      • Tooltip
    • Marketplace
    • 🤖Webstudio AI
    • 📤Self-Hosting
      • ▶️CLI
      • ▶️Download
      • ▶️Cloudflare Pages
      • ▶️GitHub Pages
      • ▶️Netlify
      • ▶️Vercel
      • ▶️AWS with Flightcontrol (Docker)
      • ▶️Digital Ocean with Coolify (Docker)
      • ▶️Hetzner with Coolify (Docker)
    • 🧑‍🏫How-Tos
      • ▶️How to add icons
      • ▶️How to create fluid video backgrounds with Vimeo
      • ▶️How to create a countdown
      • ▶️How to crop an image with out cropping the original image
      • 🍀How to add a GSAP animation
      • ▶️Build Your Own Directory Website with Airtable
      • ▶️Using filters to dynamically display content (Airtable example)
    • 🔗Integrations
      • How to build a frontend for Hygraph using Webstudio
      • How to build a frontend for Airtable using Webstudio
      • How to build a WordPress frontend using Webstudio (no-code builder)
      • How to integrate a Notion database with Webstudio
      • How to integrate Webhook Form with Pabbly
      • How to integrate Webhook Form with Zappier
      • How to integrate Webhook Form with N8N
      • How to integrate a Webhook Form with Airtable
      • How to integrate Flotiq with Webstudio
    • Craft
  • Contributing
    • 🧑‍🎨Contributing for Designers
    • 🧑‍💻Contributing for Developers
    • Contributing to the Marketplace
  • ⚠️Errors
    • ▶️Connecting your Hostinger Domain to Webstudio
    • 🔌Worker not found
    • 🌮AppSumo redemption failed
  • Misc
    • 📊Account Limits
    • 🆘Webstudio Support Process
    • Fixing overflow issues
Powered by GitBook
On this page
  • Receiving Form Submissions
  • Email Notifications
  • Webhooks
  • Using the Webhook Form Component
  • Webhook Form Structure
  • Form States
  • Form Inputs

Was this helpful?

Edit on GitHub
  1. university
  2. Core Components

Webhook Form

Webhook Forms enable form submissions to get sent to an email address and optionally third-party services like Airtable, n8n, or Zapier.

PreviousStagger AnimationNextForm

Last updated 3 months ago

Was this helpful?

Name change: Webhook Forms used to be called "Forms." However, are now a different component intended for building searches and filters.

Receiving Form Submissions

Webhook Forms are used when you need to send form submission data to an external service, rather than modifying page content like searches and filters.

Email Notifications

By default, submissions are sent to the Project owner.

Pro feature: You can customize the recipient of email notifications by navigating to Project Settings > General.

Webhooks

You can also send form submission data to a webhook—an external URL that receives the data and triggers an action, such as adding a contact to an email automation platform.

  1. Paste the URL into the Action field in Webhook Form > Settings.

Once set up, every form submission will send a payload (form fields and values) to the webhook URL.

Using the Webhook Form Component

You can add a Webhook Form Component to your canvas from Components Panel > Data section.

Webhook Forms do not submit inside the Builder, including in Preview. They only submit on the published site.

Webhook Form Structure

A Webhook Form consists of three nested instances:

  1. Form Content – The primary form fields.

  2. Success Message – Displayed upon successful submission.

  3. Error Message – Shown when an error occurs.

Form States

Webhook Forms automatically switch between states based on submission results.

Success Message

When a submission is successful, users will see a success message. To customize it:

  1. Select the main "Form" instance and go to Settings.

  2. Change the State from "Initial" to "Success."

  3. Edit the success message directly on the canvas.

Error Message

If there’s an error during submission, users will see an error message. To modify it:

  1. Select the Webhook Form Component.

  2. Set the State to "Error" to preview and edit the error message.

Form Inputs

Each input field must have a name attribute for its data to appear in email notifications and webhook payloads.

Ensure every form input has a value for the name field to be included in submissions.

Obtain a webhook URL from a third-party platform such as .

You can to further expand and modify your form.

For a full list of input types, including checkboxes and radio buttons, refer to .

🧩
✍️
Airtable
Forms
add new Components
Form Inputs
Field to customize the recipient of the form submissions
Form input name