3 pages (or color section) form with forms plugin

Support Forms & Blueprints
1

Is there a clean way to create a form with three pages (or color section) through a forms plugin? How to wrap a group of fields in the container with id=“a”, “b”, “c”. For example, I create a form template. How do I display specific fields in these containers? This is not a question of transferring data between pages, we are just showing part of the form code (id=“a”, “b”, “c”.) using CSS and JS. This may not be a page, such as the background color for the form section.

<div id="1">
    <div id="a">
        <div class="row">
            <div class="col-sm-6 mb-4">
            </div>
            <div class="col-sm-6 mb-4">
            </div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div class="row">
            <div class="col-sm-6 mb-4">
            </div>
            <div class="col-sm-6 mb-4">
            </div>
        </div>
    </div>
    <div id="b" style="display: none;">
        <div class="row">
            <div class="col-sm-6 mb-4">
            </div>
            <div class="col-sm-6 mb-4">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 mb-4">
            </div>
            <div class="col-sm-6 mb-4">
            </div>
        </div>
        <div>
        </div>
    </div>
    <div id="c" style="display: none;">
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </div>
</div>
2

The issue was solved with the help of “Columns” and “Column” fields. Found them in the Fields folder of plugin. It is strange that they are not in the documentation for the Frontend Forms. The “id” tag is added by editing the Columns field template.

1 Like
3

For anyone wanting more info, I posted a reply on a similar question, with an example on using columns and column (First part of reply shows this. Second part—SCSS— uses those groupings along with flexbox to style the form).