運用 MailTo 製作一個互動回信表單

實用進階語法

第一篇
運用 MailTo 製作一個互動回信表單

壹、設計理念：
MailTo 寄信表單，是Form標籤中最簡單的互動語法之一；她的優點是不用借助 CGI、ASP、PHP 等互動程式，就可以達到蒐集訪客回信表單資料；很可惜的是她是靜態不動的，常讓訪客不知所措，基於這個原因，我想出以下這個辦法來改進她的缺點。

貳、運作程序：
當訪客按下【我要訂購】或【意見回覆】等表單選項時，我們先讓她打開一個適合您表單尺寸大小的新視窗(如下語法)，這個目的是便於她可以自動關閉(不用您去按【確定】離開)，並產生互動的假象。這完全是因為 MailTo 標籤只能提供轉信服務，並不能讓訪客明顯的知道，這封信是否已確實被寄出的訊息；所以我們要讓她在關閉的同時，也能自動產生一個告知訊息。
<BODY>
<a href="#" onClick="window.open('mail.htm','mail','width=500,height=400,directories=no,.........');return false">MailTo表單示範</A>
</BODY>

參、兩個關鍵：( //...................以下這個符號表示註解)
為了要讓這個 MailTo 標籤能自動產生互動訊息，所以加了以下兩個 JavaScript 功能 (A. & B.)：
一、當訪客按下送出【我要訂購】或【意見回覆】等按鈕時，我們除了讓她能正常提供轉信服務功能外，同時將新開啟的這個視窗關閉。
<HEAD>
<script language=javascript>
function exit()
{
window.close();
}
</script>
</HEAD>
<BODY>
<Form Method="POST" Action="mailto:YourName@mail.com.tw" Enctype="text/plain">
//MailTo 自動寄信語法，將YourName@mail.com.tw換成您的信箱，其餘不用修改
--依自己需要填入各式表單語法--
//如果您不熟悉表單的用法，請參考第一階段一次學完表單製作教學
<Input Type="Submit" Value="送出表單" onClick="setTimeout('exit()', 2000)")">
//呼叫exit() JavaScipt程式，並於2秒內關閉這個視窗
</FORM>
</BODY>
二、在關閉本視窗同時，我們讓她自動產生一個新訊息網頁視窗，明顯的讓網友知道，這封信已確實寄出或告知我已收到本資料等訊息。
<HEAD>
<script language=javascript>
function sendwin(){ windowLeaving=window.open("這裡填入您的 HTML 需求');
//請用檢視原始碼，參考示範檔案寫法
windowLeaving.document.writeln("這裡填入您的 HTML 需求");
windowLeaving.document.writeln("這裡填入您的 HTML 需求");
--這裡填入您的HTML需求--
//如果您不熟悉 HTML & JavaScript 的用法，請參考第一階段實用HTML語法蒐整及JavaScript大全教學
windowLeaving.document.writeln("這裡填入您的 HTML 需求");
windowLeaving.document.writeln("這裡填入您的 HTML 需求");
}
//---->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
--依自己需要填入各式表單語法--
<input type="submit" Value="送出表單" onClick="sendwin();">
//呼叫 sendwin JavaScipt 程式，並自動產生一個新訊息網頁視窗
</FORM>
</BODY>

肆、檢查設定：
為了達到這個目的，我們還要檢查或完成以下設定：
(一般只要您電腦設有 SMTP & POP3 寄收信軟體，如 Microsoft Outlook，她就會自動產生好設定)
請打開 IE 瀏覽器

按工具 Internet 選項

選程式標籤

internet 程式電子郵件 (E)

選擇您電腦內使用中的通訊軟體

按確定完成設定！

伍、補充說明：
為了讓您更加瞭解範例，我另外加了一個使用說明頁say.htm

(mail.htm) 及警告 JavaScript 程式(如下語法)，這兩個過程您可以省略不用。
<HEAD>
<script language="JavaScript">

</script>
</HEAD>
<BODY>
<FORM>
--依自己需要填入各式表單語法--
<input type="submit" Value="送出表單" onClick="FunAlert());">
//呼叫FunAlert() JavaScipt 程式，並自動跳出的警告信息對話
</FORM>
</BODY>

陸、顯示狀況：
填完表單送出後，其操作正常顯示狀況如下：
按【送出表單】按鈕後

會跳出【警告訊息】視窗

請按【確定】按鈕

傳送檔案畫面(她會呼叫您上面所完成設定的信件軟體來發信)

然後自動關閉寄信表單視窗

打開已送出本資料訊息視窗。
注意：因為我加了上一段 (06.) 對話，所以這裡您會了多一個【確定】按鈕。

柒、運用要領：
這裡的送出表單按鈕，我同時用了三個 onClick JavaScript 程式，您可以參考我的方式，將她們合並來用！
<BODY>
<FORM>
--依自己需要填入各式表單語法--
<input type="submit" Value="送出表單" onClick="FunAlert();sendwin();setTimeout('exit()', 2000)")">
//依序同時呼叫FunAlert() & sendwin() & setTimeout('exit()', 2000) JavaScipt 程式
</FORM>
</BODY>

捌、技巧變化：
除了使用上述這個方式外，您也可以想一想，自己另外創造出更多的其他變化哦！
例如：將sendwin JavaScipt 程式拿掉，改為當網頁被關閉後，跳出訊息對話：
<BODY onUnload="alert('嗨！謝謝您的來信')">
//網頁被關閉後，跳出[嗨！謝謝您的來信]對話
或新網頁：
<script>
var exit=true;
function goodbye()
{
if (exit)
{
open("infon.htm","OpenWindow","width=600,height=180,resizable=0,scrollbars=0");
//網頁被關閉後，跳出 infon.htm 新網頁，內容您可以寫一些收到或感謝語等客套話
}
}
//-->
</script>
或新網頁 & 訊息對話：(略)
//請自己練習！以上這些方式，有一個不好的缺點：當訪客只要關閉這個視窗，就會出現此訊息

玖、大功告成：
我使用的是假的信箱，所以不會收到這封測試信件！
請按示範案例，進入後，記得用檢視原始碼查看哦！
本程式，適用 IE & NC Browser，請自行轉換測試！
網頁研習室教學會員，另請進入YourName/maillist2/skill/01/目錄，查看 mail2.htm 及 mail3.htm 不同效果範例。
如果您想完整取得電子報內所有檔案資料，我們提供燒錄光碟片給您 Go 。
凡加入教學或教材會員者，均可獲得以下乙份完整的資料光碟。
詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、網頁圖窟。

拾、結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此引用來源，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您學會HTML語法，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質，索取教材資料屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎繼續訂閱。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。