Skip to content
// 严格模式
'use strict';
// 配置项(感谢页URL改为基于当前域名的动态路径)
const FormSubmitConfig = {
thankYouRelativePath: '/thanks/', // 感谢页相对路径(可根据实际需求修改)
redirectDelay: 3000,
successText: '提交成功!我们会尽快与你取得联系',
errorText: '提交失败!请检查表单填写是否正确,或稍后重试'
};
// 获取当前域名拼接完整感谢页URL的工具函数
function getThankYouUrl() {
// window.location.origin 获取当前域名(包含协议+主机名+端口,如https://www.yayangglobal.com)
const currentOrigin = window.location.origin;
// 拼接相对路径得到完整URL
return `${currentOrigin}${FormSubmitConfig.thankYouRelativePath}`;
}
// URL校验工具函数
function isValidUrl(url) {
if (!url || typeof url !== 'string' || url.trim() === '') return false;
try {
const parsedUrl = new URL(url.trim());
return ['http:', 'https:'].includes(parsedUrl.protocol);
} catch (e) {
console.error('URL校验失败:', e);
return false;
}
}
// 表单逻辑初始化核心函数
function initElementorFormLogic() {
// 确保jQuery存在
if (typeof jQuery === 'undefined') {
console.error('jQuery未加载,表单逻辑无法初始化');
return;
}
const $ = jQuery;
// 仅当页面存在Elementor表单时执行
if ($('.elementor-form').length === 0) {
console.warn('当前页面无Elementor表单,无需执行逻辑');
return;
}
console.log('已检测到Elementor表单,开始绑定提交事件');
// ===== 关键优化:兼容Elementor多版本事件名 + 直接监听表单submit事件(备用)=====
// 1. 优先绑定Elementor官方事件(多版本兼容)
const successEvents = [
'elementor/form/submit/success',
'elementor_form_submit_success',
'form.submit.success.elementor'
];
const failedEvents = [
'elementor/form/submit/failed',
'elementor_form_submit_failed',
'form.submit.failed.elementor'
];
// 绑定成功事件(遍历所有兼容事件名)
successEvents.forEach(eventName => {
$(document).off(eventName).on(eventName, '.elementor-form', function(event, response, $form) {
handleFormSuccess(event, response, $form, $);
});
});
// 绑定失败事件(遍历所有兼容事件名)
failedEvents.forEach(eventName => {
$(document).off(eventName).on(eventName, '.elementor-form', function(event, response, $form) {
handleFormFailed(event, response, $form, $);
});
});
// 2. 备用方案:直接监听表单的submit事件(防止官方事件失效)
$(document).off('submit', '.elementor-form').on('submit', '.elementor-form', function(e) {
const $form = $(this);
// 禁用默认提交(仅作为备用,依赖AJAX提交时注释此行)
// e.preventDefault();
// 模拟成功逻辑(测试用,实际使用时删除)
console.log('表单submit事件触发(备用方案)');
$form.find('input:not([type="hidden"]), select, textarea, button[type="submit"]').prop('disabled', true);
setTimeout(() => {
const thankYouUrl = getThankYouUrl();
if (isValidUrl(thankYouUrl)) {
window.location.href = thankYouUrl;
}
}, FormSubmitConfig.redirectDelay);
});
}
// 表单成功处理函数(抽离出来,方便复用)
function handleFormSuccess(event, response, $form, $) {
// 容错校验
if (!$form || !$form.length) {
console.warn('无效表单对象,跳过成功逻辑');
return;
}
console.log('表单提交成功(自定义逻辑触发):', response);
// 禁用表单元素(排除隐藏域)
$form.find('input:not([type="hidden"]), select, textarea, button[type="submit"], input[type="submit"]')
.prop('disabled', true)
.addClass('form-disabled');
// 隐藏表单并显示成功提示
$form.fadeOut(300, function() {
$form.next('.form-success-notice').remove(); // 移除旧提示
$form.after(`
${FormSubmitConfig.successText}
`);
}).fail(() => $form.hide());
// 延迟跳转感谢页(使用动态生成的URL)
const thankYouUrl = getThankYouUrl();
if (isValidUrl(thankYouUrl)) {
setTimeout(() => {
window.location.href = thankYouUrl;
}, FormSubmitConfig.redirectDelay);
} else {
console.error('感谢页URL无效,请检查相对路径配置');
// 恢复表单可用
$form.find('input:not([type="hidden"]), select, textarea, button[type="submit"], input[type="submit"]')
.prop('disabled', false)
.removeClass('form-disabled');
}
}
// 表单失败处理函数(抽离出来,方便复用)
function handleFormFailed(event, response, $form, $) {
// 容错校验
if (!$form || !$form.length) {
console.warn('无效表单对象,跳过失败逻辑');
return;
}
console.log('表单提交失败(自定义逻辑触发):', response);
// 恢复表单可用
$form.find('input:not([type="hidden"]), select, textarea, button[type="submit"], input[type="submit"]')
.prop('disabled', false)
.removeClass('form-disabled');
// 优化错误提示样式
const $errorMsg = $form.find('.elementor-form-message, .elementor-message-error');
if ($errorMsg.length) {
$errorMsg.css({
'background': '#fff2f2',
'color': '#e53e3e',
'border': '1px solid #feb2b2',
'padding': '15px',
'border-radius': '8px',
'box-shadow': '0 2px 4px rgba(229,62,62,0.1)',
'display': 'block'
});
} else {
// 添加自定义错误提示
$form.after(`
${FormSubmitConfig.errorText}
`);
// 3秒后移除自定义错误提示
setTimeout(() => {
$form.next('.form-error-notice').fadeOut(300, function() {
$(this).remove();
});
}, 3000);
}
// 弹出自定义错误提示(可选,可注释)
alert(FormSubmitConfig.errorText);
}
// ===== 确保脚本在页面完全加载后执行 =====
if (document.readyState === 'complete') {
initElementorFormLogic();
} else {
window.addEventListener('load', initElementorFormLogic);
setTimeout(initElementorFormLogic, 1000);
}
// 严格模式
'use strict';
// 配置项(感谢页URL改为基于当前域名的动态路径)
const FormSubmitConfig = {
thankYouRelativePath: '/thanks/', // 感谢页相对路径(可根据实际需求修改)
redirectDelay: 3000,
successText: '提交成功!我们会尽快与你取得联系',
errorText: '提交失败!请检查表单填写是否正确,或稍后重试'
};
// 获取当前域名拼接完整感谢页URL的工具函数
function getThankYouUrl() {
// window.location.origin 获取当前域名(包含协议+主机名+端口,如https://www.yayangglobal.com)
const currentOrigin = window.location.origin;
// 拼接相对路径得到完整URL
return `${currentOrigin}${FormSubmitConfig.thankYouRelativePath}`;
}
// URL校验工具函数
function isValidUrl(url) {
if (!url || typeof url !== 'string' || url.trim() === '') return false;
try {
const parsedUrl = new URL(url.trim());
return ['http:', 'https:'].includes(parsedUrl.protocol);
} catch (e) {
console.error('URL校验失败:', e);
return false;
}
}
// 表单逻辑初始化核心函数
function initElementorFormLogic() {
// 确保jQuery存在
if (typeof jQuery === 'undefined') {
console.error('jQuery未加载,表单逻辑无法初始化');
return;
}
const $ = jQuery;
// 仅当页面存在Elementor表单时执行
if ($('.elementor-form').length === 0) {
console.warn('当前页面无Elementor表单,无需执行逻辑');
return;
}
console.log('已检测到Elementor表单,开始绑定提交事件');
// ===== 关键优化:兼容Elementor多版本事件名 + 直接监听表单submit事件(备用)=====
// 1. 优先绑定Elementor官方事件(多版本兼容)
const successEvents = [
'elementor/form/submit/success',
'elementor_form_submit_success',
'form.submit.success.elementor'
];
const failedEvents = [
'elementor/form/submit/failed',
'elementor_form_submit_failed',
'form.submit.failed.elementor'
];
// 绑定成功事件(遍历所有兼容事件名)
successEvents.forEach(eventName => {
$(document).off(eventName).on(eventName, '.elementor-form', function(event, response, $form) {
handleFormSuccess(event, response, $form, $);
});
});
// 绑定失败事件(遍历所有兼容事件名)
failedEvents.forEach(eventName => {
$(document).off(eventName).on(eventName, '.elementor-form', function(event, response, $form) {
handleFormFailed(event, response, $form, $);
});
});
// 2. 备用方案:直接监听表单的submit事件(防止官方事件失效)
$(document).off('submit', '.elementor-form').on('submit', '.elementor-form', function(e) {
const $form = $(this);
// 禁用默认提交(仅作为备用,依赖AJAX提交时注释此行)
// e.preventDefault();
// 模拟成功逻辑(测试用,实际使用时删除)
console.log('表单submit事件触发(备用方案)');
$form.find('input:not([type="hidden"]), select, textarea, button[type="submit"]').prop('disabled', true);
setTimeout(() => {
const thankYouUrl = getThankYouUrl();
if (isValidUrl(thankYouUrl)) {
window.location.href = thankYouUrl;
}
}, FormSubmitConfig.redirectDelay);
});
}
// 表单成功处理函数(抽离出来,方便复用)
function handleFormSuccess(event, response, $form, $) {
// 容错校验
if (!$form || !$form.length) {
console.warn('无效表单对象,跳过成功逻辑');
return;
}
console.log('表单提交成功(自定义逻辑触发):', response);
// 禁用表单元素(排除隐藏域)
$form.find('input:not([type="hidden"]), select, textarea, button[type="submit"], input[type="submit"]')
.prop('disabled', true)
.addClass('form-disabled');
// 隐藏表单并显示成功提示
$form.fadeOut(300, function() {
$form.next('.form-success-notice').remove(); // 移除旧提示
$form.after(`
${FormSubmitConfig.successText}
`);
}).fail(() => $form.hide());
// 延迟跳转感谢页(使用动态生成的URL)
const thankYouUrl = getThankYouUrl();
if (isValidUrl(thankYouUrl)) {
setTimeout(() => {
window.location.href = thankYouUrl;
}, FormSubmitConfig.redirectDelay);
} else {
console.error('感谢页URL无效,请检查相对路径配置');
// 恢复表单可用
$form.find('input:not([type="hidden"]), select, textarea, button[type="submit"], input[type="submit"]')
.prop('disabled', false)
.removeClass('form-disabled');
}
}
// 表单失败处理函数(抽离出来,方便复用)
function handleFormFailed(event, response, $form, $) {
// 容错校验
if (!$form || !$form.length) {
console.warn('无效表单对象,跳过失败逻辑');
return;
}
console.log('表单提交失败(自定义逻辑触发):', response);
// 恢复表单可用
$form.find('input:not([type="hidden"]), select, textarea, button[type="submit"], input[type="submit"]')
.prop('disabled', false)
.removeClass('form-disabled');
// 优化错误提示样式
const $errorMsg = $form.find('.elementor-form-message, .elementor-message-error');
if ($errorMsg.length) {
$errorMsg.css({
'background': '#fff2f2',
'color': '#e53e3e',
'border': '1px solid #feb2b2',
'padding': '15px',
'border-radius': '8px',
'box-shadow': '0 2px 4px rgba(229,62,62,0.1)',
'display': 'block'
});
} else {
// 添加自定义错误提示
$form.after(`
${FormSubmitConfig.errorText}
`);
// 3秒后移除自定义错误提示
setTimeout(() => {
$form.next('.form-error-notice').fadeOut(300, function() {
$(this).remove();
});
}, 3000);
}
// 弹出自定义错误提示(可选,可注释)
alert(FormSubmitConfig.errorText);
}
// ===== 确保脚本在页面完全加载后执行 =====
if (document.readyState === 'complete') {
initElementorFormLogic();
} else {
window.addEventListener('load', initElementorFormLogic);
setTimeout(initElementorFormLogic, 1000);
}