QQ邮件列表是博主站长们最喜欢用的订阅工具，他受众面广，使用方便快捷，比起其他的订阅工具，QQ邮件列表可以为自己网站增分不少，但是再好的工具也有不尽人意的地方，QQ邮件列表默认只有两种风格，黑色的和白色的，大部分时候这两种风格是不适合的，但是我们可以自行进行编写，来匹配自己的网站。

登陆QQ邮件列表，http://list.qq.com，然后创建一个栏目，点击“订户”→“搜集订户”→“获取订阅插件”，选择博客类型，这里以wordpress为例。

你获得的代码如下：

<!--以下是QQ邮件列表订阅嵌入代码--><script >var nId = "4c7a6ca45b6f146e75a27f1dba5cea531f5e504905295796",nWidth="auto",sColor="light",sText="填写您的邮件地址，订阅我们的精彩内容：" ;</script><script src="http://list.qq.com/zh_CN/htmledition/js/qf/page/qfcode.js" charset="gb18030"></script>

很明显，默认的代码提供的是javascript代码，从这里看不出来明显的HTML代码，不过，从客户端，也就是浏览器就能看到了。

先添加代码到网站，然后打开chrome浏览器，找到组件，右键，点击“审查元素”，就会获得当前这些表单的HTML代码，获取的代码如下：

<!--以下是QQ邮件列表订阅嵌入代码-->
<script>
var nId = "4c7a6ca45b6f146e75a27f1dba5cea531f5e504905295796",nWidth="auto",sColor="light",sText="填写您的邮件地址，订阅我们的精彩内容：" ;
</script>
<script src="http://list.qq.com/zh_CN/htmledition/js/qf/page/qfcode.js" charset="gb18030">
</script>
<style>
.rssbook{padding:10px 15px;overflow:hidden;zoom:1;background:#f6f6f6;border:3px solid #ddd;}.light{background:#f6f6f6;border:3px solid #ddd;}.dark{background:#aaa;border:3px solid #666;}.mailInput{margin-top:5px;}.rssbook .info{color:#666;font-size:12px;}.light .info{color:#666;}.dark .info{color:#fff;}.rssbutton{float:left;border:1px solid #698ab4; -moz-border-radius:3px;border-radius:3px;-webkit-border-radius:3px;}.dark .rssbutton{border: 1px solid #585858;}.rssbutton input{background: #77a0d1;border: 1px solid #88b3e6; color: #FFFFFF; cursor: pointer;font-weight: bold;width:90px;display:block;height:22px;line-height:22px;*line-height:19px;text-align:center;}.dark .rssbutton input{background:#676767;border: 1px solid #777;}.rssbutton input:hover{background:#86b4eb;text-decoration:none;}.dark .rssbutton input:hover{background:#797979;border: 1px solid #939393;}input.rsstxt{width:100%;height:20px;font-size:14px;padding:2px 3px;-moz-border-radius:3px;border-radius:3px;-webkit-border-radius:3px;border:1px solid #ccc;;border-color:#7c7c7c #c3c3c3 #c3c3c3 #9a9a9a;margin-bottom:5px;}.dark input.rsstxt{background:#eee;}
</style>
<div class="rssbook light " style="width:auto ">
<p class="info">填写您的邮件地址，订阅我们的精彩内容：</p>
<div class="mailInput">
<form action="http://list.qq.com/cgi-bin/qf_compose_send" target="_blank" method="post"><input type="hidden" name="t" value="qf_booked_feedback"><input type="hidden" name="id" value="4c7a6ca45b6f146e75a27f1dba5cea531f5e504905295796"><input id="to" name="to" type="text" class="rsstxt" value="">
<div class="rssbutton">
<input type="submit" value="订阅">
</div>
</form>
</div>
</div>

通过代码的简单阅读，我们可以看出来，其中有一个字符串有内容：

4c7a6ca45b6f146e75a27f1dba5cea531f5e504905295796

这就是自己网站的唯一代码，从这里能识别出自己的网站，明白这一点，就可以开始改造了。

<div class="rssbook light " style="width:auto ">
<p class="info">输入邮箱免费订阅本站精彩内容</p>
<div class="mailInput">
<form action="http://list.qq.com/cgi-bin/qf_compose_send" target="_blank" method="post">
<input type="hidden" name="t" value="qf_booked_feedback">
<input type="hidden" name="id" value="36c6259d85724039f5243478e1c93f66a3090d1fdb5d0131">
<input id="to" name="to" type="text" class="rsstxt" value="">
<div class="rssbutton"><input type="submit" value="订阅">
</div>
</form>
</div>
</div>

去掉了包含里面的CSS，修改成自己的自定义的CSS名称，然后就可以按照自己的需要，修改成为自己的的风格了。