Skip to main content

How to create a multi-step form in Webflow with Formly and Memberstack that saves data at each step and associates company name with the user?

Hey guys -

I want to have a multistep onboarding form that saves at each stage, all on the same page). At the moment my onboarding flow is lot’s of mini profile forms that redirect the user to the next step which is on another page.

I rebuilt the form on 1 page but I realised it will only save data when submit button is pressed which on step 6. This means if they exit - I lose some data + if I want to use personalisation for custom fields in steps like “Hi {firstname}“, it wont work…

is Any ideas would be appreciated

23 comments

  • Memberstack Team
    Memberstack Team Official comment

    A good way to tackle this is by using Script #197 – Multi-step Form Submission Handling. It’s designed to save data at each stage of a multi-step form, not just at the final submit. With #197 you can validate each step, track progress, and push the field values into Memberstack as soon as the user completes that step. That means if someone exits halfway through, you’ll still have partial data saved, and you can also use those fields immediately for personalization (like “Hi {firstname}”) without waiting until step 6.

    Script #197 is best when you want a structured, reliable multi-step flow with progress tracking and validation.

  • Tyler Bell
    Tyler Bell

    One idea would be to have a “Next Step” or “Next Section” button that reveals more of the form.

    it could be a normal form submit button.

    That would save the form data when it’s clicked, but also reveal more form inputs (which you’d need to configure that in webflow).

    0
  • Oliver Cordingley
    Oliver Cordingley OP

    Hey Tyler Bell, thank you for your reply - sorted!

    0
  • Nikol' Moira
    Nikol' Moira

    Just so I don't get ahead of myself...if I use a slider inside a form block to simulate a multi-step form—bound to the MS profile data, of course—will it still work? All the multi-step methods include multiple pages, and I'd rather not go that route...

    0
  • Julian Galluzzo
    Julian Galluzzo

    Hey!! I'd check out formly - here's a cloneable we made https://webflow.com/made-in-webflow/website/formly-client-first-base

    For the vast majority of use cases it is 1000% free 🙂

    0
  • Nikol' Moira
    Nikol' Moira

    Thanks a mil for that!

    0
  • Asad Halilović
    Asad Halilović

    Hello everyone, I have a problem with pagination and finsweet load more (load under) button. I have cms collection with more than 500 items, I want to make slider in collection item to list 2 images. Problem is that slider is working only on items that are initially loaded (24 items), when I click see more button, slider is not working for the rest of the items.

    0
  • A J
    A J

    Hey Asad Halilović, are you using custom library / code for the slider functionality?

    If yes, there are chances that this is happening because the code is initializing (or working) only for the items loaded on the first instance, which is a common blocker for any custom code when it interacts with the load more functionality. In that case, to solve this issue you can try to adapt the code to run on every instance when new collection items are loaded, to ensure all the collection items have sliders enabled.

    Let me know if you are not using custom code for slider and are still facing this issue.

    0
  • Asad Halilović
    Asad Halilović

    I am using built im webflow slider element, not custom code.

    0
  • A J
    A J

    Hey technically the slider element is powered by custom code and its not a webflow slider element.

    0
  • Morten Bruun
    Morten Bruun

    Hey team! I have a signup form with multiple steps using Formly. In the first step, I'm using Memberstack to create a profile with Google OAuth. In the second step, the user adds information about their company, including Company Name. How do I get the company name associated with the user?

    I've tried creating a custom field and have added data-ms-member = "company-name", but it still doesn't work

    0
  • Josh Lopez
    Josh Lopez

    Hey Morten Bruun

    Thank you for posting. Are you using the right data attribute in your form element?

    <form data-ms-form="profile">

    If this isnt a solution a url would help us find the problem.

    0
  • Morten Bruun
    Morten Bruun

    Hey Josh Lopez!

    I just tried doing that, but still doesn't work 😕

    Here's a link: https://flashdocs.webflow.io/createaccount

    Really appreciate your help 🙏

    0
  • Josh Lopez
    Josh Lopez

    try adding data-ms-form="profile" to the form element. This should fix the problem.

    if it still doesnt work, make sure the form is being submitted before redirecting

    Add it too the Form elements.

     

    If you get form submission notifications, then as a test try adding a regular submit button at the end please.

    0
  • Morten Bruun
    Morten Bruun

    That worked!

    How do I then get that to work with my current buttons? Right now, this is how they're configured:

    0
  • Josh Lopez
    Josh Lopez

    I have one last change to test. Can you try changing the method from "get" to "set" for the form?

    i found another problem. If someone doesnt add a real email it tries to show the error but it cant because its a single form.

    What I would do is use multiple forms. Currently if a user goes to step 2 and then stops the form wouldnt be submitted and you would lose the data. If you used a form for each step and had the user submit it and then go to the next section you would be able to save everything and not run into these issues.

    I'll also tag in Julian Galluzzo to see if he has any ideas. He is a wizard in webflow.

    0
  • Morten Bruun
    Morten Bruun

    Still no luck

    Gotcha, that makes sense - then I won't really need Formly, right?

    0
  • Josh Lopez
    Josh Lopez

    I dont think so.

    You have probably already seen this but just in case here is a help center article on multi-step forms

    0
  • Morten Bruun
    Morten Bruun

    Hey Josh Lopez! Thanks for your help to day - really appreciate it 🙏

    I've now reconfigured the flow to use separate forms and that seems to do the trick!

    However, I can't get my radio buttons to send the data. The link is the same - here's my configuration 👆

    0
  • Josh Lopez
    Josh Lopez

    I'm glad you were able to figure it out! Here is a help center on radio button.

    For "How many people work at your company?" You need to add data-ms-member="company-size" data attribute to all of the input elements

    0
  • Morten Bruun
    Morten Bruun

    Hm, this is the way I've configured it now

    Oh wait, is it bc the data attribute needs to be on the actual radio button and not the element?

    0
  • Josh Lopez
    Josh Lopez

    click on the "Radio Button" element on the left

    correct

    0
  • Morten Bruun
    Morten Bruun

    gotcha

    Awesome, that works - thanks!

    0

Please sign in to leave a comment.

Sitemap