Webflow ActiveCampaign Integration

wf-ac-integrate.js

// set an id of 'subscribe' on the form element in Webflow
// add an embedded object that contains hidden inputs with the same data
// that ActiveCampaign generates from their form builder

document.getElementById('subscribe').onsubmit = function (event) {
    try {
        // hide previous errors
        this.closest('.w-form').querySelector('.w-form-fail').style.display = 'none';

        // jsonp nastiness to account for an inability to configure CORS origins in activecampaign 😠
        // the script that is loaded will call window._show_thank_you() and window._show_error()
        let s = document.createElement("script");
        let sp = new URLSearchParams(new FormData(this));
        s.src = "https://doequalsglory.activehosted.com/proc.php?jsonp=true&" + sp.toString();
        document.body.appendChild(s);
    } catch (err) {

    }

    // prevent propagation to Webflow default submission behavior
    event.stopPropagation();
    return false;
}

window._show_thank_you = function (id, message, trackcmp_url) {
    // find form with hidden element with u=id
    try {
        // show thank you
        document.querySelector("input[value='" + id + "']").closest('.w-form').querySelector('.w-form-done').style.display = 'inherit';
        // hide form
        document.querySelector("input[value='" + id + "']").form.style.display = 'none';
    } catch (err) {

    }
};

window._show_error = function (id, message, html) {
    // find form with hidden element with u=id
    try {
        // show error
        let msg = document.querySelector("input[value='" + id + "']").closest('.w-form').querySelector('.w-form-fail');
        msg.innerHTML = message;
        msg.style.display = 'inherit';
    } catch (err) {

    }
};