Stop CF7 Multiclick

How do I use the plugin?

1. Add the following shortcode on the same WP page as you placed the CF7 form shortcode: [cf7multiclick]. This will “pause” interaction with the submit button, preventing clicks until the form has finished submitting.
2. Add the following callback to the additional settings of the CF7 form itself: on_submit: window.cf7multiclick.reactivate();

By default, both intercepts target the submit button using the selector .wpcf7-submit by default, which is the default CF7 class on the submit button, but if you have multiple forms or different classes/ids/etc, you can specify the selector like:

[cf7multiclick selector=".wpcf7-submit"]
on_submit: window.cf7multiclick.reactivate('.wpcf7-submit');

How do I style the “in-process” form?

You can provide a better visual indication that your form is in the process of submitting by using the “temporary” form class of .cf7-pending, like:

    <style>
        .cf7-pending { opacity:0.5; }
    </style>

My form is still triggering multiple times, what do I do?

First of all, inspect the submit button to discern what selector you should use to specify it. You can use your browser developer tools, or if you customized it via the CF7 interface you can look in the form admin. If you have an id on the button like my-submit, you can use that in the shortcode as well as the reactivate function like:

    [cf7multiclick selector="#my-submit"]
    on_submit: window.cf7multiclick.reactivate('#my-submit');

This really is only relevant if you’ve manually entered the HTML for the button — the CF7-generated “shortcode” should have the expected default class of .wpcf7-submit already, in which case you wouldn’t need to specify the selectors for the callbacks.

What if it it breaks other jQuery plugins, like easing?

I came across an instance where the shortcode was being called in a modal popup, which loaded content via ajax. Since it was in a new request, the plugin script’s dependency on jQuery caused it to load jQuery (as it should), but because this happened after the rest of the page was already loaded it injected jQuery again, thus overwriting the jQuery object and breaking other jQuery plugins.

The solution is to tell the shortcode which script to load or use, and then call the shortcode in two separate places.

First, tell the shortcode to not use the script function (only loading the plugin script). Put this in the regular page:

    [cf7multiclick use_script="false"]

Then, tell the shortcode to not load the script (and thus dependencies). Put this in the modal:

    [cf7multiclick load_script="false"]

How do I do XYZ?

Coming soon!

0.1

• inception!

0.2

plugin + javascript

0.3

live testing, readme

0.4

shortcode attributes to conditionally load/use scripts