聯絡我們表單
在這個教學，我們參考 Contact Form In Bootstrap Modal Popup來製作我們的「聯絡我們表單」。
範例程式
註：本週進度只改header.php與footer.php這2個檔案，其西header.php是要修改”不吝指教”按鈕來叫出聯絡我們表單對話方塊，footer.php則是對話方塊、JavaScript、與PHP程式碼的處理。 打開header.php，找到”不吝指教”這個按鈕元素，加上 data-toggle=”modal” data-target=”#contactUsModal” 這2個屬性，其中- data-toggle=”modal”，以對話方塊的方式進行切換(打開/關閉)
- data-target=”#contactUsModal”，指向目標元素contactUsModal，這個是我們後面的聯絡我們表單的ID。
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#contactUsModal">請不吝指教</button>接著我們打開footer.php， 1．加上聯絡我們的表單HTML區塊
<!-- 聯絡我們表單 -->
<div id="contactUsModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">聯絡我們</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form role="form" method="post" id="reused_form" >
<p>
<!-- Send your message in the form below and we will get back to you as early as possible. -->
請在下方填寫您的寶貴意見，我們將儘快回覆您，感謝您的意見。
</p>
<div class="form-group">
<label for="name">
姓名:</label>
<input type="text" class="form-control" id="name" name="name" required maxlength="50">
</div>
<div class="form-group">
<label for="email">
Email:</label>
<input type="email" class="form-control" id="email" name="email" required maxlength="50">
</div>
<div class="form-group">
<label for="name">
您的意見:</label>
<textarea class="form-control" type="textarea" name="message"
id="message" placeholder="請在此處留下您的寶貴意見"
maxlength="6000" rows="7"></textarea>
</div>
<button type="submit" class="btn btn-lg btn-success btn-block" id="btnContactUs">按下此按鈕送出</button>
</form>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h4>您的意見已經成功送出了，謝謝您！</h4>
</div>
<div id="error_message" style="width:100%; height:100%; display:none; ">
<h3>錯誤</h3>
很抱歉，在發送表單內容時出現在錯誤！
</div>
</div>
</div>
</div>
</div>
2．在JavaScript段，加入：
// 以下是聯絡表單的程式，此部份程式係以jQuery撰寫
$(function() {
function after_form_submitted() {
$('form#reused_form').hide();
$('#success_message').show();
$('#error_message').hide();
}
$('#reused_form').submit(function(e) {
e.preventDefault();
$form = $(this);
//show some response on the button
$('button[type="submit"]', $form).each(function() {
$btn = $(this);
$btn.prop('type','button' );
$btn.prop('orig_label',$btn.text());
$btn.text('Sending ...');
});
$.ajax({
type: "POST",
url: 'index.php',
data: $form.serialize(),
dataType: 'json',
success: after_form_submitted()
});
});
});
</script>
3．在php段，加上：
if ( isset($_POST["name"]) && isset($_POST["email"]) && isset($_POST["message"]) ) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$content="From: $name n Email: $email n Message: $message";
$recipient = "fgchen@gmail.com";
$mailheader = "From: $email rn";
mail($recipient, "客戶來信", $content, $mailheader) or die("Error!");
}
整個footer.php列表如下：
<!-- 購物車對話方塊 -->
<div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">購物車</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="show-cart table">
</table>
<div>總金額: $<span class="total-cart"></span></div>
</div>
<div class="modal-footer">
<div style="display:flex;justify-content:center;align-items:center;">
<div class="font">學號(或姓名)：</div>
<textarea id="orderPeople" class="font" name="order" style="resize:none;height:40px;">陳韋誌</textarea>
</div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary" onclick="submit_order();">確認下單</button>
</div>
</div>
</div>
</div>
<!-- 聯絡我們表單對話方塊 -->
<div id="contactUsModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">聯絡我們</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form role="form" method="post" id="reused_form" >
<p>
<!-- Send your message in the form below and we will get back to you as early as possible. -->
請在下方填寫您的寶貴意見，我們將儘快回覆您，感謝您的意見。
</p>
<div class="form-group">
<label for="name">
姓名:</label>
<input type="text" class="form-control" id="name" name="name" required maxlength="50">
</div>
<div class="form-group">
<label for="email">
Email:</label>
<input type="email" class="form-control" id="email" name="email" required maxlength="50">
</div>
<div class="form-group">
<label for="name">
您的意見:</label>
<textarea class="form-control" type="textarea" name="message"
id="message" placeholder="請在此處留下您的寶貴意見"
maxlength="6000" rows="7"></textarea>
</div>
<button type="submit" class="btn btn-lg btn-success btn-block" id="btnContactUs">按下此按鈕送出</button>
</form>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h4>您的意見已經成功送出了，謝謝您！</h4>
</div>
<div id="error_message" style="width:100%; height:100%; display:none; ">
<h3>錯誤</h3>
很抱歉，在發送表單內容時出現在錯誤！
</div>
</div>
</div>
</div>
</div>
//頁尾
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 text-center">
<h3 class="text-uppercase font-weight-bold">富國雞腿王總部基本資料</h6>
<p>M棟 MB108研究室
<br/>設備：主機、CPanel虛擬主機管理系統、Plesk虛擬主機管理系統
<br/>地址：43302臺中市沙鹿區臺灣大道六段1018號</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 text-center">
<h3 class="text-uppercase font-weight-bold">聯絡資訊</h3>
<p>Wells Chen
<br/>info@csim.hk.edu.tw
<br/>+886 4 26318652 Ext. 5424 fax: 886 4 26521921</p>
</div>
</div>
<div class="footer-copyright text-center">Copyright© 2020- 富國雞腿王總部. All Rights Reserved.</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="./js/main.js"></script>
<script src="./js/cart.js"></script>
<script type="text/javascript">
function submit_order(){ //訂單送出處理函式
//JSON.stringify將json物件轉換成字串
// console.log( JSON.stringify(shoppingCart.listCart()));
//JSON.prse將資料轉換成json物件
// console.log( JSON.parse(JSON.stringify(shoppingCart.listCart())));
var cartObject = shoppingCart.listCart(); //購物車物件，內含所有的點餐項目(餐點名稱、價格、數量、小計)
var cartString = JSON.stringify(cartObject); //將jsons物件轉換成字串形式
var request = new XMLHttpRequest();
request.open("POST", "index.php");
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("orderPeople="+ $('#orderPeople').val()+"&cartData="+cartString);
$(".clear-cart").click(); //觸發"清除購物車按鈕"
$("#cart").modal('hide'); //隱藏購物車對話方塊
}
// 以下是聯絡表單的程式，此部份程式係以jQuery撰寫
$(function() {
function after_form_submitted() {
$('form#reused_form').hide();
$('#success_message').show();
$('#error_message').hide();
}
$('#reused_form').submit(function(e) {
e.preventDefault();
$form = $(this);
//show some response on the button
$('button[type="submit"]', $form).each(function() {
$btn = $(this);
$btn.prop('type','button' );
$btn.prop('orig_label',$btn.text());
$btn.text('Sending ...');
});
$.ajax({
type: "POST",
url: 'index.php',
data: $form.serialize(),
dataType: 'json',
success: after_form_submitted()
});
});
});
</script>
<?php
if (isset($_POST["cartData"]) && isset($_POST["orderPeople"])) {
$cartData = $_POST["cartData"];
$orderPeople = $_POST["orderPeople"];
// Convert JSON string to Array
$cartArray = json_decode($cartData, true);
$orderStr = '訂購人：'.$orderPeople."rn";
$orderMoney = 0; //訂單總金額
// echo count($cartArray) + "<BR>";
for ($i=0; $i < count($cartArray); $i++){
$orderStr .= "第".($i+1)."筆餐點：".$cartArray[$i]["name"]. //餐點名悄
",數量=".$cartArray[$i]["count"]. //數量
",單價=".$cartArray[$i]["price"]. //單價
",小計=".$cartArray[$i]["total"]."rn"; //小計
$orderMoney += intval($cartArray[$i]["total"]);
}
$orderStr .= '本筆訂單應收金額為'.$orderMoney."rn";
$to ="fgchen@gmail.com "; //收件者
$subject = "新便當訂單"; //信件標題
$msg = $orderStr;
$headers = "MIME-Version: 1.0" . "rn";
// $headers .= "Content-type:text/html;charset=UTF-8" . "rn";
$headers .= 'From: wda1902<wda1902@wda1902.stu.fgchen.com>' . "rn";
if(mail($to, $subject, $msg, $headers)):
echo "信件發送成功。";//寄信成功就會顯示的提示訊息
else:
echo "信件發送失敗！";//寄信失敗顯示的錯誤訊息
endif;
}
if ( isset($_POST["name"]) && isset($_POST["email"]) && isset($_POST["message"]) ) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$content="From: $name n Email: $email n Message: $message";
$recipient = "fgchen@gmail.com";
$mailheader = "From: $email rn";
mail($recipient, "客戶來信", $content, $mailheader) or die("Error!");
}
?>
</body>
</html>