Forms. How to make a form as a step master

Example of a master with step-by-step form filling

To do this, we use a special snippet (as-form-master) in the custom layout of the form.

<div class="as-form-master hide">
    <div class="as-form-masterProgress"></div>
    <div class="as-form-step" data-step="1" data-title="Step 1" data-icon="fa-user">
        <h1>Text 1</h1>

        <a href="#" class="as-form-stepPrev btn btn-outline-primary"><i class="fa fa-chevron-left">
		</i></a>
        <a href="#" class="as-form-stepNext btn btn-outline-primary"><i class="fa fa-chevron-right">
		</i></a>
    </div>
    <div class="as-form-step" data-step="2" data-title="Step 2" data-icon="fa-edit">
        <h1>Text 2</h1>

        <a href="#" class="as-form-stepPrev btn btn-outline-primary"><i class="fa fa-chevron-left">
		</i></a>
        <a href="#" class="as-form-stepNext btn btn-outline-primary"><i class="fa fa-chevron-right">
		</i></a>
    </div>
    <div class="as-form-step" data-step="3" data-title="Step 3" data-icon="fa-file">
        <h1>Text 3</h1>
        <a href="#" class="as-form-stepPrev btn btn-outline-primary"><i class="fa fa-chevron-left">
		</i></a>
        <a href="#" class="as-form-stepNext btn btn-outline-primary"><i class="fa fa-chevron-right">
		</i></a>
    </div>
</div>

To check the steps we use a special callback on the page:

$(function(){
    as.form.callbacks['newConcept_checkStep1'] = function(){
        var res = $('.as-form-item[data-code=customers] textarea').val()!=="";
            if(!res) as.sys.bootstrapAlert("Enter a description of the target audience",
    {type: 'warning', delay: 6000});
    return res;
}
});

Callback name - {formCode}_checkStep{stepNum}

If it returns true, it skips to the next step. If false, it does not allow you to go to another step of the master.

Note:

  1. You can remove the Back button at step 1 and replace the Forward button with the {form-button} and {button-result button at the last step}.
Falcon Space is a functional web development platform on a narrow stack MS SQL/Bootstrap. Falcon Space Gettting started
{sp-shortDemostandLinks}

Falcon Space Platform

This is a reduction in the cost of ownership

at the expense of fewer people to support

This is a quick change

while using the program

This is a modern interface

full adaptation for mobile devices

Note