WordPress

WordPress强大的联系表单Contact Form 7使用与演示

LensNews

最近帮一位台湾的朋友设计了一个关于母亲节活动的网页,需要对用户进行调查,就使用到Contact Form 7来实现联系表单配置。

Contact Form 7 是一个使用简单的Wordpress联系表单插件,简单但灵活性高,可以生成多个联系表单,支持通过标记自定义邮件或表单内容的显示,Ajax提交和 jQuery表单插件支持,可结合Akismet过滤垃圾邮件,同时也支持CAPTCHA反垃圾邮件,表单域元素支持各种最常见的:文本(域与区)、邮箱、链接、电话、数字(选值框与滑动选值)、单选框、复选框、下拉菜单、CAPTCHA等。Contact Form 7强大、简单而灵活,但不是万能的,地址需要使用下拉式菜单,而Contact Form 7只有实现单独的下拉式菜单,不能关联,所以只有通过jQuery来实现区域的下拉式选择。

网上有很多关于Contact Form 7的文章,绝大多数是介绍,一点都不实用,但确实没有什么好写的教程,使用起来都一目了然,没有难度。

首页我们在WP后台搜索Contact Form 7安装即可,启用后插件会自动检测WP的语言来匹配,所以不用担心汉化,同时插件默认已经创建了一个表单,如下图:Wordpress强大的联系表单Contact Form 7使用与演示
生成标签:

以文本域为例,点击上图右侧中的“文本域”,弹出“文本域”的编辑框,如下图:
Wordpress强大的联系表单Contact Form 7使用与演示
这些选项一目了然,重要的是需要把[text your-name placeholder "萨龙龙"]这段代码添加到左侧的“表单”中,再把[your-name]代码添加到下图的“邮件正文”中。
Wordpress强大的联系表单Contact Form 7使用与演示
其它的标签使用都是一样,生成一个标准的联系表单非常简单的就实现了,台湾地区下拉式菜单是通过jQuery插件来实现。如需添加CAPTCHA验证码标签,需要安装Really Simple CAPTCHA插件,没有安装,在前台页面会提示安装。
Contact Form 7演示站点

(0)
Loading收藏(0)

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

LensNews

热评文章

发表评论

CAPTCHA
*

评论: 12 条评论,访客:7 条,博主:5 条

  • 夏天了
    夏天了 发布于:  回复

    这个插件唯一的缺点就是不能自定义CSS,这个问题很苦恼。 想优化一下输入框等都不行。

    • 萨龙龙
      萨龙龙 发布于:  回复

      似乎插件本身没有定义样式,有定义也是简单的,样式都是通过自定义来实现。

      • 夏天了
        夏天了 发布于:  回复

        求教程。

        • 萨龙龙
          萨龙龙 发布于:  回复

          这还需要教程,直接在主题样式文件中写就可以了。

          • 夏天了
            夏天了 发布于: 

            试过了,然并卵。

  • aunsen
    aunsen 发布于:  回复

    一直在使用的插件,不过一直停留在最基本的形态,哈哈

    • 萨龙龙
      萨龙龙 发布于:  回复

      这个确实很实用,很强大。

  • 网站优化
    网站优化 发布于:  回复

    挺强大的。。可以一用的。。

  • 顾陌博客
    顾陌博客 发布于:  回复

    主题挺好看的,还有交互式设计

  • openneed
    openneed 发布于:  回复

    Contact Form 7 不是重点,重点是演示效果确实不错。

    • 萨龙龙
      萨龙龙 发布于:  回复

      哈哈,因为Contact Form 7的强大,演示效果才很不错。