[](https://pic.salongweb.com/2014/02/form.jpg "自定义联系表单，并使用HTML5/CSS3客户端验证")
作为一个[企业站点](https://api.salongweb.com "萨龙网络")，客户可以通过电话、QQ等通讯方式很方便的联系到企业，但联系表单是一个必要的功能。
萨龙网络建站一般都使用wordpress作为开发平台，或者直接静态页面来展示企业网站。使用wordpress作为开发平台，创建联系表单就相当的方便，有相当丰富的插件可以创建功能强大的联系表单，而[萨龙龙](https://yfdxs.com/sa-longlong "萨龙龙")一直都认为能代码实现的功能就不用插件，因为可以减少服务器的压力，增加网站的浏览速度。
创建表单时，需要验证表单，这次验证我们通过强大的[HTML5/CSS3](https://api.salongweb.com/portfolio/%e8%90%a8%e9%be%99%e7%bd%91%e7%bb%9c2014%e5%85%a8%e6%96%b0%e7%89%88%e6%9c%ac "萨龙网络2014全新版本")客户端验证，减少PHP程序的运行，也增加表单的互动性。
现在我们就通过wordpress平台来创建一个自定义、使用[HTML5/CSS3](https://yfdxs.com/salong-theme.html "HTML5/CSS3响应式Salong主题 ")客户端验证的联系表单：
**一、创建联系表单模板**
复制主题下的page.php文件，重命名为：template-contact.php，将其中第一个<?php替换为：
1. < ?php
2. /\*
3. \* Template Name:读者墙
4. \*/
**二、添加HTML5表单代码**
在模板文件中查找：
1. <?php the\_content(); ?>
在其下面添加HTML5表单代码：
1. <!– 表单 –>
2. <form action=“<?php the\_permalink(); ?>” id=“contactForm” method=“post”>
3. <h4>给我们发送邮件：</h4>
4. <ul class=“contactform”>
5. <li>
6. <input type=“text” name=“contactName” id=“contactName” placeholder=“萨龙龙” required />
7. <span class=“form-hint”>请输入您的昵称！</span> </li>
8. <li>
9. <input type=“email” name=“email” id=“email” placeholder=“salongweb@example.com” required />
10. <span class=“form-hint”>正确格式为：salongweb@example.com</span> </li>
11. <li>
12. <textarea name=“comments” id=“commentsText” rows=“20” cols=“30” placeholder=“邮件内容…” required></textarea>
13. </li>
14. <li>
15. <button type=“submit”>发送邮件</button>
16. </li>
17. </ul>
18. <input type=“hidden” name=“submitted” id=“submitted” value=“true” />
19. </form>
20. <!– 表单end –>
\[ssbluelist\]
- 联系表单我们只需要用户名、Email和内容这三个表单，表单提示只设置在用户名、Email这两个表单中，代码中的span标签中的内容就是表单的提示内容，当焦点在输入区时就会显示这个span标签中的内容。
- placeholder占位符属性，HTML5网页表单改进的属性之一，占位符字段会在输入区域为空时或者不处于焦点时显示的，在以前我们只能用javascript来实现，增加占位符字段可以引导用户正确的输入信息。
- required属性规定必需在提交之前填写输入字段，如果没有填写字段，客户端会自动提示“请填写此字段”，不同的浏览器会有所不同。
- 最后的input type=”hidden” ,这段代码主要是在后面用来检验表单是否已经提交用的。
- 表单中的name=””，这个属性中的值都是唯一的值，否则在数据提交时会出现404错误。
\[/ssbluelist\]
**三、添加邮件发送后的提示内容**
此段代码添加在HTML5表单的上面就可以，意思是当邮件成功发送后会出现“谢谢，您的邮件发送成功，我们会尽快回复您！”的提示内容，而这里我们不再需要添加邮件发送失败或表单信息不正确的内容。
1. <!– 邮件发送成功的提示内容 –>
2. <?php if(isset($emailSent) && $emailSent == true) { ?>
3. <p class=“thanks”>谢谢，您的邮件发送成功，我们会尽快回复您！</p>
4. <?php } ?>
5. <!– 邮件发送成功的提示内容end –>
**四、数据的处理与内容的提交**
一般表单都会在这个时候验证数据是否正确，正确就自动发送邮件，否则提示错误信息。而我们通过HTML5/CSS3客户端来验证，在邮件发送成功之前都已经验证过表单，所以PHP代码中不再需要判断用户名与内容有没有添加，Email正确与否，只需判断当点击提交按钮后，就自动把表单中的内容以邮件的方式发送到网站管理员的邮箱中。
代码如下：
1. // 当成功按下“提交按钮”后，将表单中的内容发送到管理员的邮箱
2. if(isset($\_POST\[‘submitted’\])) {
3. // 用户名、Email和内容
4. $name = trim($\_POST\[‘contactName’\]);
5. $email = trim($\_POST\[’email’\]);
6. $comments = trim($\_POST\[‘comments’\]);
7. // 获取网站管理员的Email
8. $emailTo = get\_option(‘admin\_email’);
9. // 邮件的标题
10. $subject = ‘萨龙网络邮件 来自：’.$name;
11. // 下面的代码功能是让标题正确显示，不产生乱码的情况
12. $subject = “=?UTF-8?B?”.base64\_encode($subject).“?=”;
13. // 管理员收到的邮件内容格式
14. $body = “姓名：$name \\n\\nEmail: $email \\n\\n内容：\\n\\n$comments”;
15. // 发信人的邮箱
16. $headers = ‘From:’ . $email;
17.
18. mail($emailTo, $subject, $body, $headers);
19. $emailSent = true;
20. }
**五、表单的样式与提示**
1、表单的CSS样式，在这里就不贴出来，因为每个网站的样式都不一样，重新写一下效率更高。
2、表单的提示，互动效果在代码中都有注释，代码如下：
1. /\*\*\*\*\*\*\*\*\*\*\*\*\*\*表单提示\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
2. /\*\*\*\*span标签默认的样式\*\*\*\*/
3. .form-hint{
4. background-color: \#f60;
5. padding: 2px 8px;
6. color: \#fff;
7. margin-left: 15px;
8. position: absolute;
9. opacity: 0;
10. }
11. /\*使用三角形所对应的unicode转义编码为span标签添加一个三角的箭头\*/
12. .form-hint::before {
13. content: “\\25C0”;
14. color:\#f60;
15. position: absolute;
16. top:3px;
17. left:-8px;
18. }
19.
20. /\*\*\*\*\*\*\*CSS3过渡属性\*\*\*\*\*\*\*/
21. input,textarea{
22. -moz-transition:ease-in-out 0.5s;
23. -webkit-transition:ease-in-out 0.5s;
24. -o-transition:ease-in-out 0.5s;
25. -ms-transition:ease-in-out 0.5s;
26. transition:ease-in-out 0.5s;
27. }
28.
29. /\*\*\*\*\*\*\*CSS3表单验证互动效果\*\*\*\*\*\*\*/
30.
31. /\*当焦点在输入区时，改变其背景颜色\*/
32. \#contactForm ul li input:focus:invalid,\#contactForm ul li textarea:focus:invalid{
33. background-color: \#feeeee;
34. }
35. /\*当焦点在输入区时，改变其内边距，加上transition过渡属性，产生一个缓慢的过渡效果\*/
36. \#contactForm ul li input:focus{
37. padding-right: 32px;
38. }
39. /\*当焦点在输入区时，span标签中的内容透明度为1\*/
40. \#contactForm ul li input:focus + .form-hint{
41. opacity: 1;
42. }
43. /\*当输入区中输入正确的内容后，改变span标签内容的背景与字体颜色\*/
44. \#contactForm ul li input:required:valid + .form-hint{
45. background: \#28921f;
46. color: \#fff;
47. }
48. \#contactForm ul li input:required:valid + .form-hint::before {
49. color: \#28921f;
50. }
51. /\*当输入区中输入正确的内容后，改变其背景颜色\*/
52. \#contactForm ul li input:valid,\#contactForm ul li textarea:valid{
53. background-color: \#e9ffe7;
54. }
\[successbox\]一个自定义，使用HTML5/CSS3客户端验证的联系表单就完成了，在萨龙网络的[联系方式](https://api.salongweb.com/contact "联系我们")中试试看效果（发一次邮件就可以啊）。\[/successbox\]