Group form elements?

I'm not sure if this is what you mean, but the order in which you put the fields is how they get rendered. You could also then use Volt function to create the mark-up and group the items.

Here's an example how i do it:

{% block content %}
<div class="box box-success">
    <div class="box-header width-border">
        <h3 class="box-title">Form</h3>
    </div>

    <div class="box-body">
        <div class="row">
            <div class="col-xs-12">
                {{ form("client/save") }}
                    {% for element in form %}
                        <div class="form-group">
                            {{ element.label(["class": "col-sm-3 control-label"]) }}
                            <div class="col-sm-9">
                                {{ element }}
                            </div>
                        </div>
                    {% endfor %}

                    <div class="form-group">
                        <div class="col-sm-3">

                        </div>
                        <div class="col-sm-9">
                            {{ submit_button("Save", "class": "pull-right btn btn-success") }}
                        </div>
                    </div>
                {{ endForm() }}
            </div>
        </div>
    </div>
</div>
{% endblock %}

Second example where a loop index is used as a counter:

{% block content %}
    {{ form("auth/login") }}
        {{ form.render('csrf', ['value': security.getToken()]) }}

        {% for element in form %}
            <div class="form-group has-feedback">
                {% if loop.index == 1 %}
                    {{ element }}
                    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                {% elseif loop.index == 2 %}
                    {{ element }}
                    <span style="pointer-events: visible !important;" class="glyphicon glyphicon-eye-open form-control-feedback"></span>
                {% endif %}
            </div>
        {% endfor %}
        <div class="row">
            <div class="col-xs-8">
              {#<div class="checkbox icheck">
                <label>
                  <input type="checkbox" name="remember" > Remember
                </label>
              </div>#}
            </div><!-- /.col -->
            <div class="col-xs-4">
              {{ submit_button("Login", "class": "btn btn-primary btn-block btn-flat") }}
            </div><!-- /.col -->
        </div>
    {{ endForm() }}

    <a href="#">I forgot my password</a><br>
{% endblock %}

Well, I was looking for a way to organize form elements inside the form object.

In other words, I need to store in each form element additional information which would not affect html. But I can use this information to make decisions how or where to render it.