elementor remove from events

elementor 表單功能真的很好用,已經足以應付大部分的表單需求,官方也陸續推出表單發送後的相關動作,讓大家點點面板做做設定就可以開箱即用,真的足以應付大部分表單的使用需求

elementor 提交後棟做設定

當然除了發送電子郵件外,表單也有其他的使用場景,有可能需要把表單資料發送到指定網站,比如說公司的 CRM 來收集顧客資料等等,針對這需求 Elementor 也提供 Webhook 這個動作,Post表單資料到自訂網址的功能,也是點點滑鼠就能改變,其實非常方便

elementor Webhook

Elementor 為了要讓大家方便使用,將表單這個小工具進行標準化,所有的表單發送行為統一透過 Ajax 發送至後端處裡,再回傳結果於前端,顯示成功與失敗訊息,但網站需求千奇百怪,還有任性的客戶,就是堅持不要使用預設的訊息呈現方式,或是非通用API 奇奇怪怪的格式,總是還是有需要自己去客製表單動作的情況,這時候你可能希望她就是一個單純的表單就好,再交給前端程式去控制就好,但似乎不能這樣做,於是寫了段,可以把 elementor 產生出的表單事件都移除,然後單純當成表單產生器使用,再自己去定義表單發送後的動作,

add_action('wp_footer',function(){
	?>
	<script>
	jQuery(document).ready(function () {
		// 清除所有表單預設動作
		const form = jQuery('.elementor-form')
		const wrap = form.parent()
		wrap.html(form)
		const new_form = jQuery('.elementor-form')
		new_form.submit(function (e) { 
			e.preventDefault();
			let data = {
				uuid: new_form.find('[name="form_fields[token]"]').val(),
				rnam: new_form.find('[name="form_fields[name]"]').val(),
				rmob: new_form.find('[name="form_fields[tel]"]').val(),
				reml: new_form.find('[name="form_fields[email]"]').val(),
				sex: new_form.find('[name="form_fields[sex]"]').val(),
				utm: window.location.search || ''
			}
			console.log(data)
			console.log('api_url',new_form.find('[name="form_fields[api_url]"]').val())
			console.log('token',new_form.find('[name="form_fields[token]"]').val())
			// return;
			jQuery.ajax({
				url: new_form.find('[name="form_fields[api_url]"]').val(),
				type: 'post',
				crossDomain: true,
				data: JSON.stringify(data),
				contentType: "application/json; charset=utf-8",
				traditional: true,
				success: function (data) {
					console.log('respons',data)
					if(data.code===200&&data.rs==="OK"){
						window.location.href = "./thank-you/";
					}else{
						alert(data.msg);
					}
				},
				error: function(errMsg) {
					console.log(errMsg)
				}
			});
		});
	});
	</script>
	<?php
},99);

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料