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
  • Integration overview:
  • Step 1: Configuring your Webstudio Form
  • Step 2: Setting Up Webhooks in Airtable and Webstudio
  • Step 3: Mapping Data to the Right Fields
  • Conclusion

Was this helpful?

Edit on GitHub
  1. university
  2. Integrations

How to integrate a Webhook Form with Airtable

This article will explore the process for integrating your Webstudio Form with Airtable using a simple automation.

PreviousHow to integrate Webhook Form with N8NNextHow to integrate Flotiq with Webstudio

Last updated 10 months ago

Was this helpful?

Out of the box, Webstudio automatically sends form data to the site owner’s registered email, effectively creating singular records. To expand this functionality, we can seamlessly integrate it with a relational database like Airtable. This will centralize, access, and analyze all your form submission data in one place, making data management a breeze and enabling efficient team collaboration.


Integration overview:

You can integrate your Webstudio form with Airtable in 3 simple steps:

  1. Configuring your Webstudio form

  2. Setting Up Webhooks in Airtable and Webstudio

  3. Mapping Data to the Right Fields

Step 1: Configuring your Webstudio Form

To configure your form for the integration, you will need to define the input name for each field. Select your form input field in the navigator, and head over to “Settings” on the right to fill in the name property. Repeat this for every input field on your form as this is what Airtable will use to identify your website form submissions.

Step 2: Setting Up Webhooks in Airtable and Webstudio

Airtable simplifies the process of setting up webhooks within the platform.

  1. Open your Airtable workspace and navigate to the table where you want to add data.

  2. Click on the "Automations" button located on the top of the screen.

  3. Create a new automation by selecting "Create Automation" and choose the trigger event. In this case, select "When webhook received" as the trigger.

  4. Copy the webhook URL to your clipboard.

Next, link your Webstudio form to this webhook.

  1. Open up Webstudio and select the form you want to link to Airtable.

  2. Navigate to the Settings tab on the top right.

  3. Click on the "+" button beside properties.

  4. Select "Action" from the dropdown.

  5. Paste the Airtable webhook URL into the new action field.

  6. Publish your new changes on Webstudio.

  7. Head over to the live version of your site and create a test submission on your form. This will trigger send the submission to Airtable and validate your integration.

Step 3: Mapping Data to the Right Fields

  1. Identify Key Data Points Determine the essential data points you want to capture from the incoming data. For example, if you're receiving data from a contact form, key data points might include the name, email address, phone number, and message.

  2. Create Fields in Airtable Under the data tab, in your selected table, create fields that correspond to the identified data points. Airtable offers various field types (e.g., Single Line Text, Email, Phone, Date) to accommodate different types of data.

  3. Set Up Data Mapping Automation Head back to Airtable's automation tab, add a new action to your original automation. Select "Create record" as the action type and map the incoming data to the respective fields. In the automation setup, specify which data points should populate each field in the Airtable table.

  4. Turn on your automation Now that we have finished configuring our automation, we can turn it on.

Conclusion

With the webhook set up, data will automatically flow into your Airtable automation. Now, let's proceed to map the incoming data to the appropriate feeds within the table. To learn more about how to use Airtable's powerful automation tool, refer to their official .

Airtable's native features empower users to streamline data entry and enhance data organization. By setting up a webhook action from your Webstudio form to receive external data and automating the mapping process, you eliminate the need for manual data entry, reduce the risk of errors and gain access to all of Airtable's data management features.

🔗
documentation
automation