Gmail製作STMP聯絡我們表單系統

發表留言 人氣: 3471°c

有了自己的網站! 想加入聯絡我們表單給訪客﹑會員﹑客服﹑方便提交內容聯繫到你,

如果你的網站是銷售類型的,更為重要了的,因為客人購買你的產品時,都會聯絡你咨詢一下商品的相關資料

這時表單的角色非常的重要,有效地即時與你聯絡..

如果你的網站是企業或公司私人機構更加需要,有了牠能夠顯得你的網站更加專業!

這時我們可以利用 郵箱的SMTP 外寄郵件系統,為你的網站架設一個即時聯絡表單…

提示: 只要你使用的郵箱(Mail),都有提供SMTP服務,也可以使用此方法
例如: Yahoo﹑Hotmail﹑QQ Mail﹑Gmail 等

今次教學! 利用Gmail為Contact US教學基礎

Step1
首先,先由下方取得PHPMailer,下載完畢後解壓再把class.phpmailer.php、class.smtp.php二個類別檔拷貝出來。
http://code.google.com/a/apache-extras.org/p/phpmailer

Step2
創建 contact.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>線上客服系統</title>
<meta content="all" name="minwt" />
<meta name="author" content="梅干扣肉" />
<meta name="Copyright" content="www.minwt.com版權所有" />
<meta name="keywords" content="梅問題,教學網,photoshop教學,flex教學,javascript教學,css教學,網頁教學,架站教學,wordperss教學">
<meta name="description" content="利用Gmail的SMTP製作線上客服系統" />
<style>
input{width:250px; border:solid 1px #ccc;}
textarea{width:300px; height:100px; border:solid 1px #ccc;}
table{font-size:12px; color:#666; border:solid 1px #C1C1C1;}
table tr td{padding:7px;}
.btn{background:#fff; width:auto;}
</style>
<script>
function checkform(){
var name=document.getElementById("sndname").value;
var mail=document.getElementById("sendmail").value;
var subject=document.getElementById("subject").value;
var mailbody=document.getElementById("sendbody").value;
if(name !="" && mail!="" && subject!="" && mailbody!=""){
document.form1.submit();
}else{
alert("請確認下列欄位是否都已填寫:\n1.姓名\n2.Email\n3.回應類別\n4.回應內容");
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="sendmail.php">
<h2 style="width:400px; margin:0 auto; color:#333333;">線上客服系統</h2>
<table width="400" height="211" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="71" align="center" bgcolor="#e7e7e7">姓名</td>
<td width="314" bgcolor="#e7e7e7"><label>
<input type="text" name="sndname" id="sndname" />
</label></td>
</tr>
<tr>
<td align="center">Email</td>
<td><input type="text" name="sendmail" id="sendmail" /></td>
</tr>
<tr>
<td align="center" bgcolor="#E7E7E7">回應類別</td>
<td bgcolor="#E7E7E7">
<select name="subject" id="subject">
<option value="站務問題" selected="selected">站務問題</option>
<option value="合作提案">合作提案</option>
<option value="其它問題">其它問題</option>
</select>
</td>
</tr>
<tr>
<td height="64" align="center">回應內容</td>
<td><textarea name="sendbody" id="sendbody"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#FFFFFF"><label>
<input type="button" name="button" id="button" value="送 出" class="btn" onclick="checkform();"/>
<input type="reset" name="button2" id="button2" value="取 消" class="btn"/>
</label></td>
</tr>
</table>
</form>
</body>
</html>

Step3
創建 sendmail.php
<?php
include("class.phpmailer.php"); //匯入PHPMailer類別
$Name=$_POST['sndname'];
$Mail=$_POST['sendmail'];
$Subject=$_POST['subject'];
$Sendbody=$_POST['sendbody'];
$mail= new PHPMailer(); //建立新物件
$mail->IsSMTP(); //設定使用SMTP方式寄信
$mail->SMTPAuth = true; //設定SMTP需要驗證
$mail->SMTPSecure = "ssl"; // Gmail的SMTP主機需要使用SSL連線
$mail->Host = "smtp.gmail.com"; //Gamil的SMTP主機
$mail->Port = 465; //Gamil的SMTP主機的埠號(Gmail為465)。
$mail->CharSet = "utf-8"; //郵件編碼
$mail->Username = "[email protected]"; //Gamil帳號
$mail->Password = "password"; //Gmail密碼
$mail->From = $Mail; //寄件者信箱
$mail->FromName = "線上客服"; //寄件者姓名
$mail->Subject ="一封線上客服信"; //郵件標題
$mail->Body = "姓名:".$Name."
信箱:".$Mail."
主題:".$Subject."
回應內容:".$Sendbody; //郵件內容
$mail->IsHTML(true); //郵件內容為html ( true || false)
$mail->AddAddress("[email protected]"); //收件者郵件及名稱
if(!$mail->Send()) {
echo "發送錯誤: " . $mail->ErrorInfo;
} else {
echo "<div align=center>感謝您的回覆,我們將會盡速處理!</div>";
}
?>

修改 sendmail.php :
17、18行輸入Gmail的帳號與密碼。
27行輸入收件者的信箱。

Step4
完成後,連同剛剛的class.phpmailer.php、class.smtp.php、contact.html、sendmail.php,四隻檔案丟到PHP的主機中,並瀏覽contact.html依照欄位,填寫完畢後並按下送出,成功就會看到如下的圖示。

注意 要使用該作法的話,虛擬主機需要支援Open SSL才行,否則將會無法發送,因此這邊若不行發送的話,得詢問一下你的主機商 (通常都會默認開啟的)。

範例文件下載

演示圖片: 

相關文章︰
製作自己網站聯絡表單

標籤: ,