如何在Blogger中添加聯繫表(“聯繫我們”頁面)?

已發表: 2020-11-10

在Blogger中添加“與我們聯繫”表單是一項繁瑣的任務,因為它不支持WordPress之類的插件。

大多數Blogspot博客作者所做的就是尋求第三方網站(foxyform,jotform,123contactform等)的幫助。

Blogger聯繫表單頁面但是,今天,您將學習如何在Blogger中添加正式的“與我們聯繫”頁面。

正如我之前所說,可以將第三方代碼插入新的頁面,例如在公園散步。 但是,正式的聯繫表遠比那些更好。


官方Blogger表格的好處

  1. 發送消息後,您將立即收到消息。 並且,可交付性也是100%。
  2. 簡單的界面使訪問者可以輕鬆地與您聯繫。
  3. 如果您知道Cascade樣式表(CSS)語言,將很容易根據自己的喜好自定義表單。
  4. 整個頁面將不會重新加載以發送消息。

我將本教程分為三個部分,添加了聯繫人小工具,將其隱藏並在新頁面中實現了官方代碼。

第1部分:添加聯繫人小工具

請按照以下步驟在您的博客上添加與我們聯繫的小工具。

第1步:訪問blogger.com並登錄到您的帳戶。 如果您正在運行多個博客,則需要從列表中選擇所需的博客。

第2步:點擊左側邊欄中的Layout以獲得添加小工具的選項。

博客佈局選項

步驟3 :您可以在右側主面板上看到“添加小工具”鏈接。 單擊它會帶您到一個小工具列表。

博客添加小工具

步驟4 :然後,從左側選擇更多小工具。 現在,您將看到Contact Form 。 只需添加相同。

聯繫人表格小工具博客

第2部分:隱藏小工具

現在,您將學習如何隱藏聯繫人小工具。

步驟1 :我們需要在此處處理模板部分。 因此,從左側菜單中單擊模板。

Blogger模板設置

第2步:然後,單擊“編輯HTML” ,您將在一個大字段中獲得博客的完整代碼。

Blogger模板編輯HTML

步驟3 :搜索]]> </ b:skin>並將以下代碼放在其前面。

div#ContactForm1 {
顯示:無!重要;
}

聯繫人表格代碼博客

然後,單擊“保存”以保留更改。

第三步之後,您將不會在博客上看到“聯繫人”窗口小部件。

第3部分:將聯繫表單添加到頁面

您將在此處獲得自定義的正式博客作者聯繫表單代碼,並將其添加到單獨的頁面上進行顯示。

第1步:轉到頁面,然後單擊新建頁面。

博客新頁

步驟2 :刪除其中的所有內容後,將以下代碼粘貼到HTML帖子編輯器中。

Blogger-聯繫我們-頁面代碼

<div id =” custom_ContactForm1” class =“ widget ContactForm”>
<div class =“ contact-form-widget”>
<p>填寫下面的表格與我們聯繫。</ p>
<div class =“ form”>
<表格名稱=“聯繫表格”>
<p> </ p>
名稱
<br>
<input type =“文本” value =“” size =“ 30” name =”名稱“ id =” ContactForm1_contact-form-name“ class =” contact-form-name“>
<p> </ p>
電子郵件
<span style =”字體粗細:粗體;”> * </ span>
<br>
<input type =” text” value =”” size =” 30” name =“ email” id =” ContactForm1_contact-form-email” class =“ contact-form-email”>
<p> </ p>
信息
<span style =”字體粗細:粗體;”> * </ span>
<br>
<textarea rows =” 5” name =” email-message” id =” ContactForm1_contact-form-email-message” cols =“ 25” class =” contact-form-email-message”> </ textarea>
<p> </ p>
<input type =” button” value =“發送” id =” ContactForm1_contact-form-submit” class =“ contact-form-b​​utton contact-form-b​​utton-submit”>
<p> </ p>
<div style =“ text-align:center; 最大寬度:222px; 寬度:100%”>
<p id =” ContactForm1_contact-form-error-message” class =“ contact-form-error-message”> </ p>
<p id =“ ContactForm1_contact-form-success-message” class =“聯繫表-success-message”> </ p>
</ div>
</ form>
</ div>
</ div>
<div class =“ clear”> </ div>
<span class =“ widget-item-control”>
<span class =“ item-control Blog-admin”>
<a title =“ Edit” target =“ configContactForm1” onclick =“返回_WidgetManager._PopupConfig(document.getElementById(” ContactForm1“));” href =” // www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1“ class =” quickedit“>
<img width =“ 18” height =“ 18” src =“ // img1.blogblog.com/img/icon18_wrench_allbkg.png” alt =“”>
</a>
</ span>
</ span>
<div class =“ clear”> </ div>
</ div>

第3步:添加標題(如與我們聯繫),然後按如下所示更改正確的設置。

聯繫我們頁面博客

步驟4:最後,單擊“發布”按鈕。 就這樣。

從此聯繫表發送的消息將被發送到管理員電子郵件。 如果該博客有多個管理員,則所有人都可以獲取。


Useful其他有用的Blogspot教程:

  • 如何在Blogger中添加自定義Robots.txt文件?
  • 如何將Blogger站點地圖提交到Google Search Console?

包起來

希望您現在知道如何在Blogger中添加“與我們聯繫”頁面。 如果發現成功消息後仍發現零可交付性之類的困難,建議您重新安裝“聯繫”小部件。

是的,如果您對CSS和javascript代碼段有足夠的了解,則可以繼續自定義頁面以獲得更好的視覺吸引力。

不要忘記與您的博客朋友分享這篇文章。