284 lines
10 KiB
PHP
Executable File
284 lines
10 KiB
PHP
Executable File
<?php
|
|
|
|
/* @var $this yii\web\View */
|
|
/* @var $form yii\bootstrap\ActiveForm */
|
|
/* @var $model \frontend\models\ContactForm */
|
|
|
|
use yii\helpers\Html;
|
|
use yii\bootstrap4\ActiveForm;
|
|
use yii\captcha\Captcha;
|
|
|
|
$this->title = 'ติดต่อเรา - ' . Yii::$app->params['org_name_th'];
|
|
$this->params['breadcrumbs'][] = 'ติดต่อเรา';
|
|
?>
|
|
|
|
<style>
|
|
.contact-container {
|
|
margin-top: -40px;
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
|
|
.contact-card {
|
|
background: #fff;
|
|
border-radius: 30px;
|
|
box-shadow: 0 15px 50px rgba(44, 24, 16, 0.05);
|
|
border: 1px solid #FFDBBB;
|
|
overflow: hidden;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.contact-card-body {
|
|
padding: 40px;
|
|
}
|
|
|
|
.contact-info-header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
border-bottom: 2px solid #fdfaf5;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.contact-info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 30px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.info-item {
|
|
text-align: center;
|
|
padding: 20px;
|
|
border-radius: 20px;
|
|
background: #fdfaf5;
|
|
border: 1px solid transparent;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.info-item:hover {
|
|
border-color: #FFC068;
|
|
background: #fff;
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 20px rgba(255, 192, 104, 0.1);
|
|
}
|
|
|
|
.info-item i {
|
|
font-size: 24px;
|
|
color: #8e1d1d;
|
|
margin-bottom: 15px;
|
|
display: block;
|
|
}
|
|
|
|
.info-item h6 {
|
|
font-weight: 800;
|
|
color: #2c1810;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.info-item p {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin: 0;
|
|
}
|
|
|
|
.section-title-sm {
|
|
font-weight: 800;
|
|
color: #2c1810;
|
|
margin-bottom: 25px;
|
|
padding-left: 15px;
|
|
border-left: 4px solid #FFC068;
|
|
}
|
|
|
|
.map-iframe {
|
|
width: 100%;
|
|
height: 450px;
|
|
border-radius: 20px;
|
|
border: 1px solid #eee;
|
|
}
|
|
|
|
.qr-social-wrap {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
padding: 30px;
|
|
background: #fdfaf5;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.qr-item {
|
|
text-align: center;
|
|
width: 180px;
|
|
}
|
|
|
|
.qr-item img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 15px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
|
margin-bottom: 15px;
|
|
border: 2px solid #fff;
|
|
}
|
|
|
|
.btn-contact-submit {
|
|
background: linear-gradient(135deg, #8e1d1d 0%, #c62828 100%);
|
|
color: #fff;
|
|
border: none;
|
|
padding: 12px 35px;
|
|
border-radius: 50px;
|
|
font-weight: 700;
|
|
box-shadow: 0 5px 15px rgba(142, 29, 29, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-contact-submit:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 25px rgba(142, 29, 29, 0.4);
|
|
color: #fff;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.contact-card-body { padding: 25px; }
|
|
}
|
|
</style>
|
|
|
|
<div class="contact-container">
|
|
|
|
<!-- Top Contact Info -->
|
|
<div class="contact-card wow fadeIn">
|
|
<div class="contact-card-body">
|
|
<div class="contact-info-header">
|
|
<?= Html::img(Yii::getAlias('@web') . '/img/header/logo.png', ['width' => 250, 'class' => 'mb-4']) ?>
|
|
<h4 class="font-weight-bold text-dark"><?= Yii::$app->params['org_name_th'] ?></h4>
|
|
<p class="text-muted"><?= Yii::$app->params['org_name_en'] ?></p>
|
|
</div>
|
|
|
|
<div class="contact-info-grid">
|
|
<div class="info-item">
|
|
<i class="fa fa-map-marker-alt"></i>
|
|
<h6>ที่อยู่หน่วยงาน</h6>
|
|
<p><?= Yii::$app->params['org_place1'] ?> <?= Yii::$app->params['org_place2'] ?> <?= Yii::$app->params['org_place3'] ?></p>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fa fa-phone"></i>
|
|
<h6>เบอร์โทรศัพท์</h6>
|
|
<p><?= Yii::$app->params['org_phone'] ?></p>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fa fa-envelope"></i>
|
|
<h6>อีเมลติดต่อ</h6>
|
|
<p><?= Yii::$app->params['org_mail'] ?></p>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fa fa-clock"></i>
|
|
<h6>เวลาทำการ</h6>
|
|
<p>จันทร์ - ศุกร์ : 08.30 - 16.30 น.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h5 class="section-title-sm">เบอร์ติดต่อสำคัญ</h5>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th>ตำแหน่ง</th>
|
|
<th>เบอร์โทรศัพท์</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="font-weight-bold">นายกองค์การบริหารส่วนตำบลโคกจาน</td>
|
|
<td><?= Yii::$app->params['org_phone'] ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-weight-bold">ปลัดองค์การบริหารส่วนตำบลโคกจาน</td>
|
|
<td><?= Yii::$app->params['org_phone'] ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-weight-bold">สำนักปลัด</td>
|
|
<td><?= Yii::$app->params['org_phone'] ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-weight-bold">กองคลัง</td>
|
|
<td><?= Yii::$app->params['org_phone'] ?></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Contact Form -->
|
|
<div class="col-lg-6">
|
|
<div class="contact-card wow fadeInLeft">
|
|
<div class="contact-card-body">
|
|
<h5 class="section-title-sm">ส่งข้อความติดต่อเรา</h5>
|
|
<?php $form = ActiveForm::begin(['id' => 'contact-form']); ?>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<?= $form->field($model, 'name')->textInput(['placeholder' => 'ชื่อ-นามสกุลของคุณ'])->label('ชื่อ-นามสกุล') ?>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<?= $form->field($model, 'email')->textInput(['placeholder' => 'อีเมลของคุณ'])->label('อีเมล') ?>
|
|
</div>
|
|
</div>
|
|
|
|
<?= $form->field($model, 'subject')->textInput(['placeholder' => 'เรื่องที่ต้องการติดต่อ'])->label('หัวข้อ') ?>
|
|
|
|
<?= $form->field($model, 'body')->textarea(['rows' => 5, 'placeholder' => 'ข้อความของคุณ...'])->label('รายละเอียด') ?>
|
|
|
|
<?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
|
|
'template' => '<div class="row align-items-center"><div class="col-4">{image}</div><div class="col-8">{input}</div></div>',
|
|
'options' => ['class' => 'form-control', 'placeholder' => 'รหัสยืนยันตัวตน']
|
|
])->label('รหัสความปลอดภัย') ?>
|
|
|
|
<div class="form-group mt-4">
|
|
<?= Html::submitButton('<i class="fa fa-paper-plane mr-2"></i> ส่งข้อความ', ['class' => 'btn btn-contact-submit', 'name' => 'contact-button']) ?>
|
|
</div>
|
|
|
|
<?php ActiveForm::end(); ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Google Map -->
|
|
<div class="col-lg-6">
|
|
<div class="contact-card wow fadeInRight">
|
|
<div class="contact-card-body">
|
|
<h5 class="section-title-sm">แผนที่ตั้งหน่วยงาน</h5>
|
|
<iframe class="map-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3843.9090403290083!2d105.06015968203289!3d15.54300614654831!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3115df32470ffe13%3A0xb7f08a63d4af6495!2z4Lit4LiH4LiE4LmM4LiB4Liy4Lij4Lia4Lij4Li04Lir4Liy4Lij4Liq4LmI4Lin4LiZ4LiV4Liz4Lia4Lil4LmC4LiE4LiB4LiI4Liy4LiZ!5e0!3m2!1sth!2sth!4v1771992846564!5m2!1sth!2sth" allowfullscreen="" loading="lazy"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Codes -->
|
|
<div class="contact-card wow fadeInUp">
|
|
<div class="contact-card-body">
|
|
<h5 class="section-title-sm">ช่องทางโซเชียลมีเดีย</h5>
|
|
<div class="qr-social-wrap">
|
|
<div class="qr-item">
|
|
<?= Html::img(Yii::getAlias('@web') . '/img/service-ico/newsqr.png') ?>
|
|
<p class="font-weight-bold mb-0">LINE ข่าวสาร</p>
|
|
</div>
|
|
<div class="qr-item">
|
|
<?= Html::img(Yii::getAlias('@web') . '/img/service-ico/rongqr.png') ?>
|
|
<p class="font-weight-bold mb-0">แจ้งปัญหา/ร้องเรียน</p>
|
|
</div>
|
|
<div class="qr-item">
|
|
<?= Html::img(Yii::getAlias('@web') . '/img/service-ico/FB.png') ?>
|
|
<p class="font-weight-bold mb-0">Facebook Page</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|