Multi step form

Design help General
1

Hi,

I need to create multi step form like this

716×817 33.1 KB

on my site here http://agents-for-owners-2.webflow.io/ . can you please help me If there is already created functionality for multi step form.

Thanks
Simran

1 Like
2

Hi Is there anyone who can help me for my above multi step form issue.

3

Hi @simran21

You can build this in Webflow with one of two ways.

The first way you could set this up is with Tabs. However to click through to the different Steps in the form you’d probably need some custom javascript to trigger moving from one tab to another. If you have any experience with jQuery an example of the trigger element is here: Edit fiddle - JSFiddle - Code Playground. So you’d have your buttons at the bottom of each section (Start, Back, Next etc) and by using trigger() you an simulate clicking on Tab links to move between sections.

Another method would be to use interactions to mimic Tabs. Fixing a Divs Parent Width and moving a Divs position left and right inside its parent div will create the experience of moving along sections in a form.

Hope this helps! If you need more guidance just let me know, I can create a quick example for you but it does require some jQuery / Javascript knowledge. All the best!

3 Likes
4

Hi @tim Thanks for your reply, can you make a example for me. It will be helpful, as I want to complete that ASAP.

Thanks
Simran

1 Like
5

Hi @tim,

As you said I can use tabs interactions for multi step form, with that how can I validate form, as with tabs user can go to step 2 without filling step 1. But I want it should be validate as user have to fill step 1 to before go to step 2 similar like this. http://stage.agents4owners.com/#registration.

Thanks
Simran

6

Hi @tim

I am waiting for your reply.

Thanks
Simran

7

This would be amazing if you could share more on this tim :slight_smile:

8

Hey @simran21 & @daniel_cleayweb sorry for delay just returned from a short much needed break :slight_smile:

Here’s a quick example of one of the methods i was explaingin above:
http://step-form.webflow.io/

You can preview project here:
https://preview.webflow.com/preview/step-form?preview=91bf4e9553ba79326423c1a3a045e012

It uses custom jQuery that you can copy and paste into the Custom Code → Footer Code section:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {

   $('.meta-link.step1').on('click', function () {
       $('[data-w-tab="Step 1"]').trigger('click');
   });
   
   $('.meta-link.step2').on('click', function () {
       $('[data-w-tab="Step 2"]').trigger('click');
   });
   
   $('.meta-link.step3').on('click', function () {
       $('[data-w-tab="Step 3"]').trigger('click');
   });

});
</script>

We have 3 links and we are triggering a Tab function by using jQuery’s “.trigger(‘click’)” method. data-w-tab is the name of the Tab you set in the Webflow Designer.

This is intended as a starting block from which to build from. I’m sure some other jQuery geniuses in the forum can correct / extend this further :slight_smile:

1 Like
9

Hi @tim,

ok I see you made it with tabs, but with tabs we can go to next step without filling current step fields, so can we have a function that user can’t go to next step without filling current step fields.

also here is my read only link https://preview.webflow.com/preview/agents-for-owners-2?preview=24eb3fae1ec9d8a39e992e24b9782f87 . you can see I did same as you showed in above your message. but my next step button is not working an you please check that for me where I am wrong.

Here is my live site link http://agents-for-owners-2.webflow.io/registration

Thanks
Simran

10

Hey @simran21

Your next step button is working on the live site. (Javascript code is only loaded on published sites). You could certainly build upon the script and intergrate a jQuery validation plugin to make sure each field is filled in correctly. This would require some advanced custom code. If you don’t feel comfortable doing this yourself you could always post a message in the Freelance Category for a jQuery / Javascript specialist to help you.

11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.