Accessing submitted form data in content query

Visual Editor Help
,
1

What are you trying to accomplish
I want to build a multi-step form, then take the form data and use it run a query and a tiny bit of javascript to filter content (e.g. by price) and then show this content in a list.

I am unclear how to make this work without just using the REST API and writting everything in code. Some parts of the visual editor can access state.location.query so I am wondering if the same is possible for a custom content query. That way I could maybe redirect after form submission to a page with each form input as a query param and then use that to run the query and filter/sort the result in Javascript.
Unfortunately the docs are so imcomplete that without a lof of trial and error it is not clear what is, and what is not possible. Did anybody achieve something similar or what is the best way to get this to work with Builder.io?

Code stack you are integrating Builder with
Ideally Visual Editor only, otherwise react.

2

Hello @flo,

To build a multi-step form in Builder.io and use the form data to query and display content dynamically, you can leverage Builder.io’s data binding and state management capabilities in combination with JavaScript. Here’s an outline of how you might accomplish this:

  1. Create a Form in Builder.io:

    • Use Builder’s visual editor to design your form. You can use custom fields to handle user input.
    • Implement a multi-step form by creating multiple pages or sections and using state to control the visibility of each step.

  2. Capture Form Data:

    • Use Builder’s state management to capture user input. Form field values can be stored in the state, e.g., state.userInput.

  3. Redirect and Use Query Parameters:

    • Upon form submission, redirect users to a results page, appending the form data as query parameters in the URL.
    • Use state.location.query to access these query parameters within your content. This allows you to keep using the visual editor instead of writing everything directly in code.

  4. Run a Custom Query Based on Form Data:

    • Use Builder’s data-binding functionalities to dynamically query content. You can filter and sort the content based on the captured form data.
    • Implement custom JavaScript within Builder’s editor to further process or filter the query results. You can use JavaScript to handle complex logic based on the form input.

  5. Display the Filtered Content:

    • Bind the query results to a list or grid component using the visual editor. This way, you can visually control how the data is presented to the user.

If you’re hitting any limitations, extending them by using custom code or components is a common practice. You can refer to registering custom components and leverage them within Builder.io to enhance or add completely new capabilities that fit your needs.

Thanks,