Multi-page pop up form

General
,
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