How to Create a Multi-Step Form in WeWeb Using AI and Workflows?

Ask us anything
1

Hello WeWeb Community! :waving_hand:

I’m currently building a multi-step form in WeWeb and want to utilize WeWeb AI as much as possible to streamline the process. However, I’m facing challenges in structuring the form properly and setting up the necessary workflows. Here’s what I need help with:

:small_blue_diamond: What I’m Trying to Achieve:

  • A multi-step form where users fill in business-related details step by step.
  • Navigation buttons (“Next” and “Previous”) that allow smooth transitions between steps.
  • Conditional logic (e.g., if a user selects “Other” in a dropdown, an extra text field appears).
  • Saving progress so users don’t lose data if they refresh the page.

:small_blue_diamond: Current Challenges:

:one: How do I instruct WeWeb AI to generate a multi-step form?

  • I tried prompting the AI with step-by-step instructions, but it sometimes gets stuck or doesn’t structure the form correctly.
  • Should I generate each step separately and then manually connect them?

:two: How should I structure the form’s containers and sections?

  • Should each step be a separate container inside one main form container?
  • Or should I create separate pages and navigate between them?

:three: How do I properly set up workflows for Next/Previous buttons?

  • Should I use Component Variables or Global Variables to track progress?
  • What’s the best way to show/hide form sections dynamically?

:four: Any best practices for handling form submission and validation?

  • Should I store form responses in WeWeb’s local state first and send everything to the backend at the end?
  • Or is it better to update the database (Supabase) after each step?

:small_blue_diamond: Additional Context:

  • I’m using WeWeb + Supabase for authentication and data storage.
  • This form will be part of a user onboarding process where they configure an AI-powered phone assistant for their business.
  • I want the form to be user-friendly and responsive on all devices.

If anyone has experience setting up multi-step forms in WeWeb (especially using AI and workflows), I’d really appreciate your guidance! Any best practices, tutorial links, or step-by-step instructions would be a huge help. :folded_hands:

Thanks in advance! :rocket:

2

Was this written by AI?

1 Like
3

Yes! :sweat_smile:

4

More success on text prompt than UI prompts :joy:

Following your lead (and found it pretty useful): Ask chatgpt to create the detailed requirements for the prompt that you copy paste to weweb ai (had success doing exactly a wizard)

5

I contacted the WeWeb team, and they informed me that their AI is not capable of creating forms. They recommended using a coded component with the prompt ‘Create me a form with a coded component,’ but the resulting form was still very poor. So i want to create the logic of the form and the data and to make the design with the help of the AI ( he can make good designs )

6

Rather than creating a custom component with AI you could build it yourself with the tab element. You can probably still use AI in each step (tab) to do the styling.

7

And if all else fails you can buy from me a form building component. I went from tons of time to 1-min (of build time) for forms (multiple pages, multiple conditionals, over 20 questions)