Forms

Forms in the Data Store are used to store data that is submitted by the user. They can be accessed via the f keyword in the Function Editor.

Note

As opposite to Input Fields, forms are not automatically populated when the user inputs the data, but rather when the form is submitted. This is an intended behavior as it allows you to validate the data before storing it in the Data Store.

Benefits of using forms

Forms are the native way of collecting data from the user in a browser. They are easy to use and provide a lot of useful features out of the box, such as:

• Input Validation: The browser automatically validates the input data based on the input field's type and attributes.
• Accessibility: The browser automatically handles accessibility features such as focus management, keyboard navigation, and screen reader support.

Creating a form

To start tracking a form, add the Wized Element HTML attribute to the form:

This will create a new form named f.form_name in the Data Store and Wized will automatically populate it with the form's data when it is submitted:

Note

By default forms are automatically submitted to Webflow. If you want to prevent this behavior, see Preventing forms from being submitted to Webflow.

When the form is submitted, each input field's value is stored in the Data Store under the f.form_name object. The input field's name is used as the key and the input field's value is used as the value.

Each field's name can be defined in the element settings in the Webflow Designer:

For example, a form that has a title, description, and completed input fields with the following names:

• Name: title
• Name: description
• Name: completed

Will result in the following data being stored in the Data Store when the form is submitted:

f.todo_form = {
  title: 'My todo',
  description: 'My todo description',
  completed: false,
};

Updating a form

To update a form, you can either use the Set form values action or use custom JavaScript.

Updating a form using JavaScript

WARNING

This is an advanced feature and should only be used if you know what you're doing.

All forms can be updated using custom JavaScript instead of relying on the Set form values action. Any changes made to a form using JavaScript will be reflected in the app's state, triggering any dependent actions.

Similar to the Set form values action, when a form is updated using JavaScript Wized will automatically update the form fields in the user's browser.

Updating a form inside the Function Editor

To update a form inside the Function Editor, you can simply assign a new value to it. You can either update the whole form:

(i, f, c, n, r, v, e, t) => {
  // ...

  f.form_name = {
    title: 'new title',
    description: 'new description',
    completed: true,
  };
};

Or you can update a specific field:

(i, f, c, n, r, v, e, t) => {
  f.form_name.title = 'new title'; 
};

Updating a form via the JavaScript API

Forms can also be updated via the JavaScript API:

Wized.data.f.form_name = {
  title: 'new title',
  description: 'new description',
  completed: true,
};

Preventing forms from being submitted to Webflow

By default, forms are automatically submitted to Webflow. This is useful if you want to use Webflow's native form submission features such as form notifications or form submissions.

But in general, you will want to prevent forms from being submitted to Webflow and instead use the data for other purposes like sending it to your own API.

To prevent a form from being submitted to Webflow, you must check the Prevent Default option when defining a submit event via an On Event action: