Multi-page pop up form

General
,
1

Hello,

I’m struggling to do the following and wondered if anyone would be kind enough as to give me some advice.

I’m trying to make a multi-page form with questions on each page (of around 5 pages). The ideal implementation would be the user clicks a signup button, the pop-up appears with the first page of the form and they click buttons marked ‘next’ to work their way through the form, before submitting after the 5th page.

I’m struggling to figure this out and any help would be very much appreciated.

Thanks

2

Hi,

We will create native plugin in Divhunt for this in future, but for now only solution is to create it with JS/jQuery, I am not sure how familiar are you with Javascript, but I will give you some code and idea on how you can make it work.

Here’s a video explanation on you can make it work with use of JS.

Here’s the JS code from the video.

$(document).on('click','#next-step',function(){
    let totalSteps = $(".form-step").length - 1;
    let current = $(".form-step:visible").index();
    if ( checkStep() ) {
        $(".form-step").eq(current).hide();
        $(".form-step").eq(current+1).show();

        if (totalSteps == current+1) {
            $("#next-step").hide();
            $("#submit").show();
        }
        $("#prev-step").show();
    }

});

$(document).on('click','#prev-step',function(){
    let current = $(".form-step:visible").index();
    $(".form-step").eq(current).hide();
    $(".form-step").eq(current-1).show();
    $("#next-step").show();
    $("#submit").hide();
    if (current-1 === 0) {
        $("#prev-step").hide();
    }
});

function checkStep() {

    let isValid = true;

    // check all input elements
    $(".form-step:visible").find('input').each(function() {
        if ($.trim($(this).val()) === '') {
            $(this).addClass('error');
            isValid = false;
        } else {
            $(this).removeClass('error');
        }
    });

    // check all textarea elements
    $(".form-step:visible").find('textarea').each(function() {
        if ($.trim($(this).val()) === '') {
            $(this).addClass('error');
            isValid = false;
        } else {
            $(this).removeClass('error');
        }
    });

    // check all select elements
    $(".form-step:visible").find('select').each(function() {
        if ($.trim($(this).val()) === '') {
            $(this).addClass('error');
            isValid = false;
        } else {
            $(this).removeClass('error');
        }
    });

    return isValid;

}
1 Like
3

ok thanks for your help!