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 如何处理网站访客的留言资料