Contact Form 7 – Uncaught TypeError: wpcf7.initForm is not a function

  ajax, contact-form-7, javascript, jquery, wordpress

I updated to WordPress 5.7 and Contact Form 7 v5.4. The new version is not compatible anymore with a js file (line 6 "wpcf7.initForm"), that a previous developer wrote for our theme. Unfortunately I can’t find a way to adapt the code so initForm get’s recognized again. There are several suggestions (like this) with extra functions and I tried to copy them to different lines in the file, but the error won’t disappear. Can someone please tell me, how I can correctly adapt the file to get rid of the error?

jQuery(document).ready(function(n) {

    function t(t, e) {
        var i = n('#quiz-question-templates .quiz-question[data-questionid="' + e + '"]').clone();
        if (t.trigger("add.owl.carousel", i), t.trigger("refresh.owl.carousel"), t.trigger("next.owl.carousel", [1e3]), n(".btn-quiz-answer").off().on("click touch", u), n(".btn-quiz-answer-back").off().on("click touch", s), n(".btn-quiz-answer-reset").off().on("click touch", o), i.find(".wpcf7").each(function() {
            wpcf7.initForm(n(this).find(".wpcf7-form")[0]), this.addEventListener("wpcf7mailsent", function(n) {
                for (var t = null, e = n.detail.inputs, i = 0; i < e.length; i++)
                    if ("contact-email" === e[i].name) {
                        t = e[i].value;
                        break
                    } t && "function" == typeof ga && ga("send", "event", "quiz", "contact", t)
                })
        }), i.hasClass("quiz-solution")) {
            var a = i.find("h3")[0].innerText;
            "function" == typeof ga && ga("send", "event", "quiz", "A", a)
        }
    }

    function e() {
        var t = '<div class="question-log-container">';
        return t += "<h3>Ihre Antworten</h3>", n("#quiz-questions").data("questionlog").forEach(function(e) {
            var i = n('#quiz-questions .quiz-question[data-questionid="' + e.current + '"]'),
            o = i.find("h3")[0].innerText,
            s = i.find('.answers .btn-quiz-answer[data-answer="' + e.answer + '"]')[0].innerText;
            t += '<div class="question-log"><span class="question-log-question">' + o + '</span><br/><span class="question-log-answer"><strong>' + s + "</strong></span></div>"
        }), t += "</div>"
    }

    function i() {
        var t = "",
        e = n("#quiz-questions").data("start-term");
        return e && (t += "Einstiegsseite: " + e + "rnrn"), n("#quiz-questions").data("questionlog").forEach(function(e) {
            var i = n('#quiz-questions .quiz-question[data-questionid="' + e.current + '"]'),
            o = i.find("h3")[0].innerText,
            s = i.find('.answers .btn-quiz-answer[data-answer="' + e.answer + '"]')[0].innerText;
            t += o + ": " + s + "rnrn"
        }), t
    }

    function o(t) {
        t.preventDefault(), n("#quiz-questions").data("questionlog", []), n(".quiz-question-log").html("");
        for (var e = a.find(".owl-item").length, i = e - 1; i > 0; i--) a.trigger("remove.owl.carousel", [i]).trigger("refresh.owl.carousel");
            a.trigger("to.owl.carousel", [0, 0])
    }

    function s(t) {
        t.preventDefault();
        var i = n("#quiz-questions").data("questionlog") || [],
        o = a.find(".owl-item").length;
        i.length > 0 && o > 1 && (i.pop(), n("#quiz-questions").data("questionlog", i), n(".quiz-question-log").html(e()), a.trigger("prev.owl.carousel", [1e3]), setTimeout(function() {
            a.trigger("remove.owl.carousel", [o - 1])
        }, 500))
    }

    function u(o) {
        o.preventDefault();
        var s = n(this).closest(".quiz-question").data("questionid"),
        u = n(this).data("next"),
        r = n(this).data("answer"),
        q = n("#quiz-questions").data("questionlog") || [];
        q.push({
            current: s,
            answer: r
        }), n("#quiz-questions").data("questionlog", q), n(".quiz-question-log").html(e()), n('input[name="contact-questionlog"]').val(i());
        var l = n('#quiz-questions .quiz-question[data-questionid="' + s + '"]'),
        c = l.find("h3")[0].innerText,
        f = l.find('.answers .btn-quiz-answer[data-answer="' + r + '"]')[0].innerText;
        "function" == typeof ga && ga("send", "event", "quiz", "Q: " + c, f), t(a, u)
    }
    var a = n("#quiz-questions").owlCarousel({
        items: 1,
        touchDrag: !1,
        pullDrag: !1,
        mouseDrag: !1
    }),
    r = n("#quiz-questions").data("start-questionid");
    t(a, r)
}(jQuery));

Every help is appreciated.

Source: Ask Javascript Questions

LEAVE A COMMENT