大理高端网站建设|网站托管|极速建站|WordPress主题设计开发

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

2014-02-04 4708次

自定义联系表单,并使用HTML5/CSS3客户端验证
作为一个企业站点,客户可以通过电话、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 -->   

  • 联系表单我们只需要用户名、Email和内容这三个表单,表单提示只设置在用户名、Email这两个表单中,代码中的span标签中的内容就是表单的提示内容,当焦点在输入区时就会显示这个span标签中的内容。
  • placeholder占位符属性,HTML5网页表单改进的属性之一,占位符字段会在输入区域为空时或者不处于焦点时显示的,在以前我们只能用javascript来实现,增加占位符字段可以引导用户正确的输入信息。
  • required属性规定必需在提交之前填写输入字段,如果没有填写字段,客户端会自动提示“请填写此字段”,不同的浏览器会有所不同。
  • 最后的input type=”hidden” ,这段代码主要是在后面用来检验表单是否已经提交用的。
  • 表单中的name="",这个属性中的值都是唯一的值,否则在数据提交时会出现404错误。

三、添加邮件发送后的提示内容

此段代码添加在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.     padding2px 8px;   
  6.     color#fff;   
  7.     margin-left15px;   
  8.     positionabsolute;   
  9.     opacity: 0;   
  10. }   
  11. /*使用三角形所对应的unicode转义编码为span标签添加一个三角的箭头*/  
  12. .form-hint::before {   
  13.     content"\25C0";   
  14.     color:#f60;   
  15.     positionabsolute;   
  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-right32px;   
  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. }  

一个自定义,使用HTML5/CSS3客户端验证的联系表单就完成了,在萨龙网络的联系方式中试试看效果(发一次邮件就可以啊)。