WordPress网站C7表单高级用法之条件字段

WordPress网站使用最多的表单提交插件无疑是C7,Contact Form 7插件里面已经包含了很多表单样式并且可以自定义样式,但是如果需要用到更高级的功能就不行了,需要借助Conditional Fields for Contact Form 7插件,专属C7的条件字段插件;

默认的C7插件和整合了条件字段表单效果对比:

默认的表单:

    整合了条件字段的表单:

      您需要什么支持?

      您的操作系统:

      输入 安卓iOSLinuxWindows 版本:


      您位于哪里?


      需要在WordPress网站先安装Contact Form 7(C7表单)和Conditional Fields for Contact Form 7(C7专属的条件字段)插件并启用;

      安装后C7表单会多出一个Conditional Fields:

      1660206657 image - WordPress网站C7表单高级用法之条件字段

      如果你是一家维修手机的店铺,需要在WordPress网页中收集客户的问题表单,下面这个用了条件字段的表单就可以帮助到你:

        您需要什么支持?

        您的操作系统:

        输入 安卓iOSLinuxWindows 版本:


        您位于哪里?


        制作这样的条件字段表单需要三个设置:

        完成设置后可以在官方提供的表单测试页面贴入代码进行测试,并且可以实时修改进行预览,另外页面还提供了更多的表单样式功能和样式。

        表单设置

        新建C7表单会有默认的表单代码,在里面设置自己的表单,并且可以看到条件字段组(Conditional Fields Group);

        1660207687 image 1024x466 - WordPress网站C7表单高级用法之条件字段

        点击可以创建字段组,且可以选择隐藏和内嵌功能:

        1660208105 image - WordPress网站C7表单高级用法之条件字段

        条件字段组允许嵌套其他字段组:

        1660207925 image - WordPress网站C7表单高级用法之条件字段

        我们表单条件包含“技术支持”和“销售支持”两个选项,如果选择技术支持,会接着弹出选择“操作系统”和“版本”字段,其中代码中的“first_as_label”标签为表单默认的第一个选项即“-- 选择支持类型 --”,“版本”号则使用了inline内嵌功能;

        表单代码如下:

        <label>您的姓名:<br>[text your-name]</label>
        
        <label>您的邮箱:(*)<br>[email* your-email]</label>
        
        您需要什么支持?<br>[select* support-type first_as_label "-- 选择支持类型 --" "技术支持" "销售支持"]
        
        [group technical-support-selected]
          您的操作系统:<br>[select* operating-system first_as_label "-- 选择操作系统 --" "安卓" "iOS" "Linux" "Windows" "其他"]
          [group os-selected]
        输入 [group os-android inline]安卓[/group][group os-iOS inline]iOS[/group][group os-linux inline]Linux[/group][group os-windows inline]Windows[/group] 版本:<br>[text* version]
          [/group]
          [group os-other-selected]
            <label>输入系统<br>[text* other-os]</label>
            <label>输入版本<br>[text* other-version]</label>
          [/group]
        [/group]
        [group sales-support-selected]
          您位于哪里?<br>[select* continent first_as_label "-- 选择地区 --" "北京" "上海" "广州" "杭州" "深圳" "重庆"]
        [/group]
        <label>消息<br>[textarea comments]</label>
        [submit "提交"]

        条件字段设置

        条件字段主要设置表单选择的逻辑,即:

        如果“support-type”等于“技术支持”这个值,则显示“technical-support-selected”这个字段组;

        如果“operating-system”不等于“空值”和“其他”,则显示“os-selected”字段组,可以输入版本号。

        1660209407 image 1024x345 - WordPress网站C7表单高级用法之条件字段

        字段代码:

        show [technical-support-selected] if [support-type] equals "技术支持"
        show [sales-support-selected] if [support-type] equals "销售支持"
        show [os-selected] if [operating-system] not equals ""
                       and if [operating-system] not equals "其他"
        show [os-android] if [operating-system] equals "安卓"
        show [os-iOS] if [operating-system] equals "iOS"
        show [os-linux] if [operating-system] equals "Linux"
        show [os-windows] if [operating-system] equals "Windows"
        show [os-other-selected] if [operating-system] equals "其他"

        点击“Text mode”可以转化模式输入代码。

        1660209474 image 1024x255 - WordPress网站C7表单高级用法之条件字段

        邮件设置

        邮件设置为客户提交表单后你邮件中看到的内容:

        1660209580 image - WordPress网站C7表单高级用法之条件字段

        如果消息正文中输入的是代码,需要勾选“使用HTML内容类型”,这样收到邮件就不会乱码。

        1660209606 image - WordPress网站C7表单高级用法之条件字段

        里面包含表单选项的字段组。

        邮件代码:

        <table>
        <tr><td>您的姓名</td><td>[your-name]</td></tr>
        <tr><td>您的邮箱</td><td>[your-email]</td></tr>
        <tr><td>支持类型</td><td>[support-type]</td></tr>
        [technical-support-selected]
          <tr><td>操作系统</td><td>[operating-system]</td></tr>
          [os-selected]
            <tr><td>版本</td><td>[version]</td></tr>
          [/os-selected]
          [os-other-selected]
            <tr><td>其他系统</td><td>[other-os]</td></tr>
            <tr><td>其他版本</td><td>[other-version]</td></tr>
          [/os-other-selected]
        [/technical-support-selected]
        [sales-support-selected]
          <tr><td>地区</td><td>[continent]</td></tr>
        [/sales-support-selected]
        <tr><td>消息</td><td>[comments]</td></tr>
        </table>
        

        三个部分完成后,就可以形成一个完整的条件表单了,上述表单只是众多样式中的一种,你可以发挥想象设置更多功能的表单或在之前提到的测试页面看到更多样式的表单,当然也可以参考官方指南教程进行设置。

        这里也可以看到上述三个部分的代码并进行预览和提交测试。

        1