如何製作「聯絡我們」網頁表單

不透過php內建mail() 或 PHPMailer套件達成

Anthea Lee
5 min readAug 8, 2018
「聯絡我們」網頁(圖一)

先簡單區別一下:

A.使用 javascript

B.使用php內建mail() 或 PHPMailer套件


A直接開啟user端的郵件軟體(e.g.手機上的Gmail app、Mac上的Mail)進行傳送
B直接透過網頁使用SMTP協定達成傳送email目的(不用切換到額外的視窗)

一、html核心

html form(圖二)

(因為覺得程式碼用圖片比較好看,如果要複製可以滑到最下面~(‘∀’*)看我多貼心)

二、傳送按鈕的 onclick 事件 去執行javascript中的 submitHandler function

js (圖三)

這些是寫在同一個.html檔喔~

完成畫面(圖四)

三、注意事項

‘%0A’是換行

‘%0A%0A%0A’代表換三行(js line 16)

呈現在(圖四)右手邊郵件內容後,空三行後才顯示From:…

四、代(複)碼(製)區

html

<!-- 一開始即執行javascript的 init() function -->
<body onload="init()">
<form enctype="text/plain" accept-charset="utf-8">
<!-- 寄件者姓名 -->
<input id="nameText" type="text" name="Name" value size="60" placeholder="姓名(name)" required> <!-- required 必填欄位 ,placeholder 預設內容-->

<!-- 寄件者email -->
<input id="emailText" type="email" name="Email" value size="60" placeholder="Email" required>

<!-- 寄件者電話 -->
<input id="telText"type="tel" name="Phone" value size="60" aria-invalid="false" placeholder="電話(phone)" required>

<!-- 郵件主旨 -->
<input id="subText" type="text" name="Subject" value size="60" aria-invalid="false" placeholder="主旨(subject)" required>

<!-- 郵件內容 -->
<textarea id="bodyText" name="your-message" cols="40" rows="10" aria-required="true" aria-invalid="false" placeholder="你的訊息(Your Message)" required></textarea>

<!-- 傳送按鈕 -->
<div>
<input type="button" value="送出訊息" onclick="submitHandler();">
<a id="mailTo"></a>
</div>
</form>
</body>

javascript


<script>
//宣告預設表單內容為空 (你想要的話也可以加東西)
var initSubject='',initBody='';

//按下傳送按鈕後執行
function submitHandler(){
var to = "contact@example.com";//寫死的傳送對象 就是公司的信箱 不會顯示在網頁上
var name = nameText.value;//讀取ID為 nameTextuser 物件中的值
var email = emailText.value;
var tel = telText.value;
var subject = subText.value;
//把user填的資料都塞到 mail body 中
var body = ""+bodyText.value+'%0A%0A%0A';//%0A是換行 換了三行
body += "From:"+nameText.value+'%0A';
body += "Email:"+emailText.value+'%0A';
body += "Tel:"+telText.value;
//傳送的主要程式碼
mailTo.href="mailto:"+to+"?subject="+subject+"&body="+body;
mailTo.click();
}
//在body onload
function init(){
subText.value=initSubject;
toText.value=initTo;
bodyText.value=initBody;
}
</script>

--

--