写文章
莓子红了
2015-07-21 15:02

Contact Form 7 基础表单新建教程

联系人表单有很多,今天给大家分享一下contact form 7的简单教程,希望大家通过这个分享能够做出自己的表单。获得更多的询盘。
1)首先安装contact form 7 插件并激活。点击add new.并选择一个语言。 默认为英语。
[attach]5945[/attach] [attach]5946[/attach]

2)为表单根据你的需要添加相应的名字。 这是contact form 7 默认已经为我们添加了一个表单。
[attach]5947[/attach]
[attach]5948[/attach]

3) 今天主要分享的是为大家提供一个自定义的表单。contact form7 已经为大家提供了很多的shortcode. 通过常用的几个就可以做出自己想要的联系表单了。 比如text, mail, tel , text area submit 等。

[attach]5949[/attach]

4) 那现在就给大家演示怎么做一个下图这样的表单。

[attach]5950[/attach]

4-1) 首先添加"My name is:" ,一般的标题是在框框的上面,这个标题是在框框的里面。那他的实现方式是这样的:
点击text这个shortcode. 按照图示填写内容:

[attach]5951[/attach]

注意: field type : 选为 ”required field" , 则此项为“必填项”
Name : 这一项为默认,不需要改。每一个name的值都会不一样。
Default Value: 这个里面的的文字就是框框里面会出现的文字。大家可以按照自己的需要写出更多的话语。
然后把下面这个“ use this text as the placeholder of the field” 勾上,这个文字就会出现在框框里面了。
最后点击“ Insert Tag" 就添加完成这一项了。

4-2) 根据相同的方法,就可以添加出来email 和 text area 这两个项了。
4-3) 最后是添加” submit".
4-4) 此时可通过保存这个表单,把这个的shortcode.

[attach]5956[/attach]
直接插入到page, post, portfolio当中查看效果。如图:


[attach]5957[/attach]
很明显, 这个table没有分行,所有的框框都挤到一起了。可以用</p></br>等来为每个框框分行。添加如下:

[attach]5958[/attach]

[attach]5959[/attach]

这里/p /br分行的效果都是一样,完整的是<p>.....</p> ; <br> ......</br> 但在这里也可以只添加后面的</p></br>就可以了。

怎么样? 相信大家看到这里,都对contact form 7的表单有了一定的了解了。

5) 关于第二项" mail" 的设置。需要注意的地方。
这个地方, 我们需要注意[...] 里面的内容设置。需要和前面表单的内容一致。
[attach]5960[/attach]

TO: 这个是你接收邮件的邮箱。
From: [ your-name] 应该= [text-967]
Subject: [ your-subject] 前面没有关于主题的定义,这里可以自己写。如“inquiry from about us page"
Additional headers: reply to ;[ your-email] = [email-934];
Message body: 这是邮件的正文,内容根据你的需要来写。但最好把前面表单里面做的那几项都包含进来。
具体设置如下图:

[attach]5961[/attach]

如此设置保存之后, 就可以去网站上面测试这个表单了。
希望这个简单的教程能够帮到大家。


举报
收藏
转发
0/500
添加表情
评论
评论 (58)
最近
最早
3天2夜学会建站
置顶时间 :

设置帖子类型

普通
新闻
活动
修改

圈内转发

0/104

分享至微信

复制链接

举报

请选择举报理由

留联系方式
垃圾广告
人身攻击
侵权抄袭
违法信息
举报

确认要删除自己的评论吗?

取消 确定

确认要删除自己的文章吗?

取消 确定
提问
设置提问积分
当前可用积分:
-
+
20
50
100
200
偷看

积分偷看

10积分
我的积分(可用积分)
确认偷看

问题已关注

答主回复后,系统将通知你

不再提示