[TUTORIAL] Multi Step Form with required input validation

Community resources Webflow Tips
1

Hey guys, posting it here after recieving a really nice feedback from the people in the Webflow Designers facebook group.

I decided to share this project after having to build a custom multi step form for a client. I had seen many forms like this before, but none of them worked as I needed so I decided to spice it up with some custom code.

ADDED FUNCTIONALITIES:

  • Automatically detects all the required inputs in each step.
  • Input validation: it won’t let users jump to the next step if all the required fields are not filled, warning to fill them.
  • Auto fit content: As the form uses the Webflow’s slider component, I needed it to fit the height of each step’s content in any device.
  • Input confirm: Last step shows a list dynamically filled with all the inputs that the user provided.

You can check it here, any feedback will be appreciated:
https://webflow.com/website/Multi-Step-Form-with-Input-Validation

11 Likes
2

This is awesome!

Nicely done man, I’m impressed. The particular process for capturing data from the first step of a form, even if they do not complete the other steps, is huge.

Do you know if we can trigger webhooks only if specific steps are completed? Or perhaps the entire form has been completed?

For instance, the difference is:

Step 1 - visitor submits their information, it’s a lead who will receive an automated email (via our CRM, through an integration…and/or we just send an email notification via the default webflow form options.
Step 2 - visitor submits more information, now it’s a higher qualified lead and we want to assign to a sales rep (in a CRM that we’re integrating)

1 Like
3

Hey man, thanks for the appreciation!
About the webhooks you say well, you actually are sending two different forms in Webflow, so you can set each one to trigger anything you want using webhooks.

Let’s say for example you are using Zapier, you can set a different Zap for each form.

4

Makes sense - I’ll be giving it a run through shortly.

If I can add an address field validation, perhaps via Google Places API, it’s going to be really awesome.

We’ll see!

5

I made a tutorial for Google Places Autocomplete if you don’t know how to use it:
https://webflow.com/website/Google-Places-Autocomplete-in-Webflow-Forms

Cheers!

6

You just keep delivering. Thanks for this - I’ll reach out if I need help. You’re certainly someone I’ll consider using for paid services, if that’s something you offer.

1 Like
7

Love to hear that man, you can reach out to me whenever you want :slight_smile:

8

Alex, firstly, thank you for sharing your work with the community.

I am trying to display a multi-step form in a pop-up modal, but I am having trouble with your source code changing the w-slider-mask height to 0px when the modal unhides the form

Expected behavior (without your code)

e4dx2AYFyZ
e4dx2AYFyZ960×490 1.56 MB

And this is what happens after adding your code to the project:

dW6RPpl14b
dW6RPpl14b960×490 1.35 MB

Chrome devtools shows the effect being applied:

ZHpf1L6SBL
ZHpf1L6SBL1920×1027 729 KB

I don’t know enough JS to mess with your source file. Is there anything that can be done about this or any changes I can make on my end?

1 Like
9

Hi there! Can you share a read-only link so I can inspect it myself?

1 Like
10

Hi Alex. Here is the link to the read-only site. N.B. I’ve only tried to implement the pop-up modal/form on the PARTS page, it won’t work at all from any other page at this point.

https://exceptional-forklift.webflow.io/parts

Let me know if you need anything else.

11

In the script configuration, you’ve put your slider ID where it’s supossed to be your form ID:
let msfData = new MSF({
formID: “service-form”,
…

Should be “contact-form”:
image

12

Hi Alex,

Thanks for taking the time to look into this.

I changed the ID to match the script config for the form but the problem still persists.

From trial and error I’ve determined that the bug only happens when the form wrapper is hidden (set to display:none). Conversely, the form works fine if I load the page with the form visible (display:flex). This would be fine if I wasn’t using a pop-up modal to display the form.

I’ve copied an instance of the form to a new page, “form test” with a simple button linked with interactions. Please have a look and let me know if you can figure this out.

13

I think I’ve found the error, and it is related to how the script works.
When the page is loaded, the script calculates the height of the first slide of the form and forces the slider mask to fit that height.
Now, the problem seems to be that, as your form is initially set to display:none, the script assumes that the height of the first slide is 0px and forces it:
image

What I would do in your case is to activate the form script after the modal is displayed, so then the script will be able to calculate the height of the slides:

First add an ID to the button that triggers the form modal.
Then modify the init code a little bit (add the button ID where it says YOUR_BUTTON_ID):

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
  let msfData = new MSF({
    formID: 'service-form',
    nextButtonID: 'next',
    backButtonID: 'back',
    nextButtonText: 'NEXT',
    submitButtonText: 'SEND MESSAGE',
    warningClass: 'warning',
    alertText: 'Please complete all visible fields',
  });

  const modalTrigger = document.getElementById('YOUR_BUTTON_ID');

  modalTrigger.addEventListener('click', () => {
    msfController.init(msfData);
  }, { once: true });
});
</script>

This should work, but if not (I cannot test it right now), then I’m guessing we will have to add a timeout in the event listener to wait until the modal is completely shown.

14

Hi Alex. Looks like you solved it! :grinning: I did have to add a timeout for it to work…

const modalTrigger = document.getElementById(‘YOUR_BUTTON_ID’);
modalTrigger.addEventListener(‘click’, () => {
setTimeout(function(){
msfController.init(msfData);
},10);
}, { once: true });

Thank you for everything!

15

Glad to help man, hit me up if you need anything else.

2 Likes
16

Wow, thank you! This was really helpful!

1 Like
17

I cant seem to get the form to work, I am dazzled with the linking. Would you mind explaining to me wat I have to do once I added the custom code? Kind regards

18

Ok after some playing around I got the form to work. Thank you so much for posting this! If I go on my live site and a user gets to the second part of the form and does not fill it in. Just clicks it away. Tries to head back in to the form the form disappears. Any idea why?

19

Hi, is there a way to do this without hiding the submit button at the end? Or changing the next button (adding attributes based on selection)?

20

This will be possible in the next release that I’m planning, hope will be out soon