Contact form 7表单提交跳转WhatsApp即时沟通

Contact form 7表单是Wordpress建站非常熟悉的插件，WhatsApp即时沟通也是外贸常用沟通软件，各有优缺点，二者结合一下，点击提交表格后立即跳转WhatsApp，把原本是跳转感谢页面进行改进，达到“双重保险”策略，特别是针对这种依赖 WhatsApp 的市场，WhatsApp 本身又不能先填写邮箱联系，二者结合一下，又有邮箱又能即使沟通。

表单样式：

表单样式与跳转代码：

[text* your-name placeholder akismet:author "* Your Name"]

[email* your-email placeholder akismet:author_email "* Your-Email"]

[textarea* your-message x5 placeholder "* e.g., Interested in (Product name & Qty); Need latest catalog & price; Or tell us your custom project requirements..."]

[submit "Submit to Chat on WhatsApp"]

* Your details help us prepare your quote faster before we connect on WhatsApp.
* Need to send attachments? Please email us at: <a href="mailto:admin@zhudc.com">admin@zhudc.com</a>. We usually respond within 24 hours.

<script>
jQuery(document).ready(function($) {
    document.addEventListener( 'wpcf7mailsent', function( event ) {
        // 1. 设置基础信息 你的电话（带国家代码 86，不要加 + 号或空格）
        var phone = "86183xxxxxxxx";
        var currentUrl = window.location.href;
        var message = "Hello, I just sent an inquiry from this page: " + currentUrl;
        var whatsappUrl = 'https://wa.me/' + phone + '?text=' + encodeURIComponent(message);

        // 2. 延迟执行跳转
        // Divi 环境下建议保留 2 秒，给用户足够的反馈时间
        setTimeout(function(){
            window.location.href = whatsappUrl;
        }, 1000);
    }, false );
});
</script>

CSS样式代码：

/*wpcf7表单外观*/
.wpcf7-text,.wpcf7-textarea{
  width:100%;
  font-size: 16px !important;
  padding:12px !important;
}
/* 修改 Contact Form 7 提交按钮样式 */
.wpcf7-submit {
    background-color: #25D366 !important; /* WhatsApp 绿色 */
    color: #ffffff !important;           /* 文字白色 */
    border: none !important;
    border-radius: 5px !important;       /* 圆角，可以按需调整 */
    padding: 13px 20px !important;
    font-weight: bold !important;
    transition: all 0.3s ease;
}
/* 鼠标悬停时的加深效果 */
.wpcf7-submit:hover {
    background-color: #128C7E !important; /* 悬停时变成深绿色 */
    cursor: pointer;
}

/* 强制显示 CF7 的加载动画 */
.wpcf7 .ajax-loader {
    display: inline-block !important;
    visibility: visible !important;
    margin-left: 10px;
}

/* 如果想让成功后的绿色边框更明显 */
.wpcf7-mail-sent-ok {
    border: 2px solid #25d366 !important; /* WhatsApp 绿色边框 */
    color: #25d366 !important;
}

兼容性：

大部分主题都兼容，如果提交有异常，可能是主题或插件兼容问题。