Brief background
I had a website in which the forms were configured on the Contact Form 7 plugin. These forms themselves were integrated with Mailchimp. The challenge was this: after a user fills out and submits a certain form, the message should go to the service with a certain tag (Mailchimp tags are the easiest way to organize your audience and tag contacts based on the information you have about them).
Plugin usage
The easiest solution to this task in conjunction with Contact form 7 is to use the Chimpmatic application. It is very convenient because to set additional fields, we just need to go to the form editing page in the admin panel, click on the Chimpmatic tab, fill in the field with the API key and the plugin is ready for use.
The main disadvantage of this plugin is that most of the fields are available to us for use only in the paid version. For the sake of using tags alone, it makes no sense to buy a plugin.
Solution
Then it was decided to generate a form in the Mailchimp service, insert it on the site and arrange it in accordance with the current form. This is what the form itself looks like:
There were no problems with styling. But here’s the nuance. After our form is submitted, the user should see a thank you box:
The form that uses the Contact form 7 thank you window appears when the wpcf7mailsent event fires in the script (fires when the form has been successfully submitted to the server and the mail has been sent to the recipient). Unfortunately, Mailchimp does not provide such functionality in its forms. But, if you look at the code, then in the markup of the form you can find the following construction:
<div id="mce-responses" class="clear">
<div id="mce-error-response" class="response" style="display: none;"></div>
<div id="mce-success-response" class="response" style="display: none;"></div>
</div>We have two containers. One of them id=’mce-error-response’ is used by the form to display the error text. The second id=’mce-success-response’ is for displaying a message about the successful submission of the form. Both containers are initially empty. And since we don’t need to reuse the form after submitting the message, the best option would be to simply bind the appearance of the window to the event that fires when the element changes. Such an event we have is DOMSubtreeModified. The final window appearance script looks like this:
document.querySelector("#mce-success-response").addEventListener("DOMSubtreeModified", function() {
$( '.popup' ).addClass( 'success' );
$( '.popup-inner' ).remove();
});In this example, when the event fires, we add the .success class to the general container with the .popup class and remove the element that wraps our form (.popup-inner).
