Yii2, форма обратной связи во сплывающем (модальном) окне

Пример будет реализован на Yii2 basic, для внедрения его на Yii2 advanced необходимо сменить локацию файлов соответствующую шаблону advanced и namespace (особых трудностей это вызвать не должно).

Устанавливаем Yii2 basic, Как установить Yii 2 basic, краткая инструкция.

Форма обратной связи во всплывающем окне будет работать на каждой странице сайта, поэтому реализуем виджет который будет инициализировать модель ContactForm, отправлять сообщение в случае правильного заполнения формы и сообщать об отправке пользователю (посетителю сайта).

Создаем класс виджет app/components/FBFWidget.php со следующим содержимым:

<?php
 
namespace app\components;
 
use Yii;
use yii\base\Widget;
use app\models\ContactForm;
 
class FBFWidget extends Widget
{
 
    public function run()
    {
        $model = new ContactForm();
        if ($model->load(Yii::$app->request->post()) && $model->contact(Yii::$app->params['adminEmail'])) {
            Yii::$app->session->setFlash('contactFormSubmitted');
        }
        return $this->render('fbfWidget', [
            'model' => $model,
        ]);
    }
 
}

Содержимое класса виджета FBFWidget - простой виджет с кодом инициализации, проверки и отправки формы обратной связи, код практически идентичен содержанию метода (экшена) actionContact класса (контроллера) SiteController (app/controllers/SiteController.php).

Далее создадим представление (view) для виджета app/components/views/fbfWidget.php:

<?php
 
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use yii\captcha\Captcha;
 
?>
 
<?php if (Yii::$app->session->hasFlash('contactFormSubmitted')) { ?>
 
    <?php
    $this->registerJs(
        "$('#myModalSendOk').modal('show');",
        yii\web\View::POS_READY
    );
    ?>
 
    <!-- Modal -->
    <div class="modal fade" id="myModalSendOk" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel">Feedback form</h4>
                </div>
                <div class="modal-body">
                    <p>Thank you for contacting us. We will respond to you as soon as possible.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
 
<?php } ?>
 
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
 
            <?php $form = ActiveForm::begin(['id' => 'contact-form']); ?>
 
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Feedback form</h4>
            </div>
            <div class="modal-body">
 
                    <?= $form->field($model, 'name')->textInput(['autofocus' => true]) ?>
 
                    <?= $form->field($model, 'email') ?>
 
                    <?= $form->field($model, 'subject') ?>
 
                    <?= $form->field($model, 'body')->textarea(['rows' => 6]) ?>
 
                    <?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
                        'template' => '<div class="row"><div class="col-lg-3">{image}</div><div class="col-lg-6">{input}</div></div>',
                        ]) ?>
 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <?= Html::submitButton('Submit', ['class' => 'btn btn-primary', 'name' => 'contact-button']) ?>
            </div>
 
            <?php ActiveForm::end(); ?>
 
        </div>
    </div>
</div>

Представление содержит два простых модальных окна bootstrap. Первое содержит сообщение об успешной отправки и автоматически выводится при отправке, второе содержит саму форму обратной связи (код формы идентичен форме из представления contact (app/views/site/contacts.php)).

Далее в основном макете (app/views/layouts/main.php) добавляем инициализацию виджета и ссылку (или кнопку) для вызова всплывающего (модального) окна с формой обратной связи.

Добавляем в use виджет с формой обратной связи:

use app\components\FBFWidget;

Добавляем (меняем) ссылку для вывода всплывающего окна с формой обратной связи в меню (Nav::widget):

['label' => 'Contact', 'url' => '#', 'options' => ['data-toggle' => 'modal', 'data-target' => '#myModal']],

Вызываем виджет со всплывающим (модальным) окном, которое содержит форму обратной связи:

<?= FBFWidget::widget([]) ?>

В итоге файл app/views/layouts/main.php будет выглядеть следующим образом (изменения в строках: 7, 38, 71):

<?php
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;
use app\components\FBFWidget;
 
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
 
<div class="wrap">
    <?php
    NavBar::begin([
        'brandLabel' => 'My Company',
        'brandUrl' => Yii::$app->homeUrl,
        'options' => [
            'class' => 'navbar-inverse navbar-fixed-top',
        ],
    ]);
    echo 
                            

                                 Источник:
                                Перейти