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