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

  • Comment author
    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
  • Comment author
    Oliver Cordingley

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

    0
  • Comment author
    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
  • Comment author
    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
  • Comment author
    Nikol' Moira

    Thanks a mil for that!

    0
  • Comment author
    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
  • Comment author
    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
  • Comment author
    Asad Halilović

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

    0
  • Comment author
    A J

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

    0
  • Comment author
    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
  • Comment author
    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
  • Comment author
    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
  • Comment author
    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
  • Comment author
    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
  • Comment author
    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
  • Comment author
    Morten Bruun

    Still no luck

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

    0
  • Comment author
    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
  • Comment author
    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
  • Comment author
    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
  • Comment author
    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
  • Comment author
    Josh Lopez

    click on the "Radio Button" element on the left

    correct

    0
  • Comment author
    Morten Bruun

    gotcha

    Awesome, that works - thanks!

    0

Please sign in to leave a comment.