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? Answered
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
Comments
22 comments
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).
Hey Tyler Bell, thank you for your reply - sorted!
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...
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 🙂
Thanks a mil for that!
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.
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.
I am using built im webflow slider element, not custom code.
Hey technically the slider element is powered by custom code and its not a webflow slider element.
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
Hey Morten Bruun
Thank you for posting. Are you using the right data attribute in your form element?
If this isnt a solution a url would help us find the problem.
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 🙏
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.
That worked!
How do I then get that to work with my current buttons? Right now, this is how they're configured:
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.
Still no luck
Gotcha, that makes sense - then I won't really need Formly, right?
I dont think so.
You have probably already seen this but just in case here is a help center article on multi-step forms
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 👆
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
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?
click on the "Radio Button" element on the left
correct
gotcha
Awesome, that works - thanks!
Please sign in to leave a comment.