Author: Stasyuk Eugene 93 Tags: 13.12.2022

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.

chimpmatic

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:

form

There were no problems with styling. But here’s the nuance. After our form is submitted, the user should see a thank you box:

thanks

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).

Other articles

How to pull svg content from img tag? Option 2 svg

How to pull svg content from img tag? Option 2

How to pull svg content from img tag? Option 2

If we use php in development, then extracting the svg content from the image becomes as easy as shelling pears. To do this, we just need to have a path to the image. In this case, the file_get_contents() function comes to our aid. You can read more about it here. Approximately using this function would […]

Wp Favs – plugin manager for WordPress

Wp Favs – plugin manager for WordPress

Wp Favs – plugin manager for WordPress

When you create WordPress templates on a regular basis, you come across one procedure that takes up some of your time – downloading and activating plugins. The WP Favs plugin solves this problem quite successfully. You simply create a list of plugins that you use regularly and then bulk upload them to your site. The […]