Change Background Of Div Once Contact Form 7 Is Submitted

Question

So I'm trying to add a class to the container (.right-side-product-page) and the h2 on a contact 7 form. Here's a link:

https://nameplicity.com/domains/miningaid/

The goal is to change the class so the blue background and gray background become white, but only after an offer is submitted.

I've tried to add CSS and JavaScript, but can't seem to get anything working. Here is the code I've tried to use in the "Additional Settings" section under the Contact Form 7 plugin:

document.addEventListener( 'wpcf7submit', function( event ) {
if ( '19533' == event.detail.contactFormId ) {
var theDropDown = document.querySelector(".right-side-product-page");
theDropDown.classList.add("MyClass");
}, false );

Could anyone provide direction as to what I'm doing wrong?

Answer 1

There's an error in your code: you're missing one curly bracket in there.

Try this:

<script>
document.addEventListener( 'wpcf7submit', function( event ) {
    if ( '19533' == event.detail.contactFormId ) {
        var theDropDown = document.querySelector(".right-side-product-page");
        theDropDown.classList.add("MyClass");
    }
}, false );
</script>

Answer 2

Aside from the error which was mentioned above, you can further complete your solution based on the class added to the wpcp7-response-output block, upon successfully sending the message, the wpcf7-mail-sent-ok class is added. Knowing this, we can utilize these classes with a check, here's an example:

$( document ).ready(function() {
    var outputBlock = $(".wpcf7-response-output");
    var theDropDown = document.querySelector(".right-side-product-page");
    $( ".wpcf7-submit" ).click(function() {
        //Start an interval check after submit has been clicked
        var intervalCheck = setInterval(function () {
            if (outputBlock.hasClass("wpcf7-mail-sent-ok")) {
                // The form has been submitted successfully, set the class to the block to change color
                theDropDown.classList.add("MyClass");
                // Stop running the interval checker after class has been added
                clearInterval(intervalCheck);
            }
        },1000);
    });
});

Answer 3

Try:

document.querySelector('.wpcf7-form').addEventListener('submit', function (ev) {
    if(this['_wpcf7'].value == '19533') {
        document.querySelector(".right-side-product-page").classList.add("MyClass");
    }
});

or

document.querySelector('.wpcf7-form').addEventListener('wpcf7submit', function (ev) {
    if(this['_wpcf7'].value == '19533') {
        document.querySelector(".right-side-product-page").classList.add("MyClass");
    }
}, false);

One of them should work. I believe the issue is that the event wpcf7submit you're listening to does not exist on document. It exists on document.querySelector('.wpcf7-form').

Answer 4

Got it!

Had to put it right under the submit button and encase it in tags. Thank you everyone for your help!!!