Inputs

Inputs in Wized allow you to capture and use data entered by users in real time. Unlike forms, inputs do not group data but provide immediate access to the values typed by the user. This makes them ideal for dynamic interactions, real-time logic execution, and live data formatting.

Note

Make sure to read and understand the differences between using inputs and forms before choosing one. Avoid using both for the same elements, as they behave differently.

How do inputs work?

When an input field in Webflow has the Wized attribute, it is automatically detected and listed in the Data Store under the Inputs section. Unlike forms, inputs are recognized individually.

Key characteristics of inputs:

• Real-time data access: The value of an input updates in real time as the user types.
• Independent behavior: Each input is treated as a separate element, meaning it does not depend on a form submission.
• Event-driven logic: Inputs can trigger actions based on user input.

Where do inputs appear in Wized?

Inputs are dynamically recognized based on the current page in the Wized configurator. If you are on the /dashboard page, only the inputs present on that page will be listed in the Data Store.

How to use inputs in Wized?

Inputs are primarily used to capture user data and integrate it into the logic of your Wized application. You can:

Use input values in logic

The input values can be used in the Function Editor to dynamically update elements, validate data, or interact with API requests.

Example 1: Validate user age in real time

return i.age >= 18;
// Returns true if the user is 18 or older

Example 2: Format currency input as the user types

return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(i.price);

Trigger events based on input changes

You can configure On Change or On Input events to execute logic when the user modifies an input field.

Example 3: Show a warning message when the input is empty

return i.email.trim() === '' ? true : false;
// Shows a warning if the email field is empty

Send input data via API requests

To send input values in an API request, configure an On Click event on a button and use the Function Editor to pass the input values.

Example 4: Sending input data in a request

1. Ensure the div button has the Wized attribute.
2. Add an On Click event to the button.
3. Configure the request in Wized and map the inputs inside the Function Editor.

Each key-value pair in the request body must be set individually:

• Key: email → Value: return i.login.email
• Key: password → Value: return i.login.password

This structure ensures that input values are properly sent when the user clicks the submit button.

When should you use inputs instead of forms?

Feature	Inputs	Forms
Real-time value updates	✅ Yes	❌ No
Grouping multiple fields	❌ No	✅ Yes
Trigger actions on every key press	✅ Yes	❌ No
Submit using the Enter key	❌ No	✅ Yes
Use Webflow native validations	❌ No	✅ Yes
Best for data collection	❌ No	✅ Yes
Best for interactive logic	✅ Yes	❌ No

Best practices

• Use inputs when you need to capture user input in real time for dynamic updates, live validation, or interactive logic.
• Use forms when you need to collect structured data and submit it in one action.
• Avoid mixing both approaches unless necessary for a specific use case.