Multiform help, need help in creating a multi step form

Design help General
1

Hi,

Trying to create a multi step form instead of having a long form to break it up into 3 sections.

I created a 3 div’s within the form with next and previous buttons just not sure how to make it functional.

Any help would be appreciated!

Thanks in advance,
Max

2

Hi @Maxs Check this out, this is maybe what you’re looking for http://livehelper.webflow.com/#multistepsform

You can access its public link to see all elements properties here Webflow - livehelper

No code required. Only Webflow. Let us know your result.

Cheers

3

Thanks, awesome!
Will give it a go now, will update if I have any questions.

4

Hey,

Thanks again for the help… works awesome.

Just another question, how can i get it to verify that required fields are field out before it goes to the next section?

Thanks again!

5

@Maxs For short I’d say you will need jscript/jquery. Because in example I made I use interaction for Next and Previous links, you probably will combine your script function with that interactions which I can imagine the result will be… not good. The better option is probably use only scripts. However, Submit button will catch all blanks required fields already but if you feel need more than that I’ll try to make it tomorrow. It is already passed my bed time :smile:

Cheers

6

Hi @Maxs Here is the sample script I promise to make. For this sample work perfectly, I don’t use interaction for nextstep1 link that move form2, but do it use script instead. So, this sample script will only check email field in first form (form#1) and if that email field is not empty it will show form#2, if it is empty it will pop up alert box.

<script>
$(function () {
    var $form2 = $('.form-step2');
    tram('.form-step2').add('transform 1000ms ease');
    
    function tram4nextstep2() {
        //move form #2 to x position
        tram($form2).start({ x: '0%' });
    }
    
    //triggered when user click nextstep1 link, 
    //checking if email-4 inputtext is required and empty
    $('.nextstep1').click(function() {
        if ( $('#email-4').is(':required') && $('#email-4').val().length == 0 ) {
            alert('required field detected and empty!');
            return false;
        }
        else {
            tram4nextstep2();
            return false;
        }
    });
});
</script>

Cheers

1 Like
7

Thanks, awesome.

Will play around and get it to work for my application.

Thanks again for the great help.