【问题标题】:Auto-select fields in Contact form 7 based on referral link根据推荐链接自动选择联系表 7 中的字段
【发布时间】:2022-01-14 13:47:06
【问题描述】:

为了得到我想要的,我一直在使用 Aurovrata (Wordpress Contact Form 7 dynamically select dropdown field based on url) 的这个答案。

我的脚本是这样的:

(function($){
$(document).ready(function(){

  //determine the previous page,
  let page = document.referrer, opt='';


  switch(true){
    case page.indexOf('service-b')>0:
      opt='serviceb';
      break;
    case page.indexOf('service-c')>0:
      opt='servicec';
      break;
    case page.indexOf('service-a')>0:
      opt='servicea';
      break;
  }

  $('select[name="select-services"]').find('option[value="'+opt+'"]').prop('selected', 'selected');
})
})(jQuery) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select-services">
 <option value="">select a service</option>
 <option value="servicea">Service A</option>
 <option value="serviceb">Service B</option>
 <option value="servicec">Service C</option>
</select> 

结果是选择了正确的服务一秒钟,然后返回默认值。知道我做错了什么吗?

PS:为了完成它,我在function.php中添加了这个脚本以防止CF7重置表单:

add_action('wpcf7_enqueue_scripts', 'prefix_fix_form_reset');

function prefix_fix_form_reset() {
    $wpcf7 = array();
    wp_localize_script( 'contact-form-7', 'wpcf7', $wpcf7 );
}

【问题讨论】:

    标签: javascript jquery wordpress contact-form-7


    【解决方案1】:

    您的 JS 代码中有额外的括号,但除此之外它还有效。您确定第三个服务的页面引用包含正确的 slug service-c

    选项 A:

    这是一个演示:https://jsfiddle.net/9z5m4syd/2/

    更新 JS 代码:

    $(document).ready(function() {
      // determine the previous page
      // eg. page referrer
      let page = 'http://website.domain/service-c', opt='';
    
      switch(true){
        case page.indexOf('service-b')>0:
          opt='serviceb';
          break;
        case page.indexOf('service-c')>0:
          opt='servicec';
          break;
        case page.indexOf('service-a')>0:
          opt='servicea';
          break;
      }
    // Run this after 1.5 seconds
    setTimeout(function() {
      $('select[name="select-services"]').find('option[value="'+opt+'"]').prop('selected', 'selected');
    }, 1500);
    
    })(jQuery);
    

    选项 B:

    创建自定义表单标签并选择课程服务器端。

    新的表单标签:[courses your-field-name]

    添加到functions.php:

    /**
     * Register a new CF7 form tag.
     * 
     * Use this tag in your form [courses your-field-name]
     */
    add_action( 'wpcf7_init', 'custom_add_form_tag_courses' );
    
    function custom_add_form_tag_courses() {
        wpcf7_add_form_tag( array( 'courses', 'courses*' ), 'custom_courses_form_tag_handler', true );
    }
    
    /**
     * CF7 callback function that parses the form tag.
     */
    function custom_courses_form_tag_handler( $tag ) {
    
        $tag = new WPCF7_FormTag( $tag );
    
        if ( empty( $tag->name ) ) {
            return '';
        }
    
        $custom_select = '';
        $option        = '';
    
        // Retrieve referer from ‘_wp_http_referer’ or HTTP referer.
        $page_referrer = wp_get_referer();
    
        // List of courses.
        $courses = array(
            "Alege cursul",
            "CURS MAKEUP",
            "CURS EXTENSII GENE",
            "CURS STILIST PROTEZIST UNGHII",
            "CURS COSMETICA",
            "CURS MASAJ",
            "CURS DESIGN INTERIOR",
            "CURS FRIZERIE/BARBERING",
            "CURS MANICHIURIST PEDICHIURIST",
            "CURS DECORATOR FLORAL",
            "CURS EPILARE",
            "CURS FOTOGRAFIE",
            "CURS VIDEO",
            "CURS MICRONEEDLING",
            "CURS COAFOR",
            "CURS DE EXTENSII PAR",
            "CURS COLORIMETRIE",
            "CURS CROITORIE",
            "CURS STILISM VESTIMENTAR",
            "CURS CONSTRUCTIE TIPARE",
            "WORKSHOP STILIZARE SPRANCENE",
            "WORKSHOP COMBI DRY MANICURE",
            "WORKSHOP AUTO COAFAT",
            "WORKSHOP IMPLETITURI"
        );
     
        // Loop through all the courses and create option values.
        foreach( $courses as $course ) {
            
            // Generate course slug.
            $slug = sanitize_title( $course );
    
            // Search for course in page referrer.
            $match = stripos( $page_referrer, $slug );
    
            // Check if referrer exists and compare it to the course list.
            if ( ! empty( $page_referrer ) && $match !== false ) {
                $option .= sprintf( '<option value="%1$s" selected="selected">%2$s</option>', esc_html( $slug ), esc_html( $course ) );
            } else {
                $option .= sprintf( '<option value="%1$s">%2$s</option>', esc_html( $slug ), esc_html( $course ) );     
            }
        }
    
        // Add previously generated list of options to the select tag.
        $custom_select = sprintf( '<select name="%1$s" id="%2$s">%3$s</select>', $tag->name, esc_attr( $tag->name . '-options' ), $option );
    
        return $custom_select;
    }
    

    【讨论】:

    • 我错过了 (function($){ 从我的代码开始。
    • 似乎 CF7 在页面加载后重置表单。您可以尝试将选择更新包装在 setTimeout() 中,或者您可以创建自定义表单标签。我会更新我的答案。
    • 在选项 B 中,推荐没有按应有的方式工作。我添加了这个脚本来防止 CF7 休息: add_action('wpcf7_enqueue_scripts', 'prefix_fix_form_reset');函数prefix_fix_form_reset() { $wpcf7 = array(); wp_localize_script('contact-form-7', 'wpcf7', $wpcf7); } 谢谢你的回答!
    猜你喜欢
    • 2023-03-25
    • 2020-05-26
    • 1970-01-01
    • 2020-10-15
    • 1970-01-01
    • 1970-01-01
    • 2019-08-30
    • 2021-12-12
    • 2021-04-23
    相关资源
    最近更新 更多