Start by creating a new project in Wized. This is where you'll manage everything related to your form.

Make sure you've added the StudioForm script to the page where your form is. This script is important for making everything work smoothly.

Find the form element inside your form block and add the Wized attribute to it. Set the name to "Wized" and the value to your form's name. This links your form to Wized.

Go to the action tab on the Wized dashboard, or click on the attribute value you added in Webflow's x-ray mode. You should see an action ready to go with your form's name.

In the action tab, find the settings section and look for event settings. Add the "sf-submit" event. This tells your form to use StudioForm's submission process.

Check the box labeled "Prevent Default." This option stops the form from being submitted to Webflow, giving you full control over what happens after the form is submitted.

Now that the basic setup is done, you can set up custom requests to services like Xano or Airtable. This opens up many advanced possibilities for your form, enabling you to integrate with various platforms and perform complex tasks with your data.

Thevent is triggered when a user submits the form. Leverage this event to implement custom actions or logic for processing the form data.

‍

This event triggers when the user begins scrolling within the form. Use it to start any scroll-based actions or effects.

This event fires when the user stops scrolling in the form. It lets you manage any actions or updates that should occur after scrolling has finished.

Thevent manages transitions between different steps in your multistep form. Use this event to handle and customize the flow as users move from one step to the next.

‍

Thevent fires if the form submission encounters any issues. This allows you to address errors and provide feedback to users seamlessly.

‍

Th event occurs when data is successfully retrieved for the form. Use this event to manage or display the fetched data as needed.

‍

This event helps you track changes in the form’s asynchronous states. This is useful for managing tasks that depend on form data being processed or fetched.

‍

This event is triggered when a form’s promise resolves successfully. Use it to perform actions after the form’s data has been successfully processed.

This event occurs when a form is removed from the active view. Utilize it to handle cleanup or adjustments after the form is no longer visible.

This event fires when a form is added to the view. It’s the ideal time to initialize or configure form elements as they become visible.

This event occurs when the form's validity is assessed. Use it to handle and display validation results, ensuring that all form data meets the required criteria.

To start, add the attribute to the step(s) you want. You can apply this to specific steps or to the entire form by adding it to the form block.

Go to the form settings in Webflow and set the "Action" field to /. This ensures that the form does not submit directly through Webflow.

In Wized, navigate to the "Variables" tab on your dashboard. Create a variable called form_data. Then, copy the code snippet from the "Generating Form Data from a Variable Function" section in the documentation and paste it into the initial value field of your variable. Save your changes.

Create a new action in Wized, similar to what you did in the initial setup. Under "Events," add sf-promise, and in the action dropdown, choose to run a function.

In this implementation, we will focus on ensuring that the email field does not accept any Gmail addresses. If a Gmail address is entered, the form will not proceed, and an error message will be shown.

Tick the "Conditional?" checkbox beneath the function. You’ll now see a conditional input field. Insert the given snippet, which retrieves details about the step where you added the sf-promise resolve attribute (in this example, Step 2).

Next, we’ll add the logic to the email field. The given snippet prevents the form from resolving if a Gmail address is entered and displays an error message for invalid input.

Replace all placeholder text with the correct IDs and class names. The first placeholder should be replaced with the name of the input field. The second one should be replaced with the input’s ID. The third and fourth placeholders should be replaced by the class names of the error text.

With these updates, you have successfully implemented a fully working promise resolve for the email field.

This implementation demonstrates how to use resolve to block Gmail addresses, but StudioForm allows for much more complex logic using the JavaScript API.

‍

To ensure that your scripts execute only after the StudioForm JavaScript API is fully loaded, use the given code snippet. This snippet initializes the StudioForm array if it doesn’t already exist and pushes your code to be executed once StudioForm is ready.

To interact with specific form instances, use one of these methods. Choose the appropriate approach to access and manipulate individual forms based on your setup.

Use the given snippet to create a flexible object with very little code. If key-value pairs exist for the same key, an array is automatically created for this key.

Use the given snippet to convert your form data into an array. This method extracts form data entries into an array format, allowing easy iteration and processing.

‍

Use this snippet to convert your form data into an object. This approach converts the form data into a structured object, making it convenient for organized data handling and integration.

‍

Use this snippet to convert your form data into an object at any time. This approach + Wized variables converts the form data into a structured object, which is convenient for organized data processing and integration.

To move your form to the success state without triggering actual submission mechanisms, you can use the give snippet. This allows you to simulate a successful form submission while bypassing the real submission process.

To set the authorization bearer header token for your form, use the given snippet. This enables you to easily configure the authorization token for secure API interactions.

To customize the record data that StudioForm uses, add the given snippet. This command allows you to overwrite and tailor the record variable to meet your specific needs.