Forms

Introduction

Forms in Wized allow you to interact with your users and collect valuable information in a structured and accessible way. You can create contact forms, registration forms, surveys, or any other type of form you need for your web application. Additionally, forms in Wized enhance the user experience by allowing submission with just a press of the “Enter” key.

How do Forms work in Wized?

A Form in Wized is a group of input fields (inputs, checkboxes, radio buttons, etc.) wrapped in a "Form" element. In order for Wized to interact with it, you must assign the wized attribute to the Form element and make sure that each input field has a descriptive name in its Webflow settings.

Once connected, Wized groups all the form fields into an object, where each field becomes a property. You can access the values of each field using dot notation, for example:

f.form_name.field_name; // Access the values of each field using dot notation

Why use Forms in Wized?

Forms allow you to:

• Collect information from your users: Obtain contact information, preferences, comments, etc.
• Process data: Send form data to an API or database for storage or further processing.
• Create dynamic interactions: Use the information from the form to personalize the user experience, display success or error messages, or perform other actions in your application.

How to create a Form in Wized?

1. Design your Form in Webflow: Create the form in Webflow with the input fields you need.
2. Give your fields descriptive names: In your Webflow settings, ensure that each input field has a descriptive and unique name.
3. Add the wized attribute to the Form: In Webflow, add the wized attribute to the main Form element.
4. Access form values in Wized: Once the user submits the form, you can access the values of each field in the Function Editor using dot notation.

How to send the collected data?

Forms use Webflow's default submit button to trigger data submission.

1. Associate an On Submit event to the form: In the Wized settings panel, select the form and associate the On Submit event .
2. Perform Request action : Within the On Submit event, select the Perform Request action and configure the API request you want to execute.
3. Access the form data: In the Function Editor of the request you want to execute, you can access the values of the form fields using the f parameter and send them in the body of the request.

note

that form field values are only available after the user has submitted the form.

Inputs vs Forms: Which to use?

Both inputs and forms are essential elements for interacting with users and collecting data in your Wized app. However, it is important to understand their differences in order to choose the most appropriate option for each situation.

Key behaviors

• Access to values in real time: Inputs allow you to access their values in real time, which is useful for instant validations and dynamic interface updates. Forms, on the other hand, only provide access to their values after they are submitted.
• Field grouping: Forms group multiple input fields into a single element, making them easier to manage and providing a more consistent user experience. Inputs, on the other hand, are handled individually.
• Native Validations: Forms in Webflow offer basic native validations (such as requiring fields or checking email formats), while inputs require custom validations using conditional logic in Wized.
• Submit with Enter Key: Forms can be submitted by pressing the Enter key, streamlining user interaction. Inputs require an additional element with an On Click configuration to trigger actions, such as sending data to an API.

Recommendations for use

• Inputs: Use these when you need to access values in real time to perform instant validations, dynamically update the interface, or create custom interactions based on the value of a single field.
• Forms: Use them to collect structured information from your users, take advantage of native Webflow validations, and simplify the data submission process.