Yii2, working with forms, how to write a more complex form?

Question

Yii

Still digging yii2, now I want to create a contact forum. There are plenty of examples everywhere:

<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'name') ?>
<?= $form->field($model, 'email') ?>
<?= $form->field($model, 'subject') ?>
<?= $form->field($model, 'body')->textArea(['rows' => 6]) ?>
<?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
'captchaAction' => '/site/default/captcha',
'options' => ['class' => 'form-control'],
'template' => '<div class="row"><div class="col-lg-3">{image}</div><div class="col-lg-9">{input}</div></div>',
]) ?>
<?= Html::submitButton(Yii::t('app', 'Отправить'), ['class' => 'btn btn-primary']) ?>
<?php ActiveForm::end(); ?>

Everything works, everything is fine. However, when it is required to adjust this matter to the layout. For example, based on my layout, my form should look like this:

<form action="/" method="get" id="contact_form">
                                    <div class="clearfix">
                                        <div class="form-col form-marg small fl-left">
                                            <label>Name<span>*</span></label>
                                            <div class="field"><input class="form-item req" id="contact_name" name="contact_name" type="text"></div>
                                        </div>
                                        <div class="form-col small fl-left">
                                            <label>Email<span>*</span></label>
                                            <div class="field"><input class="form-item req" name="email" id="email" type="email"></div>
                                        </div>
                                    </div>
            <div class="form-col">
                                        <label>Message<span>*</span></label>
                                        <textarea id="comment" name="comment" class="form-item req"></textarea>
                                    </div>
                                    <div class="form-btn">
                                        <div class="field"><input class="btn" name="submit" id="submit" value="send message" type="submit"></div>
                                    </div>
                                </form>

That is, if we consider one field, it should be done like this:

<div class="form-col small fl-left">
     <label>Email<span>*</span></label>
      <div class="field"><input class="form-item req" name="email" id="email" type="email"></div>
   </div>

This case:
<?= $form->field($model, 'email') ?>
Generates:

<div class="form-col form-marg small fl-left">
<div class="form-group field-contactform-email required">
<label class="control-label" for="contactform-email">E-mail адрес</label>
<input type="text" id="contactform-email" class="form-control" name="ContactForm[email]">
<div class="help-block"></div>
</div>                                       
 </div>

That is, the problem is that I need to wrap the input in my div, add my classes to the label, that is, I can somehow
<?= $form->field($model, 'email') ?>
break it down like this:

<div class="form-col small fl-left">
     мой  label с моими классами 
      <div class="field">мое текстовое поле с моими классами</div>
      <div class="error">Блок ошибок к текстовому полю</div>
   </div>

Answer 1

Oh.
Well, in general, look towards the fieldConfig parameter (passed when creating the form widget, here <?php $form = ActiveForm::begin(); ?>), well, there are all sorts of options, cssOptions, template, etc.
Example:

$form = ActiveForm::begin([
    'id' => 'login-form',
    'options' => ['class' => 'form-horizontal'],
    'fieldConfig' => [
        'template' => '{label}<div class="col-sm-10">{input}</div><div class="col-sm-10">{error}</div>',
        'labelOptions' => ['class' => 'col-sm-2 control-label'],
    ],
]);

In order to understand what goes where, open the vendor/yiisoft/yii2/widgets/ActiveForm.php file, it's all there (and well documented).

Answer 2

I also found this example in the docs:

<?= Html::activeLabel($model, 'password') ?>
<?= Html::activePasswordInput($model, 'password') ?>
<?= Html::error($model, 'password') ?>

or

<?= Html::activeLabel($model, 'username', ['label' => 'name']) ?>
<?= Html::activeTextInput($model, 'username') ?>
<div class="hint-block">Please enter your name</div>
<?= Html::error($model, 'username') ?>

I generated my form:

<?php $form = ActiveForm::begin(['id' => 'contact_form']); ?>

                <div class="clearfix">
                                 
                    <div class="form-col form-marg small fl-left">
                        <?= Html::activeLabel($model, 'name') ?>
                        <div class="field"><?= Html::activeTextInput($model, 'name', ['class'=>'form-item req']) ?></div>
                        <?= Html::error($model, 'name') ?>
                    <div class="hint-block"></div>
                    </div>     
                                                               
                                                        
                    <div class="form-col form-marg small fl-left">
                        <?= Html::activeLabel($model, 'email') ?>
                        <div class="field"><?= Html::activeTextInput($model, 'email', ['class'=>'form-item req']) ?><div class="hint-block"></div></div>
                        <?= Html::error($model, 'email') ?>
                    <div class="hint-block"></div>
                    </div> 
                    
                 </div>                               
                            
                <div class="form-col">
                    <?= Html::activeLabel($model, 'body') ?>
                    <?= Html::activeTextarea($model, 'body', ['class'=>'form-item req']) ?>
                    <?= Html::error($model, 'body') ?>
                    <div class="hint-block"></div>
                </div> 
                      
                    
                <div class="clearfix">
                    <div class="form-col form-marg small fl-left">
                        <?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
                        'captchaAction' => '/site/default/captcha',
                        'options' => ['class' => 'form-item req'],
                        'template' => '<div class="row"><div class="col-lg-3">{image}</div><div class="col-lg-9"><div class="field">{input}</div></div></div>',
                        ]) ?>
                    </div>
                </div>
            
                <div class="form-btn">
                    <div class="field"><?= Html::submitButton(Yii::t('app', 'Отправить'), ['class' => 'btn btn-primary']) ?></div>
                </div>
                    
                <?php ActiveForm::end(); ?>

Everything works, except for this block. That is, yii2 js does not process this block and does not show errors before submitting the form.

Answer 3

By the way, here's another interesting option. I haven't tried it myself yet, but what if?..
https://github.com/yiisoft/yii2/issues/2580
See the last comment from the creator.

Answer 4

Hi all!
Tell me how to implement it? When entering data in one field, this data should be added to two tables.