外贸常用留言表单-contact form7

Contact Form 7 表单插件表单插件是一款非常简单易用且扩展性灵活的表单管理插件,用户可以自定义各式各样不同类型的表单功能,而且支持自定义接受邮件通知,Ajax提交和 jQuery表单插件扩展等特色需求。还可以结合WordPress官方垃圾评论插件 – Akismet,来过滤垃圾邮件。被认为是WordPress最受欢迎也最易于使用的表单创建和扩展插件,被无数的WordPress建站用户广泛使用并获得非常好的口碑评价。

1.安装contact form 7

方法1:在WordPress后台的【插件 – 安装插件】页面,在线搜索  Contact Form 7  在线安装,启用即可使用,如下图所示;

contact form7

2.用contact form 7创建留言表单

1.) 插件安装启用后,在WordPress网站后台管理菜单中找到 【 联系(Contact)】项并进入页面。

contact2

2.)点击编辑,在WordPress网站后台管理菜单中找到 【添加新表单(Add New)】项,进入到新建联系表单页面,在这里可以自定义设置 表单邮箱留言额外的设置等项,界面如下图所示:

创建新的联系表单页面,可以自定义新联系表单标题名称,编辑表单模板(根据网站需要添加各种功能的表单项)等。

  • 10
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前面曾发过一篇WordPress自定义插件cformsII,它的功能也比较强大,功能也比较多,但是,在使用时这款插件有点小复杂,如果不仔细研究下,肯定会有的晕的.....O(∩_∩)O~,今天在官网又看到了一款类似的插件,和cformsII插件比起来,要简便的多,所以就来介绍下。 Contact Form 7一款简的Wordpress联系插件,不但简但灵活性高,可以生成多个联系,支持通过标记自定义邮件或内容的显示,Ajax提交和 jQuery插件支持.可结合Akismet过滤垃圾邮件,同时也支持CAPTCHA反垃圾邮件,域元素支持各种最常见的:选框,复选框,文本框,下拉菜等. Contact Form 7插件安装: 1.下载Contact Form 7插件,将压缩包解压后,把文件夹上传到wp-content/plugins/目录下。 2.登录WordPress管理后台,点击“Plugins”找到上传的插件,激活该插件,即可。激活插件后,在左侧会出现Contact Form 7版块,点击链接会出现如上图的界面。 3.点击Pages新建联系页面,把“[contact-form 1 "Contact form 1"]”代码拷贝到页面中,就会出现相关联系信息。 上图中的Form部分是的相关内容,除了这些内容外,我们还可以通过标签来实现其他功能,在Form的右侧有“Generate Tag”,点击你就会看到相关的设置内容,如下图: 从图中我们可以看到它的相关功能,这里以Quiz为例:这个选项是设置验证问题的,只有正确回答问题后才可以发留言,点选后,可以在里面设置一下参数(可选项),设置好后,把“[quiz quiz-数字]”代码拷贝到左边的文本框中,然后保存就可以了。 介绍完上面的内容后,页面的下方是Email设置,填入要接收联系的EMail地址、格式、主题、内容等等,你可以根据自己的意愿去填写相关的内容。
可以使用`el-form`组件嵌套另一个`el-form`组件。这种嵌套可以用于更复杂的布局和组织。 以下是一个示例代码,演示了如何嵌套`el-form`: ```vue <template> <el-form ref="outerForm" :model="outerForm" label-width="100px"> <el-form-item label="外层项"> <el-input v-model="outerForm.field1"></el-input> </el-form-item> <el-form ref="innerForm" :model="innerForm" label-width="100px"> <el-form-item label="内层项"> <el-input v-model="innerForm.field2"></el-input> </el-form-item> </el-form> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { outerForm: { field1: '' }, innerForm: { field2: '' } }; }, methods: { submitForm() { this.$refs.outerForm.validate((validOuterForm) => { if (validOuterForm) { // 外层校验通过 this.$refs.innerForm.validate((validInnerForm) => { if (validInnerForm) { // 内层校验通过,提交数据 console.log(this.outerForm); console.log(this.innerForm); } else { // 内层校验不通过 return false; } }); } else { // 外层校验不通过 return false; } }); } } }; </script> ``` 在上面的示例中,外层和内层都使用了`el-form`组件,并且分别定义了自己的数据模型(`outerForm`和`innerForm`)。你可以根据实际需要添加更多的项。 请注意,在提交时,需要先校验外层的有效性,然后再校验内层的有效性。只有当两个都校验通过时,才会提交数据。 希望这个例子对你有所帮助!如果你还有其他问题,请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值