Mini Shell
<!doctype html>
<html lang="th">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ติดต่อโรงเรียน | โรงเรียนเทศบาลวัดชัยชุมพล</title>
<!-- Bootstrap 3 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- (แนะนำ) ใส่ Font Prompt ผ่าน Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
body{ font-family:'Prompt',sans-serif; background:#f6f7fb; color:#333; }
/* Hero */
.hero{
position:relative;
padding:32px 0 40px;
color:#fff;
overflow:hidden;
background:
radial-gradient(900px 360px at 20% 20%, rgba(255,255,255,.18), transparent 60%),
linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}
.hero:before{
content:"";
position:absolute; inset:0;
background-image:
linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
background-size: 28px 28px;
opacity:.18;
pointer-events:none;
}
.hero-title{ margin:0; font-weight:800; letter-spacing:.3px; }
.hero-sub{ margin:6px 0 0; opacity:.9; }
/* Wave */
.wave{
position:absolute; left:0; right:0; bottom:-1px;
height:70px;
}
/* Cards */
.card{
background:#fff;
border-radius:10px;
box-shadow:0 6px 22px rgba(20,20,40,.08);
border:1px solid rgba(0,0,0,.06);
}
.card-pad{ padding:18px; }
/* Info list */
.info-item{
padding:12px 0;
border-bottom:1px solid #eee;
}
.info-item:last-child{ border-bottom:none; }
.info-label{ font-weight:700; margin:0 0 4px; }
.info-value{ margin:0; color:#555; }
/* Badges */
.chip{
display:inline-block;
padding:6px 10px;
border-radius:999px;
background:#f1f5ff;
color:#2b5cff;
font-size:12px;
font-weight:600;
margin-right:6px;
margin-top:6px;
}
/* Form */
.form-control{ border-radius:8px; }
.btn-primary{
border-radius:8px;
font-weight:700;
padding:10px 14px;
}
/* Section spacing */
.content{ padding:22px 0 42px; margin-top:-26px; }
.section-title{ margin:0 0 12px; font-weight:800; }
.muted{ color:#777; }
/* Google map responsive */
.map-wrap{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
border-radius:10px;
border:1px solid rgba(0,0,0,.06);
}
.map-wrap iframe{
position:absolute; top:0; left:0; width:100%; height:100%;
border:0;
}
/* Footer */
.footer{
padding:18px 0;
color:#777;
border-top:1px solid #e9e9ef;
background:#fff;
}
</style>
</head>
<body>
<!-- HERO -->
<section class="hero">
<div class="container">
<div class="row">
<div class="col-sm-8">
<h2 class="hero-title">ติดต่อโรงเรียน</h2>
<p class="hero-sub">โรงเรียนเทศบาลวัดชัยชุมพล (English Program)</p>
<div style="margin-top:10px;">
<span class="chip">ยินดีให้ข้อมูล</span>
<span class="chip">รับฟังข้อเสนอแนะ</span>
<span class="chip">ติดต่อได้หลายช่องทาง</span>
</div>
</div>
<div class="col-sm-4 text-right hidden-xs" style="padding-top:10px;">
<!-- โลโก้ (ถ้ามี) -->
<!-- <img src="img/logo.png" alt="School Logo" style="max-height:70px; opacity:.95;"> -->
</div>
</div>
</div>
<!-- Wave SVG -->
<svg class="wave" viewBox="0 0 1440 140" preserveAspectRatio="none" aria-hidden="true">
<path fill="rgba(255,255,255,.35)" d="M0,60 C240,120 480,10 720,60 C960,110 1200,30 1440,70 L1440,140 L0,140 Z"></path>
<path fill="#f6f7fb" d="M0,85 C260,145 520,30 760,85 C1000,140 1220,60 1440,95 L1440,140 L0,140 Z"></path>
</svg>
</section>
<!-- CONTENT -->
<div class="container content">
<div class="row">
<!-- LEFT: Contact Info -->
<div class="col-md-5">
<div class="card card-pad">
<h3 class="section-title">ข้อมูลติดต่อ</h3>
<p class="muted" style="margin-bottom:14px;">สามารถติดต่อสอบถามข้อมูลการเรียน การรับสมัคร และกิจกรรมต่าง ๆ ได้ตามช่องทางด้านล่าง</p>
<div class="info-item">
<p class="info-label">ที่อยู่</p>
<p class="info-value">โรงเรียนเทศบาลวัดชัยชุมพล<br>อำเภอเมือง จังหวัดนครศรีธรรมราช</p>
</div>
<div class="info-item">
<p class="info-label">โทรศัพท์</p>
<p class="info-value">
<a href="tel:0000000000">0xx-xxx-xxxx</a>
<span class="muted">(เปลี่ยนเป็นเบอร์จริง)</span>
</p>
</div>
<div class="info-item">
<p class="info-label">อีเมล</p>
<p class="info-value">
<a href="mailto:[email protected]">[email protected]</a>
<span class="muted">(เปลี่ยนเป็นอีเมลจริง)</span>
</p>
</div>
<div class="info-item">
<p class="info-label">เวลาทำการ</p>
<p class="info-value">วันจันทร์–ศุกร์ 08:30–16:30 น.</p>
</div>
<div class="info-item">
<p class="info-label">โซเชียล</p>
<p class="info-value">
<a href="#" target="_blank">Facebook Page</a>
<span class="muted">|</span>
<a href="#" target="_blank">Line Official</a>
<span class="muted">|</span>
<a href="#" target="_blank">Website</a>
</p>
</div>
<hr style="margin:16px 0;">
<div class="row">
<div class="col-xs-6" style="margin-bottom:10px;">
<a class="btn btn-default btn-block" href="tel:0000000000">
<span class="glyphicon glyphicon-earphone"></span> โทรหาเรา
</a>
</div>
<div class="col-xs-6" style="margin-bottom:10px;">
<a class="btn btn-default btn-block" href="mailto:[email protected]">
<span class="glyphicon glyphicon-envelope"></span> ส่งอีเมล
</a>
</div>
</div>
</div>
<div style="height:14px;"></div>
<!-- Map -->
<div class="card card-pad">
<h3 class="section-title">แผนที่</h3>
<p class="muted" style="margin-bottom:12px;">ฝัง Google Map ได้เลย (นำลิงก์ Embed ของโรงเรียนมาแทน)</p>
<div class="map-wrap">
<!-- เปลี่ยน src เป็น Google Maps Embed ของโรงเรียน -->
<iframe
src="https://www.google.com/maps?q=Nakhon%20Si%20Thammarat&output=embed"
allowfullscreen
loading="lazy">
</iframe>
</div>
</div>
</div>
<!-- RIGHT: Contact Form -->
<div class="col-md-7">
<div class="card card-pad">
<h3 class="section-title">ส่งข้อความถึงเรา</h3>
<p class="muted" style="margin-bottom:14px;">กรอกข้อมูลให้ครบถ้วน เจ้าหน้าที่จะติดต่อกลับโดยเร็วที่สุด</p>
<!-- ฟอร์มตัวอย่าง (เปลี่ยน action เป็นไฟล์ php ของคุณ เช่น contact_send.php) -->
<form action="#" method="post">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>ชื่อ-นามสกุล</label>
<input type="text" name="fullname" class="form-control" placeholder="กรอกชื่อ-นามสกุล" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>หัวข้อที่ติดต่อ</label>
<select name="topic" class="form-control" required>
<option value="" disabled selected>เลือกหัวข้อ</option>
<option>สอบถามการรับสมัคร</option>
<option>สอบถามหลักสูตร / English Program</option>
<option>ติดต่อกิจกรรม / ข่าวประชาสัมพันธ์</option>
<option>อื่น ๆ</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>เบอร์โทรศัพท์</label>
<input type="tel" name="phone" class="form-control" placeholder="เช่น 08x-xxx-xxxx">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>อีเมล</label>
<input type="email" name="email" class="form-control" placeholder="เช่น [email protected]" required>
</div>
</div>
</div>
<div class="form-group">
<label>ข้อความ</label>
<textarea name="message" class="form-control" rows="6" placeholder="พิมพ์ข้อความที่ต้องการติดต่อ..." required></textarea>
</div>
<div class="row">
<div class="col-sm-6" style="margin-bottom:10px;">
<button type="submit" class="btn btn-primary btn-block">
<span class="glyphicon glyphicon-send"></span> ส่งข้อความ
</button>
</div>
<div class="col-sm-6" style="margin-bottom:10px;">
<button type="reset" class="btn btn-default btn-block">
<span class="glyphicon glyphicon-refresh"></span> ล้างข้อมูล
</button>
</div>
</div>
<p class="note muted" style="margin-top:10px; font-size:12px;">
หมายเหตุ: หากต้องการให้ฟอร์มส่งอีเมลจริง ให้เปลี่ยน action ไปไฟล์ PHP และทำการ validate/ส่งเมลฝั่งเซิร์ฟเวอร์
</p>
</form>
</div>
<div style="height:14px;"></div>
<!-- FAQ / Quick Info -->
<div class="card card-pad">
<h3 class="section-title">คำถามที่พบบ่อย</h3>
<div class="panel-group" id="faq" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="q1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#faq" href="#a1" aria-expanded="true" aria-controls="a1">
การรับสมัครเรียนติดต่อช่องทางไหน?
</a>
</h4>
</div>
<div id="a1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="q1">
<div class="panel-body">
ติดต่อได้ทางโทรศัพท์/อีเมล/เพจโรงเรียน หรือส่งข้อความผ่านฟอร์มด้านบน พร้อมระบุระดับชั้นและข้อมูลผู้ปกครอง
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="q2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#faq" href="#a2" aria-expanded="false" aria-controls="a2">
ใช้เวลาติดต่อกลับนานแค่ไหน?
</a>
</h4>
</div>
<div id="a2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="q2">
<div class="panel-body">
ปกติจะติดต่อกลับภายใน 1–2 วันทำการ (ขึ้นอยู่กับปริมาณข้อความที่ได้รับ)
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="q3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#faq" href="#a3" aria-expanded="false" aria-controls="a3">
อยากเข้าชมโรงเรียน/เยี่ยมชมห้องเรียนทำอย่างไร?
</a>
</h4>
</div>
<div id="a3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="q3">
<div class="panel-body">
แนะนำให้นัดหมายล่วงหน้า เพื่อจัดเจ้าหน้าที่ดูแลและอำนวยความสะดวกในการเข้าชม
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-sm-6">
© <span id="y"></span> โรงเรียนเทศบาลวัดชัยชุมพล
</div>
<div class="col-sm-6 text-right">
<span class="muted">English Program</span>
</div>
</div>
</div>
</footer>
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
document.getElementById('y').textContent = new Date().getFullYear();
</script>
</body>
</html>
Zerion Mini Shell 1.0