Elementor form 停用 Ajax ,Js 自訂發送動作

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

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