根据推荐链接自动选择联系表单 7 中的字段

2024-05-25

我一直在使用 Aurovrata 的这个答案(WordPress联系表单7根据url动态选择下拉字段 https://stackoverflow.com/questions/63251548/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 );
}

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

选项A:

这是一个演示:https://jsfiddle.net/9z5m4syd/2/ 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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

根据推荐链接自动选择联系表单 7 中的字段 的相关文章

随机推荐