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
  • When to use Form
  • How Form works
  • An example
  • Form inputs
  • Webstudio Form Components
  • Radix Form Components

Was this helpful?

Edit on GitHub
  1. university
  2. Core Components

Form

Forms are used for searches, filters, and custom functionality.

PreviousWebhook FormNextVimeo

Last updated 8 months ago

Was this helpful?

If you need the form submissions to be emailed to you/someone else or sent to a webhook, use .

When to use Form

When providing visitors with a search field or filters, the submission data does not need to be emailed to you (can you imagine!?). Instead, the submission data is used to modify the page's contents, like a search field on a blog.

How Form works

When submitting a form, its values are added to the URL as query parameters, triggering to re-fetch APIs and use the query parameters (available in the ).

This all happens without a page refresh, improving user experience.

An example

There's a blog listing page showing 100's blog posts over multiple pages and a Form added to the top with one text input, and its name field value is searchBlog.

The goal is simple: only blogs containing the search term will be shown when a visitor submits the form.

Here's how it works:

  1. The Resource will be modified to include the input value (just one in this case, but you can add as many as you need) like this:

`/api/blogs${system.search.searchBlog ? `?search=${system.search.searchBlog}` : ''}`

Form inputs

Many types of inputs can be added to a form.

There are currently two categories of form Components.

Webstudio Form Components

These generate standard HTML inputs. While simple to implement, they have limited styling options, especially for elements like checkboxes, due to the constraints of HTML and CSS.

They can be found in Add Components > Forms:

Input types

    • Button: Makes it a general element with no specific default action. Mainly used for interactions like opening something.

    • Submit: Will submit the form.

    • Reset: Will remove any data the user has put into a form.

  • Text Input – By default, it's a simple text field, but it can be changed by going to Settings > Type and selecting one of the following types: number, search, time, hidden, color, date, datetime-local, email, month, password, range, tel, url, or week.

  • Select – Provides a dropdown visitors can select one or more options.

  • Text Area – Allows visitors to add multi-line data as part of their answers. It is similar to the “Text Input” component and the two share the same list of properties.

  • Checkbox – Provides multiple options that the visitor can check or leave unchecked as part of their input.

  • Radio – Gives the visitor a list of options and they have to select one.

Radix Form Components

They can be found in Add Components > Radix:

A is already responsible for fetching all of those blog posts. The URL path in the Resource might look something like this: /api/blogs.

This contains the JavaScript Ternary Operator and Template Literals. It says, "Get the blogs, and if the searchBlog value is present, add the search filter to the API call; otherwise, don't."

All the search input values are available in , so if you have an input with a name, helloWorld you can access its value with system.search.helloWorld.

In summary, when submitting a form, its values are added to the URL as query parameters, which can then be used in . Resources are re-fetched when query parameters change so that the Resource can use the values when the form is submitted.

Button – To submit the form, reset it, or for interactions like opening something. . There are three types in Settings:

provide enhanced styling and control by using dynamic elements. They work by hiding the actual HTML inputs (which have limited styling capabilities) and displaying customizable versions. When users interact with these styled elements, the system automatically updates the state of the hidden inputs, providing a visually rich and flexible user experience.

🧩
✍️
Buttons are not links
Radix Form Components
Webhook Form
system.search
System Variable
webstudio form components
radix form components
search input with searchBlog name
expression
Resources
Resource
Resources