DIY WordPress contact form with JQuery (3)

分类：WordPress, theme skill | 标签： ajax,JQuery,WordPress,主题,留言 | 浏览次数：1,712

本篇再接上篇，上篇已经说完php代码和js代码两部分，如果你是从本篇开始看的话，建议你还是从首篇看起吧，否则会是个不明不白的啦。现在写到第三篇了，再不解决这个教程就太麻烦了，呵呵。现在把基本的css样式代码写下。下面的样式代码是让你的contact form基本成个样子，可能你还需要根据你自己主题的样式及颜色再为设置下，无论如何，有个大概框架你们改起来会很容易的了。

（下面的样式名称定义均按前两篇代码中的名称来定的）

.screenReader{
left: -9999px;
position: absolute;
top: -9999px;

}

.thanks{
background: #ffffcc;
border: 1px solid #ff9900;
color: #555;
padding: 10px;
}

ol.forms{
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}

ol.forms li{
margin: 0 0 18px;
}

ol.forms label{
cursor: pointer;
display: block;
float: left;
font-weight: 400;
padding-right: 20px;
text-align: right;
width: 100px;
}

ol.forms textarea{
height: 200px;
padding: 5px;
width: 335px;
}

.error{
background-color: #fff;
color: #f00;
}

ol.forms li .error{
font-size: 12px;
margin-left: 10px;
}

ol.forms li.textarea .error{
display: block;
left: 500px;
position: absolute;
top: 500px;
width: 120px;
}

ol.forms li.screenReader{
margin-bottom: 0;
}

ol.forms li.buttons button{
background-color: #FFB340;
border: none;
color: #555;
cursor: pointer;
font-size: 16px;
margin-left: 4px;
padding: 5px;
}

ol.forms li.buttons button:hover{
background-color: #FF9900;
color: #222;
}

ol.forms li.buttons,ol.forms li.inline{
margin-left: 116px;
}

ol.forms li.inline input{
width: auto;
}

ol.forms li.inline label{
display: inline;
float: none;
width: auto;
}

#sendCopy{
border: none;
}

补充完上面的代码后，我还想补充一下：因为前面我们在设计联系表单的时候，只提供了姓名，邮址和内容三个项目，而且这些项目都是必需填写的。如果你想再增加一些项目，比如基本的网站地址，那应该怎样添加呢？

因为网址并不是必需填写的，所以添加会比较简单。现在以添加网址为例：

首先在首篇的php代码中的<ol></ol>标签内，添加一个<li></li>的标签，具体位置看你把网址的输入框放在哪里为定：

<li><label>your Site</label>
<input type="text" name="siteurl" id="siteurl" value="<?php if(isset($_POST['siteurl'])) echo $_POST['siteurl'];?>" class="siteurl" />
</li>

因为网址是可以留空的，所以你会发现上面<li>标签内的class相对于之前需要确认的代码少了一个“requiredField”的样式。

而在邮件的正文部分我们还必需把上述增加的内容加入。修改代码（第二篇提及）：

$body = "Name: $name \n\nEmail: $email \n\nSite: $siteurl \n\nComments: $comments";

把它改为（红字部分为增加内容）：

$body = "Name: $name \n\nEmail: $email \n\nSite: $siteurl \n\nComments:

按照上述更改的方法，你可以为这个contact form添加一些个性的内容了。

或者你会再问，如果我要添加一个联系的基本内容，而且要提供设定好了的下拉菜单让访客选择的，应该怎样做？那我把这个说明再放到下一篇吧 ^_^