Contact Form 7 表单插件用法

Contact Form 7 作为WordPress最通用的表单创建和扩展插件，已经被无数的WordPress建站用户广泛使用并获得非常好的口碑评价，Contact Form 7 表单插件是一款非常简单易用且扩展性灵活的表单管理插件，用户可以自定义各式各样不同类型的表单功能，而且支持自定义接受邮件通知，Ajax提交和 jQuery表单插件扩展等特色需求．还可以结合WordPress官方垃圾评论插件 – Akismet，来过滤垃圾邮件，同时也支持CAPTCHA反垃圾邮件扩展，表单域元素支持非常完善，包括各种常见的：单选框、复选框、文本域、文本框、下拉菜单、日期选择、文件上传、按钮等多种表单域；而且Contact Form 7运行用户无限数量创建各式表单。

Contact Form 7 安装

方法1：网站后台在线安装

登录网站后台，进入【 插件– 安装插件 】页面，搜索关键词“”，在线安装启用；

方法2：官方插件库下载

访问WordPress官方插件库，搜索关键词“”，下载最新版（点击进入下载页面）；然后，将下载的 Contact Form 7 解压上传到网站的 /wp-content/plugins/ 目录，最后，在 WordPress 后台的【插件】中找到并启用。

Contact Form 7 使用

安装启用 Contact Form 7 插件后，在网站后台的左边功能菜单中，可以看到出现了 联系 （英文版为 Contact）菜单，点击进入即可创建新的表单。

Contact Form 7 默认会创建一个简单的表单，你只需要将表单的短代码（简码） [contact-form-7 id=”4″ title=”联系表单 1″] 添加到相应的文章或者页面的文本（编辑器切换到文本状态添加）中即可实现表单调用。

Contact Form 7 表单项如下图：

新建 联系表单

在网站后台的左边功能菜单中点击 联系 菜单下的 添加新表单 链接，点击进入新建一个联系表单。

我们首先以添加一个名为 “Your Name ”的文本域表单项为例讲解表单项的创建方法。

1.1 点击表单中的 text 文本项，弹出设置窗口，如下图所示：

1.2 根据需要进行相应设置后，会在下面生成该表单对应的短代码，点击 Insert Tag 按钮，或者复制到表单框中，添加后如下图所示：

1.3 同样的方法，点击你要添加的表单类型，都会弹出相应的设置窗口；然后把生成的表单项短代码添加到表单框即可，以下截图为WPYOU英文演示站中的相关代码。

详细代码如下，可直接复制到你的表单框中使用和修改。

<p><label><em>*</em>Subject:</label>[text* your-subject id:your-subject "Product Inquiry"]</p>
<p><label><em>*</em>Your Name:</label>[text* your-firstname id:your-firstname placeholder "First name"] &nbsp;&nbsp; [text your-lastname id:your-lastname placeholder "Last name"]</p>
<p><label>User type:</label>[radio radio-usertype id:usertype "Personal" "Business" "Distributor"]</p>
<p><label><em>*</em>E-mail:</label>[email* your-email id:your-email placeholder "Your e-mail"]</p>
<p><label><em>*</em>Phone:</label>[text* your-phone id:your-phone placeholder "Your phone number"]</p>
<p><label>WhatsApp:</label>[text your-whatsapp id:your-whatsapp placeholder "Your WhatsApp ID"]</p>
<p><label>Skype:</label>[text your-skype id:your-skype placeholder "Your Skype ID"]</p>
<p><label>Company:</label>[text your-company id:your-company placeholder "Your company"]</p>
<p><label>Country:</label>[select menu-country id:your-country "Please select your country..." "Afghanistan" "Aland Islands" "Albania" "Algeria" "American Samoa" "Andorra" "Angola" "Anguilla" "Antarctica" "Antigua and Barbuda" "Argentina" "Armenia" "Aruba" "Australia" "Austria" "Azerbaijan" "Bahamas" "Bahrain" "Bangladesh" "Barbados" "Belarus" "Belgium" "Belize" "Benin" "Bermuda" "Bhutan" "Bolivia" "Bosnia and Herzegovina" "Botswana" "Bouvet Island" "Brazil" "British Indian Ocean Territory" "British Virgin Islands" "Brunei" "Bulgaria" "Burkina Faso" "Burundi" "Cambodia" "Cameroon" "Canada" "Cape Verde" "Cayman Islands" "Central African Republic" "Chad" "Chile" "China" "China HongKong" "China taiwan" "Christmas Island" "Cocos (Keeling) Islands" "Colombia" "Comoros" "Congo" "Cook Islands" "Costa Rica" "Croatia" "Cuba" "Cyprus" "Czech Republic" "Democratic Republic of Congo" "Denmark" "Disputed Territory" "Djibouti" "Dominica" "Dominican Republic" "East Timor" "Ecuador" "Egypt" "El Salvador" "Equatorial Guinea" "Eritrea" "Estonia" "Ethiopia" "Falkland Islands" "Faroe Islands" "Federated States of Micronesia" "Fiji" "Finland" "France" "French Guyana" "French Polynesia" "French Southern Territories" "Gabon" "Gambia" "Georgia" "Germany" "Ghana" "Gibraltar" "Greece" "Greenland" "Grenada" "Guadeloupe" "Guam" "Guatemala" "Guinea" "Guinea-Bissau" "Guyana" "Haiti" "Heard Island and Mcdonald Islands" "Honduras" "Hungary" "Iceland" "India" "Indonesia" "Iran" "Iraq" "Iraq-Saudi Arabia Neutral Zone" "Ireland" "Israel" "Italy" "Ivory Coast" "Jamaica" "Japan" "Jordan" "Kazakhstan" "Kenya" "Kiribati" "Kuwait" "Kyrgyzstan" "Laos" "Latvia" "Lebanon" "Lesotho" "Liberia" "Libya" "Liechtenstein" "Lithuania" "Luxembourg" "Macau" "Macedonia" "Madagascar" "Malawi" "Malaysia" "Maldives" "Mali" "Malta" "Marshall Islands" "Martinique" "Mauritania" "Mauritius" "Mayotte" "Mexico" "Moldova" "Monaco" "Mongolia" "Montserrat" "Morocco" "Mozambique" "Myanmar" "Namibia" "Nauru" "Nepal" "Netherlands" "Netherlands Antilles" "New Caledonia" "New Zealand" "Nicaragua" "Niger" "Nigeria" "Niue" "Norfolk Island" "North Korea" "Northern Mariana Islands" "Norway" "Oman" "Pakistan" "Palau" "Palestinian Occupied Territories" "Panama" "Papua New Guinea" "Paraguay" "Peru" "Philippines" "Pitcairn Islands" "Poland" "Portugal" "Puerto Rico" "Qatar" "Reunion" "Romania" "Russia" "Rwanda" "Saint Helena and Dependencies" "Saint Kitts and Nevis" "Saint Lucia" "Saint Pierre and Miquelon" "Saint Vincent and the Grenadines" "Samoa" "San Marino" "Sao Tome and Principe" "Saudi Arabia" "Senegal" "Serbia and Montenegro" "Seychelles" "Sierra Leone" "Singapore" "Slovakia" "Slovenia" "Solomon Islands" "Somalia" "South Africa" "South Georgia and South Sandwich Islands" "South Korea" "Spain" "Spratly Islands" "Sri Lanka" "Sudan" "Suriname" "Svalbard and Jan Mayen" "Swaziland" "Sweden" "Switzerland" "Syria" "Tajikistan" "Tanzania" "Thailand" "Togo" "Tokelau" "Tonga" "Trinidad and Tobago" "Tunisia" "Turkey" "Turkmenistan" "Turks And Caicos Islands" "Tuvalu" "Uganda" "Ukraine" "United Arab Emirates" "United Kingdom" "United Nations Neutral Zone" "United States" "United States Minor Outlying Islands" "Uruguay" "US Virgin Islands" "Uzbekistan" "Vanuatu" "Vatican City" "Venezuela" "Vietnam" "Wallis and Futuna" "Western Sahara" "Yemen" "Zambia" "Zimbabwe"]</p>
<p><label style="float:left;"><em>*</em>Content:</label>[textarea* your-message placeholder "Please fill in the details you want to know such as product specifications,price,MOQ,etc."]</p>
<p style="display:none">[text your-productname id:your-productname] [text your-producturl id:your-producturl]</p>
<p class="btn-submit"><label> </label>[submit "SUBMIT"]</p>

1.4  表单项添加后，切换到 邮箱 标签项，创建这个新的联系表单，如下图所示：

收件人：填写接收邮箱（用户提交了Contact Form 表单后，会发送提交信息到该邮箱）

发件人：提供表单的用户信息（一般为 用户名）

主题：提交主题标签

消息正文：用户提交Contact Form 表单的详细信息列表，演示站代码数据如下：

From: [your-firstname][your-lastname] <[your-email]>
Subject: [your-subject]

<table style="width:80%;border:1px solid #ddd;" height="200" cellpadding="0" cellspacing="0">
<tr>
<th align="right" scope="row">Product Name：</th>
<td> <a href="[your-producturl]" target="_blank">[your-productname]</a></td>
</tr>
<tr style=" background:#f2f2f2;">
<th align="right" scope="row">Your Name：</th>
<td> [your-firstname] [your-lastname]</td>
</tr>
<tr>
<th align="right" scope="row">User type：</th>
<td> [radio-usertype]</td>
</tr>
<tr style=" background:#f2f2f2;">
<th align="right" scope="row">E-mail：</th>
<td> [your-email]</td>
</tr>
<tr>
<th align="right" scope="row">Phone：</th>
<td> [your-phone]</td>
</tr>
<tr style=" background:#f2f2f2;">
<th align="right" scope="row">WhatsApp：</th>
<td> [your-whatsapp]</td>
</tr>
<tr>
<th align="right" scope="row">Skype：</th>
<td> [your-skype]</td>
</tr>
<tr style=" background:#f2f2f2;">
<th align="right" scope="row">Company：</th>
<td> [your-company]</td>
</tr>
<tr>
<th align="right" scope="row">Country：</th>
<td> [menu-country]</td>
</tr>
<tr style=" background:#f2f2f2;vertical-align:top;">
<th align="right" scope="row">Content：</th>
<td> [your-message]</td>
</tr>
</table>
------------------------------------------
This e-mail was sent from a contact form on our website.

1.5  表单项添加完成后，点击 保存 按钮，创建这个新的联系表单。

1.6 新的联系表单创建好后，该表单会生成一个短代码供我们随时调用，复制该短代码，添加到相应文章或页面中即可实现。短代码位置如下图所示：

创建联系表单页面

新建 Contact Form 7 表单完成后，在后台的左侧功能菜单中，进入【 页面 – 新建页面 】来创建显示可视化联系表单的页面。本文以创建产品询单Inquiry页面为例讲解，具体如下：

2.1 新建页面标题命名为 Inquiry，在编辑框中添加表单短代码，如下图所示：

2.2 最后，点击 发布 按钮生成该表单页面，以本文Inquiry询单为例生成的最终页面效果如下图所示：

2.3  至此，我们需要的联系表单页面就创建完成了。在这个页面添加各表单项信息，点击 SUBMIT 按钮提交后，表单资料就会发送到管理员邮箱（邮箱可以自定义设置）了。

2.4  用户在该表单页面，填写信息成功提交后，系统会发送邮件到指定的接收邮箱，而且，可以直接回复客户邮件。接收到的邮件效果如下图所示：

2.5  你还可以配合使用 Contact Form DB 插件，实现表单数据的数据库存储，并可以在网站后台进行查看。

更多插件设置

3.1 邮箱 标签项设置

在 Contact Form 7 表单管理里，标签切换到【邮箱】项，可以自定义设置接收邮箱的不同参数，包括：接收邮箱、收件人信息、邮件标题、邮件正文等。

而且，可以自定义最多2个不同的接收邮箱，如下图所示：

WPYOU英文演示站中的 Message Body 中的代码如下：


From: [your-firstname][your-lastname] <[your-email]>
Subject: [your-subject]

<table style=”width:80%;border:1px solid #ddd;” height=”200″ cellpadding=”0″ cellspacing=”0″>
<tr>
<th align=”right” scope=”row”>Product Name：</th>
<td> <a href=”[your-producturl]” target=”_blank”>[your-productname]</a></td>
</tr>
<tr style=” background:#f2f2f2;”>
<th align=”right” scope=”row”>Your Name：</th>
<td> [your-firstname] [your-lastname]</td>
</tr>
<tr>
<th align=”right” scope=”row”>User type：</th>
<td> [radio-usertype]</td>
</tr>
<tr style=” background:#f2f2f2;”>
<th align=”right” scope=”row”>E-mail：</th>
<td> [your-email]</td>
</tr>
<tr>
<th align=”right” scope=”row”>Phone：</th>
<td> [your-phone]</td>
</tr>
<tr style=” background:#f2f2f2;”>
<th align=”right” scope=”row”>WhatsApp：</th>
<td> [your-whatsapp]</td>
</tr>
<tr>
<th align=”right” scope=”row”>Skype：</th>
<td> [your-skype]</td>
</tr>
<tr style=” background:#f2f2f2;”>
<th align=”right” scope=”row”>Company：</th>
<td> [your-company]</td>
</tr>
<tr>
<th align=”right” scope=”row”>Country：</th>
<td> [menu-country]</td>
</tr>
<tr style=” background:#f2f2f2;vertical-align:top;”>
<th align=”right” scope=”row”>Content：</th>
<td> [your-message]</td>
</tr>
</table>
——————————————
This e-mail was sent from a contact form on ourSite

3.2 留言 标签项设置

在 Contact Form 7 表单管理里，标签切换到【留言】项，可以自定义设置表单提交验证提示信息（比如：提交成功提示信息、表单验证错误提示信息）等内容。

3.3 额外的设置 标签项

在 Contact Form 7 表单管理里，标签切换到【额外的设置】项，可以自定义添加更多插件功能（点击查看具体高级功能介绍）。