How to create new popup contact form in yii2?

Question

I'm new to Yii2 and I'm creating advertisement project. I need to insert a button in my DetailView, which should open a new popup contact form with project uploader. How should I do that? Maybe is there any widgets to solve it?

Answer 1

You can use Bootstrap modal.

1. First create simple button like this:

   Open Modal

2. Then you should create modal.

       <!-- Modal content-->
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
   
           </div>
           <div class="modal-body">
               <div class="blog-form">
   
                   <?php $form = ActiveForm::begin(
                       [
                           'id' => 'my-form-id',
                           'action' => Url::to(['site/contact']),
                           'enableAjaxValidation' => true,
                           'validationUrl' => Url::to(['site/contact-validate']),
                       ]
                   ); ?>
   
                   <h2 id="conatcth"><strong><?= Yii::t('app', 'contact_us') ?></strong></h2>
   
                   <h5 id="h5"><?= Yii::t('app', 'contact_us_description') ?></h5>
   
                   <?= $form->field($modelContact, 'name')->textInput(['placeholder' => Yii::t('app', 'Name')])->label(false) ?>
   
                   <?= $form->field($modelContact, 'email')->textInput(['placeholder' => Yii::t('app', 'Email')])->label(false) ?>
                   <?= $form->field($modelContact, 'phone_number')->textInput(['placeholder' => Yii::t('app', 'Phone number')])->label(false) ?>
                   <?= $form->field($modelContact, 'body')->textarea(['placeholder' => Yii::t('app', 'Body')])->label(false) ?>
                   <?= $form->field($modelContact, 'not_robot')->checkbox(['checked' => false]) ?>
   
   
                   <div class="form">
                       <input type="submit" class="btn btn-primary" value="<?= Yii::t('app', 'send') ?>">
                   </div>
   
   
                   <?php ActiveForm::end(); ?>
   
               </div>
           </div>
           <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           </div>
       </div>
   
   </div>
   

3. Then you should create validation action for your ContactForm.

   public function actionContactValidate() { $model = new ContactForm(); $request = \Yii::$app->getRequest(); if ($request->isPost && $model->load($request->post())) { \Yii::$app->response->format = Response::FORMAT_JSON; return ActiveForm::validate($model); } return; }

4. Then you should create action for sending or saving:

   public function actionContact()
        {
            $model = new ContactForm();
            $request = \Yii::$app->getRequest();
            if ($request->isPost && $model->load($request->post())) {
                \Yii::$app->response->format = Response::FORMAT_JSON;
                 $model->contact(Yii::$app->params['adminEmail']); //Send
                 return $this->redirect(Yii::$app->request->referrer);
             }
               return $this->redirect(Yii::$app->request->referrer);
        }
   

   5. In you action view do not forget to initialize ContactForm like:

   public function actionIndex() { //some code
   return $this->render('index', ['models' => $models, 'modelContact' => new ContactForm]); }