Streaming live at 10am (PST)

Hiding Back/Prev Button in Multi Step Form


#1

I have been able to create a Multi Step form using some techniques with @samliew. But I am having trouble in the following areas:

  1. Hiding the Previous or Next button on the First or Last tab so the tabs aren’t looping.
  2. Stopping the user from moving on to the next tab if the current tabs form areas have not been completed correctly.

Some assistance would be greatly appreciated. I know technically what needs to happen but I am not sure how to apply it within Webflow.

https://preview.webflow.com/preview/chamos-home?preview=3b0a9fa53da221ec6f8d5cf29c46dbad

EDIT
The page I am referencing is Registers.


#2

You could probably copy those prev/next buttons into each tab content, then delete the prev button for the first tab and next button for the last tab.


#3

That is what I initially tried but they weren’t functioning on click. Once I pulled them from the tab panes I was able to have working. I’ve been also trying to see if there is an if/else code I can add in here but it’s targeting the right items that is tripping me up.


#4

If you do that then you’ll need to change the parent selector from .tab-wrapper to .w-form


#5

I’m stuck. I found a way to include the buttons within the tab panes which is working perfect but I am unsure of how to stop users from moving past incomplete or incorrect fields. While it does not allow the form to be submitted, the user would have to pan through the tabs to see what is the missing information.


#6

You’ll need custom code to check the current tab’s form fields using https://stackoverflow.com/q/11866910/584192 and stop the tab change if one of them is invalid.


#7

@samliew So I have tried this a few different times and I can’t seem to get it right. My coding isn’t the best. Is Webflow a place to ask for this kind of assistance or should I just cut it?


#8

Hey @Danielle_Gonzalez
This might help:
Multi-step form I’ve build for a client a while ago using the Slider component:

Demo:
http://step-form-daponte.webflow.io/

Read-only:
https://preview.webflow.com/preview/step-form-daponte?preview=97140905a2ea6990f8f3c36dd4d6b75d


#9

@philippe Yes! Exactly what I need. But I’m not seeing how you did it. No interactions or custom code?


#10

Yes, there is a little bit of custom code.

If you want to clone the project:


#11

@philippe @samliew https://preview.webflow.com/preview/chamos-home?preview=3b0a9fa53da221ec6f8d5cf29c46dbad

I’m starting to sound like my customer service guests I hate haha. But I can’t figure out how to make it transfer over and apply to my project from the clone. (Working on it on Form Test page). I’ve sort of got it but I can’t get the Next button to function correctly with it. That alone took me forever but it’s getting them both to work that’s the issue. haalp. :see_no_evil::see_no_evil::see_no_evil: