Elementor 的 form widget 實在好用，透過所見及所得的方式就可以拉出精美表單，雖然Elementor 已經很貼心地整合很多表單發送後的動作，但還是有些情況並不一定適用，比如說在官網的表單其實是要發送至另一個系統，這些預設程序就無法處理，雖然 Elementor 有提供 API 可以去擴充這些程序，但這些處理程序是表單透過 Ajax 方式發送至後端處理，這種情況，除非目標的系統也開出對應的API端口，就可以順利銜接，但有些時候目標系統並不是我們能控制的，僅能透過傳統的 Http post 方式傳遞表單資料到目標系統，但 Elementor 目前沒有開啟或關閉 Ajax 的選項，一律使用 Ajax，這種特殊的需求就必須要用客製表單處理，光想就覺得麻煩
能不能僅透過Elementor來做精美的RWD表單，但不用它來處理資料
此時我們可以透過 Javascript 來動些手腳，來達成我們預期的目地吧，僅透過 Elementor 來做精美的 RWD 表單，但不用它來處理資料，以下提供 jQuery 版本及純 Javascript 的版本讓大家參考。
jQuery版本
/**
* Elementor form stop ajax
* @author v123.tw
* @link https://v123.tw
* https://stackoverflow.com/a/28375061
* https://github.com/elementor/elementor/issues/4785#issuecomment-758803845
*/
jQuery(function ($) {
const form_id = '#crm_user_login'
form = jQuery(form_id).off()
form.find(':input').each(function(index, value){
let name = $(this).attr('name')
name = String(name).replace('form_fields[','').replace(']','')
$(this).attr('name',name)
})
form.find('button[type=submit]').on('click',function(e){
form.attr('action','https://example.com')
form.attr('method','post')
});
})Javascript
/**
* Elementor form stop ajax
* @author v123.tw
* @link https://v123.tw
*/
document.addEventListener("DOMContentLoaded", function (event) {
const form_id = 'crm_user_login'
var form = document.getElementById(form_id);
var elements = form.querySelectorAll("input,select");
for (var i = 0, element; element = elements[i++];) {
element.name = element.name.replace('form_fields[', '').replace(']', '');
element.id = ''
}
form.replaceWith(form.cloneNode(true));
form = document.getElementById(form_id);
if (form.addEventListener) {
form.addEventListener("submit", processForm);
} else {
form.attachEvent("submit", processForm);
}
function processForm(e) {
if (e.preventDefault) e.preventDefault();
form.action = 'https://example.com';
form.method = 'post';
form.submit();
return false;
}
})https://github.com/elementor/elementor/issues/4785#issuecomment-758803845
https://stackoverflow.com/a/28375061