1 概述

对于一个blogger博客来说，已经有留言系统，可以方便博主与访问者交流，但是有时候访问者需要针对其他的方面联系，不便于公开留言，可以通过email与博主联系，只要在页面上放置邮箱地址，通过防止垃圾邮件的新方法公布邮箱地址，如果考虑到公开邮件不安全，可以用添加一个联系表单页面，方法很多，国外有kontactr，这里我使用blogger自带的联系人表单

1 概述
3 测试效果
4 参考资料

2.1 添加一个静态页面

现在后台建立一个静态页面，命名为guestbook，在页面设置 > 读者评论 > 不允许使用反向链接，隐藏现有的反向链接，这样页面就不会显示自带的留言系统，然后发布，这样就会生成类似http://blog.lihaixin.name/p/guestbook.html的静态页面

2.2 添加联系人表单小工具

在后台>布局>添加小工具>更多小工具>联系人表单

如下图所示，按右边的加号按钮，或者双击联系人表单，在布局里添加联系人表单

联系表单

在配置联系人表单小部件标题，你可以自定义，例如我就标题为：给我发邮件！，然后按保存这样小部件就添加完成

配置联系人表单小部件

2.2 移动小工具到博文下面

在布局里，拖动给我发邮件！小工具到博文下面

联系人表单布局

2.3 修改模板源代码，限制联系人表单只在特定的页面显示

在模板 > 修改HTML > 调整小部件 > ContactForm1

在

<b:includable id='main'>

下面添加

<b:if cond='data:blog.url == &quot;http://blog.lihaixin.name/p/guestbook.html&quot;'>
 <div class='post-outer'>

在

 <b:include name='quickedit'/>

添加

</div>
</b:if>

意思就是给ContactForm1做个页面判断，访问http://blog.lihaixin.name/p/guestbook.html页面工具才生效；和加一个<div class='post-outer'>这样外观和帖子里的内容一样

下面是我完整的widget

<b:widget id='ContactForm1' locked='false' title='给我发邮件！' type='ContactForm'>
                          <b:includable id='main'>
                           <b:if cond='data:blog.url == &quot;http://blog.lihaixin.name/p/guestbook.html&quot;'>
                            <div class='post-outer'>
 <b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
<div class='form'>
  <form name='contact-form'>
    <p/>
    <data:contactFormNameMsg/>
    <br/>
    <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
    <p/>
    <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
    <br/>
    <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
    <p/>
    <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
    <br/>
    <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
    <p/>
    <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
    <p/>
    <div style='text-align: center; max-width: 222px; width: 100%'>
      <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
      <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
    </div>
  </form>
</div>
 </div>
<b:include name='quickedit'/></div>
                           </b:if>

                         </b:includable>
                        </b:widget>

2.4 修改样式表

这里是最后一步，可以修改联系人表单的样式适合自己网站

3 测试效果

我的效果图如下：

李海鑫个人博客留言

输入电子邮件和消息就可以给我留言了，内容通过邮件发送到gmail邮箱里，速度很快，立马就可以收到，另外会检查电子邮件的正确性，但是因为不具备图形验证码，可能会收到机器人自动提交的。

新邮件提醒

4 参考资料

特定页面语句判断：http://www.bloggersentral.com/2010/08/targeting-specific-pages-with.html
给blogger添加联系人表单：http://www.blogvela.com/2013/05/add-a-sidebar-contact-form-widget-to-blogger/

李海鑫个人博客

(2013-7-20)给blogger添加联系表单功能