Blogger中表单跳转WhatsApp按钮无法触发问题求助

你的代码在Blogger中失效主要有以下几个核心问题：

1. 语法错误导致JS执行中断 #

原代码中if判断语句后未用花括号包裹代码块，导致后续的window.open和else分支逻辑完全混乱，浏览器会抛出语法错误并终止脚本执行。

2. 表单元素与JS逻辑不匹配 #

JS代码里判断了input_phone和input_product的值，但HTML中根本没有这两个输入框，这两个变量永远为空，导致if条件永远不成立，自然不会触发跳转。

3. Blogger环境下的jQuery冲突风险 #

Blogger模板可能自带其他JS库，会覆盖$符号，导致jQuery无法正常调用。

修正后的完整代码 #

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <style>
    .panel{border:none;}
    
    .panel-heading
    {
        border:1px #212121 !important;          
        border-radius: 0px;
        background-color: #212121 !important; 
        color: #fff !important; 
        padding:20px 15px !important;
        font-size: 16px;
    }
    
    .btn-success {
        color: #fff;
        background-color: #5cb85c;
        border-color: #4cae4c;
        font-size: 14px;
        font-weight: 600;
        padding: 8px 14px;
    }
  </style>
</head>
<body style='background-color:transparent;'>
    <div class="row">
        <div class="panel panel-success">
            <div class="panel-body">
            
                <div class="col-md-6 form-group">
                    <input type="text" name="name" class="form-control" placeholder="Name* :" id="name">
                </div>
                
                <div class="col-md-6 form-group">
                    <input type="text" name="company" class="form-control" placeholder="Company/Organization* :" id="company">
                </div>
                
                <!-- 补充缺失的Phone输入框 -->
                <div class="col-md-6 form-group">
                    <input type="text" name="phone" class="form-control" placeholder="Phone* :" id="phone">
                </div>
                
                <!-- 补充缺失的Product输入框（不需要可删除，同时修改JS判断条件） -->
                <div class="col-md-6 form-group">
                    <input type="text" name="product" class="form-control" placeholder="Product* :" id="product">
                </div>
                
                <div class="col-md-12 form-group">
                    <textarea name="product_description" class="form-control" rows="3" id="product_description" placeholder="Message* :"></textarea>
                </div>
                
                <div class='col-md-12'>
                    <div id="text-info"></div>
                    <div class="form-group">
                        <button align='center' class="btn btn-success sending">Send Message</button>
                    </div>
                </div>
                
            </div>
        </div>
<script>
// 解决jQuery冲突问题
jQuery.noConflict();
jQuery(document).on('click','.sending', function(){
    /* 表单输入值 */
    var input_name                  = jQuery("#name").val(),
        input_company               = jQuery("#company").val(),
        input_phone                 = jQuery("#phone").val(),
        input_product               = jQuery("#product").val(),
        input_product_description   = jQuery("#product_description").val();
 
    /* WhatsApp配置 */
    var walink      = 'https://web.whatsapp.com/send',
        phone       = '6282200000000',
        text        = '/ Website Contact Form',
        text_yes    = 'Redirecting you to WhatsApp',
        text_no     = 'Please fill this form to start your booking.';
 
    /* 移动端适配 */
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        walink = 'whatsapp://send';
    }
 
    // 修复if语句语法，用花括号包裹代码块
    if(input_name != "" && input_phone != "" && input_product != ""){
        /* 拼接WhatsApp链接 */
        var checkout_whatsapp = walink + '?phone=' + phone + '&text=' + encodeURIComponent(text) + '%0A%0A' + 
            'Name: ' + encodeURIComponent(input_name) + '%0A' +
            'Perusahaan/Organisasi: ' + encodeURIComponent(input_company) + '%0A' +
            'Message: ' + encodeURIComponent(input_product_description);
            
        /* 打开WhatsApp窗口 */
        window.open(checkout_whatsapp,'_blank');
        document.getElementById("text-info").innerHTML = '<div class="alert alert-success">'+text_yes+'</div>';
    } else {
        document.getElementById("text-info").innerHTML = '<div class="alert alert-danger">'+text_no+'</div>';
    }
});
</script>
</body>

额外优化说明 #

• 补充了缺失的phone和product输入框，确保JS判断条件能正常触发；若不需要product字段，可删除对应的HTML和JS里的判断条件。
• 使用jQuery.noConflict()避免Blogger模板中其他JS库与jQuery的冲突，同时将所有$替换为jQuery。
• 对URL中的文本内容使用encodeURIComponent()编码，避免特殊字符导致的URL解析错误。
• 修复了if语句的语法错误，用花括号包裹代码块，确保逻辑分支正确执行。

内容的提问来源于stack exchange，提问作者Riyandi Karlus