在Blogger Blog特定的頁面建立個官方式的聯絡我們(Email)表單

---

提 示 :
1. 本功能效果樣式 : 
(表格的寬度會隨著你所應用的Blogger Template的內設而會有不一致情況)
1.1 請參考 D01小站 及 一元數位雜記 網站的應用內容樣。
1.2 示意圖

A. 建立本功能的方法 :

Step 1. 登入您的 Blogger Blog;

Step 2. 在 Blogger Blog 後控制台，點選「版面配置  > +新增小工具 > 點選(新增)「聯絡我們」(小工具)，並將此「聯絡我們」的標題格內給于輸入「.」或「.」符號 > 再將小工具儲存。

如果您先前已經增設了此「聯絡我們」(小工具)，請將其標題文字修改為「.」或「.」符號即可;

Step 3. 在 Blogger Blog 後控制台，點選「網頁」項目 > 新增網頁，將網頁文章編輯區設置於HTML模式，再將如下的程式碼貼入文章編輯區內;

<form name='contact-form'>
<div>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

Step 4. 將網頁文章編輯區設置於編輯 模式，此時你可以發現網頁文章編輯區版面存了「聯絡我們」表單內容 --> 在此表單的上方位及下方位，你可以再增加你意向的內容 > 並在此新網頁的標題框內輸入你意向的文字，例如:「聯絡我們」或「Contact Us」等等。新網頁內容編製完成後記得加以儲存喔。

Step 5. 在 Blogger Blog 後控制台，點選「主題」項目 > 再點選主題的 " 編輯 HTML "；

Step 6. 將電腦滑鼠點擊所開啟的 HTML 頁面內(任何位置皆可)；

Step 7. 按壓電腦鍵盤上的 CTL+ F 兩按鍵，此時 HTML 版面區域內的右上角將出現一個搜尋欄框；

Step 8. 使用電腦鍵盤在此搜尋欄框內輸入 ]]></b:skin>，再按電腦鍵盤上的 Enter 按鍵，之後，HTML 版區將顯現出黃色襯底的 ]]></b:skin> 內容段；

Step 9. 將如下的程式碼拷貝張貼到 ]]></b:skin> 的上方


#ContactForm1
{
display: none;
}


Step 10. 以上動作確認無誤後，點擊 HTML 版面區域左上方位的儲存主題;

Step 11. 在你的Blogger Blog後控制台 > 版面配置 > Pages，建立連結此新增加的「聯絡我們」網頁; 或/及，在你的Blogger Blog的 Menu 上建立連結此新增加的「聯絡我們」網頁;

Step 12. 完成。

---