优化WordPress表单插件 Contact form 7介绍及拓展高级功能实现和部分表单框架样式

什么是Contact form 7

首先  Contact form 7 插件是一款免费的WordPress表单插件,用于给访客填写表单、收集信息功能。利用配合MailChimp(国外邮件营销工具)亦可实现邮件订阅功能, 由于Contact Form7插件的强大,也可以实现自动给用户发送邮件(可包含文件附件),配合Contact Form CFDB7插件可记录用户表单填写信息(Contact form 7插件默认是不会保存这些内容的,它只会发送邮件发给你 );配合Redirection for Contact Form 7 插件也实现用户提交表单后跳转至自定义url。可用于记录跳转参数便于运营数据参考,这款插件还可以将用户填写的信息传递到url,以实现简单的跨页面传参呈现用户信息。

总结一下配合使用的插件

由于Contact form 7 轻量迷你且免费,所以很多功能的实现需要配合其他辅助插件使用
如下:(不提供插件下载,这些基本后台都可以搜索得到)

  • Contact form 7 插件:Contact form 7
  • 配合同步到MailChimp:Contact Form 7 Extension For Mailchimp
  • 配合记录用户填写的表单:Contact Form CFDB7
  • 配合提交后跳转url和链接传参:Redirection for Contact Form 7
  • 配合弹窗插件:JetPopup (内附多套样式,便于参考或修改)
  • 推荐好用的页面构建器: Elementor

创建完表单如何实现插入到页面呢?

非常简单,Contact form 7新建表单后会生成一串短代码,将短代码插入到文章相应位置即可。如下图:

优化WordPress表单插件 Contact form 7介绍及拓展高级功能实现和部分表单框架样式

当然,配合上边推荐的Elementor元素插件(页面构建器),可以通过Elementor内在模块快捷插入Contact form 7表单。

如果你想实现弹窗让访客提交表单信息,实际上你只需要借助别的插件弹窗,弹窗内容插入Contact form 7表单的短代码即可实现。反正就是一句话,想以什么方式呈现,就把短代码放到相应位置即可。弹窗功能可以使用Elementor插件实现。

Contact form 7进阶操作

Contact form 7插件提供了非常多的内置函数字段以帮助我们拓展功能,我们可以利用这些来收集访客 ip 浏览器ua  提交页面等。

列举几个常用的字段:

  • 用户表单信息(默认情况字段):[your-email]
  • 提交用户ip:[_remote_ip]
  • 提交时间:[_time] [_date]
  • 提交用户浏览器信息:[_user_agent]

如何在表单内收集用户上传文件并通过email邮件附件发送给我们?

可以利用表单内的插入文件标签,实现前端用户文件上传。

优化WordPress表单插件 Contact form 7介绍及拓展高级功能实现和部分表单框架样式

要实现自动发送给我的email,只需要将[file 自定义字段名]表单填写到mall项(就是用户提交表单后发送email配置) 的File attachments内即可。如下图:

上边这一串是 前边所定义的字段,这里插件帮你总结出来,方便你插入标签。

优化WordPress表单插件 Contact form 7介绍及拓展高级功能实现和部分表单框架样式

另外提一下,如果你想利用Contact form 7插件在用户填写完表单后给他发送邮件,可以点击下边的 Mail(2) 这里的意思就是多开一项发送的邮件。但他是可独立设置的。如图:

本地附件字段格式:

[your-file][your-another-file]
uploads/2020/07/zmki.pdf

优化WordPress表单插件 Contact form 7介绍及拓展高级功能实现和部分表单框架样式

插件的函数标签 官方还有很多,这里暂且只写出了这么多,有兴趣可以去官网文档了解一下: Special mail-tags

下边提供一些比较常见的表单结构(共110套),使用方法如下

  • 10套表单在线演示 demo: www.hunktest.com/contact-form-7
  • 本文提供的表单代码为了方便快速创建表单结构,如需要外观比较完美展现  还需要自己一定动手能力。
  • 在安装好的contact form7的WordPress中新建表单,然后把下面的表单代码复制进去。
  • 下列的表单为了美观基本上都有自己的css,需要你引入到使用的页面。比如放到主题的style.css内
  • 部分表单 字段比默认的多,所以在你做好表单之后。将表单内多出的字段复制到 邮件发送项,避免用户填写完之后无法接收到。
  • 另外,部分按钮由于css没有给他定义颜色,会根据你的主题默认颜色呈现。

表单常见元素css修改 类名称参考 示例:

输入框高度

.wpcf7-form-control-wrap input{height:30px!important;}

输入框外部下边距

.wpcf7-form-control-wrap textarea{height:100px!important;}

信息框高度

.wpcf7 p{margin-bottom:10px!important;}

可以快捷在插件类写入css,不过有时候不会生效,插件原因不生效可以丢到主题内的样式表里边。优化WordPress表单插件 Contact form 7介绍及拓展高级功能实现和部分表单框架样式

示例表单开始:

表单编号CF71优化WordPress表单插件 Contact form 7介绍及拓展高级功能实现和部分表单框架样式

表单代码:

<div class="hunkcf71"><p class="cf7-title" style="font-size:25px;"><i class="fa fa-envelope-o"></i> We will answer your email shortly!</p><p>[text* your-name placeholder "Your name*"]</p>
<p>[email* your-email placeholder "Email Address*"]</p>
<p>[text your-subject placeholder "Your website*"]</p>
<p>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p>[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >imhunk</a></div>
</div>

CSS代码:

.nodisplay{display:none!important;}

表单2号:优化WordPress表单插件 Contact form 7介绍及拓展高级功能实现和部分表单框架样式

表单代码:

<div class="hunkcf72"><p class="cf7-title" style="font-size:25px;"><i class="fa fa-envelope-o"></i> We will answer your email shortly!</p><p><div class="outer"><div class="cf7part onethird"><div class="inner">[text* your-name placeholder "Your name*"]</div></div></div>
<div class="outer"><div class="cf7part onethird"><div class="inner">[email* your-email placeholder "Email Address*"]</div></div></div>
<div class="outer"><div class="cf7part onethird"><div class="inner">[text your-subject placeholder "Your website*"]</div></div></div></p>
<p>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p>[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >imhunk</a></div>
</div>

CSS代码:

.onethird{width:33.33333333333%;float:left!important;}
.outer{margin:0 -10px;}
.inner{padding:0 10px;}.outer{margin:0 -10px;}
.cf7part{float:left;margin-bottom:20px;}
.nodisplay{display:none!important;}
@media only screen and (max-width: 640px)
{.onethird{width:100%!important;}}

表单3号:优化WordPress表单插件 Contact form 7介绍及拓展高级功能实现和部分表单框架样式

表单代码:

<div class="hunkcf73"><p class="cf7-title" style="font-size:25px;"><i class="fa fa-envelope-o"></i> We will answer your email shortly!</p><p><div class="outer"><div class="cf7part onehalf"><div class="inner">[text* your-name placeholder "Your name*"]</div></div></div>
<div class="outer"><div class="cf7part onehalf"><div class="inner">[email* your-email placeholder "Email Address*"]</div></div></div></p>
<p>[text your-subject placeholder "Your website*"]</p>
<p>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p>[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >imhunk</a></div>
</div>

CSS代码:

.onethird{width:33.33333333333%;float:left!important;}
.onehalf{width:50%;float:left!important;}
.outer{margin:0 -10px;}
.inner{padding:0 10px;}.outer{margin:0 -10px;}
.cf7part{float:left;margin-bottom:20px;}
.nodisplay{display:none!important;}
@media only screen and (max-width: 640px)
{.onethird,.onehalf{width:100%!important;}}

 

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

MC百科 Wordpress 优化WordPress表单插件 Contact form 7介绍及拓展高级功能实现和部分表单框架样式 https://www.mcbke.com/wordpress-plugin-contact-form-7.html

科技迷、外设控、Minecraft爱好者,科技改变生活!

常见问题

相关文章

评论
暂无评论
优化WordPress表单插件 Contact form 7介绍及拓展高级功能实现和部分表单框架样式-海报

分享本文封面