The example will be implemented on Yii2 basic, to implement it on Yii2 advanced , you need to change the file location corresponding to the advanced template and namespace.
Install Yii2 basic, Short instruction. How to install Yii 2 basic.
The feedback form in the pop-up window will work on every page of the site, so we create a widget that will initialize the ContactForm model, send a message if the form is correctly filled in and show notify to the user (visitor to the site).
Create a class of widget app/components/FBFWidget.php with the following content:
<?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,
]);
}
}
The contents of the widget class FBFWidget is a simple widget with code for initializing, checking and sending the feedback form, the code is almost identical to the content of the actionContact class (controller) SiteController (app/controllers/SiteController.php).
Next, create a view for the widget 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>
The view contains two simple modal bootstrap windows. The first contains a message about the successful sending and is automatically displayed when sent, the second contains the feedback form itself (the form code is identical to the form from the contact view (app/views/site/contacts.php)).
Next, in the main layout (app/views/layouts/main.php), add the initialization of the widget and the link (or button) to call the popup (modal) window with the feedback form.
Add a widget with a feedback form to the use:
use app\components\FBFWidget;
Add (change) a link for displaying a pop-up (modal) window with a feedback form in the menu (Nav::widget):
['label' => 'Contact', 'url' => '#', 'options' => ['data-toggle' => 'modal', 'data-target' => '#myModal']],
Calling the widget with a pop-up (modal) window that contains a feedback form:
<?= FBFWidget::widget([]) ?>
As a result, the file app/views/layouts/main.php will look like this (changes in the lines: 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 Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => 'Home', 'url' => ['/site/index']],
['label' => 'About', 'url' => ['/site/about']],
['label' => 'Contact', 'url' => '#', 'options' => ['data-toggle' => 'modal', 'data-target' => '#myModal']],
Yii::$app->user->isGuest ? (
['label' => 'Login', 'url' => ['/site/login']]
) : (
'<li>'
. Html::beginForm(['/site/logout'], 'post')
. Html::submitButton(
'Logout (' . Yii::$app->user->identity->username . ')',
['class' => 'btn btn-link logout']
)
. Html::endForm()
. '</li>'
)
],
]);
NavBar::end();
?>
<div class="container">
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= $content ?>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="pull-left">© My Company <?= date('Y') ?></p>
<p class="pull-right"><?= Yii::powered() ?></p>
</div>
</footer>
<?= FBFWidget::widget([]) ?>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
Result:
The feedback form in the popup window for Yii2 is ready, an example with the source code can be downloaded from github: https://github.com/devreadwrite/yii2-fbf-in-modal.