如何在Blogger中添加联系表(“联系我们”页面)?
已发表: 2020-11-10在Blogger中添加“与我们联系”表单是一项繁琐的任务,因为它不支持WordPress之类的插件。
大多数Blogspot博客作者所做的就是寻求第三方网站(foxyform,jotform,123contactform等)的帮助。
Blogger联系表单页面但是,今天,您将学习如何在Blogger中添加正式的“与我们联系”页面。
正如我之前所说,可以将第三方代码插入新的页面,例如在公园散步。 但是,正式的联系表比那些要好得多。
官方Blogger表格的好处
- 发送消息后,您将立即收到消息。 并且,可交付性也是100%。
- 简单的界面使访问者可以轻松地与您联系。
- 如果您知道Cascade样式表(CSS)语言,将很容易根据自己的喜好自定义表单。
- 整个页面将不会重新加载以发送消息。
我将本教程分为三个部分,添加了联系人小工具,将其隐藏并在新页面中实现了官方代码。
第1部分:添加联系人小工具
请按照以下步骤在您的博客上添加与我们联系的小工具。
第1步:访问blogger.com并登录到您的帐户。 如果您正在运行多个博客,则需要从列表中选择所需的博客。
第2步:点击左侧边栏中的Layout以获得添加小工具的选项。
- 救
步骤3 :您可以在右侧主面板上看到“添加小工具”链接。 单击它会带您到一个小工具列表。
- 救
步骤4 :然后,从左侧选择更多小工具。 现在,您将看到Contact Form 。 只需添加相同。
- 救
第2部分:隐藏小工具
现在,您将学习如何隐藏联系人小工具。
步骤1 :我们需要在此处处理模板部分。 因此,从左侧菜单中单击模板。
- 救
第2步:然后,单击“编辑HTML” ,您将在一个大字段中获得博客的完整代码。
- 救
步骤3 :搜索]]> </ b:skin>并将以下代码放在其前面。
显示:无!重要;
}
- 救
然后,单击“保存”以保留更改。
第三步之后,您将不会在博客上看到“联系人”窗口小部件。
第3部分:将联系表单添加到页面
您将在此处获得自定义的正式博客作者联系表单代码,并将其添加到单独的页面上进行显示。
第1步:转到页面,然后单击新建页面。
- 救
步骤2 :删除其中的所有内容后,将以下代码粘贴到HTML帖子编辑器中。
- 救
<div class =“ contact-form-widget”>
<p>填写下面的表格与我们联系。</ p>
<div class =“ form”>
<表格名称=“联系表格”>
<p> </ p>
名称
<br>
<input type =“文本” value =“” size =“ 30” name =” 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行=“ 5”名称=“电子邮件消息” id =“ ContactForm1_contact-form-电子邮件消息” cols =“ 25” class =“联系表格电子邮件消息”> </ textarea>
<p> </ p>
<input type =” button” value =“发送” id =” ContactForm1_contact-form-submit” class =“ contact-form-button contact-form-button-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§ionId=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代码段有足够的了解,则可以继续自定义页面以获得更好的视觉吸引力。
不要忘记与您的博客朋友分享这篇文章。