当前位置：首页-WordPress文章-HTML5/CSS3-正文

自定义联系表单，并使用HTML5/CSS3客户端验证

萨龙龙 萨龙龙 HTML5/CSS310年前202.09W

自定义联系表单，并使用HTML5/CSS3客户端验证 - 第1张
作为一个企业站点，客户可以通过电话、QQ等通讯方式很方便的联系到企业，但联系表单是一个必要的功能。

萨龙网络建站一般都使用wordpress作为开发平台，或者直接静态页面来展示企业网站。使用wordpress作为开发平台，创建联系表单就相当的方便，有相当丰富的插件可以创建功能强大的联系表单，而萨龙龙一直都认为能代码实现的功能就不用插件，因为可以减少服务器的压力，增加网站的浏览速度。

创建表单时，需要验证表单，这次验证我们通过强大的HTML5/CSS3客户端验证，减少PHP程序的运行，也增加表单的互动性。

现在我们就通过wordpress平台来创建一个自定义、使用HTML5/CSS3客户端验证的联系表单：

一、创建联系表单模板

复制主题下的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客户端验证的联系表单就完成了，在萨龙网络的联系方式中试试看效果（发一次邮件就可以啊）。[/successbox]

HTML5/CSS3(3)客户端验证(1)联系表单(1)
本文原创，作者：萨龙龙，其版权均为萨龙网络所有。
如需转载，请注明出处：https://salongweb.com/form-htm-5css3.html
萨龙龙

萨龙龙

侠客

一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！

1341.88M233.67W￥2.78W

相关文章

使用CSS3 @font-face打造个性化web字体

个性化的web字体，如萨龙网络的标题、页脚小工具标题、宣传语等都用的是个性化的web字体，在CSS3之前，web设计师们都只能使用电脑中安装好的字体，或者把字体做成图片。自从有了CSS3强大的@font-face功能…
HTML5/CSS310年前02.12W5

CSS3 模拟弹窗效果

这篇文章我们来创建一个很酷的CSS3模拟弹窗效果，也许你看到过很多类似的弹窗效果，但都是通过jQuery来实现。 通过CSS3模拟弹窗效果只需简单的两段CSS样式就可以实现，而且实现的效果不比jQuery差，甚…
HTML5/CSS310年前01.49W0

Emmet快速编写CSS样式

Emmet缩写可以快速地生成HTML代码的结构化标签，在我们编写HTML代码时节省了很多时间，提高了工作效率，让前端开发人员也不会感觉太繁琐，今天我们来介绍下Emmet如何快速编写CSS样式。 [related_p…
HTML5/CSS310年前01.54W2

CSS3带阴影的3D旋转作品展示

CSS3有太多实用、创新的网页交互效果，而今天跟大家介绍一个让人激动的3D图像旋转效果，使网页更加的生动、漂亮。 国外在HTML5/CSS3的技术上远比国内先进，大量的网站很早都已经使用最新的技术，国内使用HT…
HTML5/CSS310年前01.44W3

前端开发利器Emmet的介绍

曾经也为写HTML/CSS代码而烦恼过，不愿再写下去，感觉很烦琐，写那么多的尖括号，用的标签都是在重复写，而且绝大多数标题都需要闭合标签，再多几个无序列表就更头疼。 [related_poststagid="31…
HTML5/CSS310年前01.26W3

Emmet的高级功能与使用技巧

[infobox]前端开发工具Emmet的介绍，Emmet快速编写HTML代码和Emmet快速编写CSS样式分别介绍了Emmet的用途，编写HTML代码和CSS样式，今天再来介绍下Emmet的一些高级功能和使用技巧。…
HTML5/CSS310年前02.37W2