Multi-Step Forms - Required Fields

Status: In Beta

Status history

Any updates on this? We have the most awesome comlex, multi page, skipping steps, hiding/showing fields etc based on content. That becomes totally useless as someone can just click next and see all the steps and half of them don’t make sense if you haven’t selected something on a previous page. This has got to be fundamental functionality!

Hey folks,

I’m Ian, the Product Manager for Forms. Thanks for sharing all of your feedback, we hear you. Making it so that clicking next is blocked until required fields are completed and valid data provider is now in development.

Ian

@IMcDonald , happy to beta test if need be!

Happy to be a beta tester too! Sign me up.

@IMcDonald, thank you for the update! Any schedule on this, so we can plan accordingly? Will it take days, weeks or month - any indication? :slightly_smiling_face: Thanks in advance!

Hi @IMcDonald, can a user sign up to be part of the beta testing? :slightly_smiling_face:

Yes, I am also looking for this, the current layout does not offer a great customer experience.

@IMcDonald Hi,
It would be great to be a beta user too! :blush:

Good that this feature/bug fix is in planning as the required field does not make any sense without it :slightly_smiling_face:

@IMcDonald - if there is a beta program, I will sign-up as well.

While we are all waiting for our beta access, what work-arounds (other than using external forms) have you found?

I am considering sprinkling a helping of JS over the form as a last resort. Sadly, using the logic feature doesn’t allow me to hide the next field and the approach of hiding all fields (on a long form) doesn’t look right to me either.

@SwissArmyKnife I took the approach of hiding all fields. But I cleaned it up a little bit by adding an additional step with an error message, after each “mandatory field” step. Then for the logic, I set it so that this step gets skipped if there was a valid input, or else “all subsequent fields” are hidden if there was not a valid input.

For the end user, it means that if they still press “next” after seeing the error message, the rest of the form is just a long series of blank steps. Not the smoothest, but manageable.

@baribeau thank you for sharing your approach. I am looking for a JavaScript solution and wondered if anyone had tried it before? I can’t believe this issue is still not fixed by Hubspot!

Would love for this update to be completed asap! Can we get any timeframe of how long the implementaiton will be? Would be great to be a beta user too!

Hi everyone,

We just managed to write a temporary solution by adding an event to the “next” button and using event.stopPropagation() to prevent the user from going to the next step. We then check all the required fields to ensure they are filled.

Looking forward to the final solution being implemented!

Hi everyone,

We have managed to write a temporary solution by adding an event to the “next” button and using event.stopPropagation() to prevent the user from going to the next step. We then check all the required fields to ensure they are filled.

Looking forward to the final solution being implemented!

@FilipaPFaria How are you adding the form to your webpage, such that you can bind an event to the “next” button without running into CORS issues, given that Hubspot injects all new forms as as iframes?

Hi @FilipaPFaria may I know how? Was it via JS on iFrame?

Hey, @FFan, thanks for sharing. I also just implemented a JavaScript workaround.

If anyone wants to have a look, please head over to my gist: JavaScript workaround for Hubspot multi-step form validation issue · GitHub

@FilipaPFaria Can you please explain this approach in more detail? I would like to replicate and implement your tactic on my forms while we wait for the official HS solution to be released. Sounds like I am not the only one.. :folded_hands:
@IMcDonald I, too, would like to be included in any alpha/beta testing of your developing solution to this issue.