WordPress / CF7 – Customising the Contact Form 7 ajax loader gif, depending on location

2 Views

I am using the Contact Form 7 plugin on a web site, which has a contact form in the footer of every page and also a contact form in the main area of a dedicated Contact page.

I know how to customise the ajax loader gif in CF7…

Read More

function my_wpcf7_ajax_loader () {
return get_stylesheet_directory_uri() . '/images/my-loader-image.gif';
}
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');

…but my problem is that I need to specify two different loader images – one for the footer form and one for the Contact page form. (The reason for this is because one form is on a white background and the other is on a red background, and despite experimenting with different loader gifs I don’t think it is possible to have a loader gif that looks good on both.)

Post Views: 2

Related posts

Leave a Reply

4 comments

  2. As loading image is an img element with src attribute, css methods will not be helpful.
    It would be required to change src attribute of img tag through JavaScript and without modifying the core js of contact 7 form plugin (to allow plugin upgrades in future), I have come with following JavaScript solution to apply this change by bruteforce method.

    (function($) {
    setInterval(function() {
        if(typeof $.fn.wpcf7InitForm != "undefined") {
            //Contact Form 7 is loaded and initialized
            $loaderImage = $("#wpcf7-f52-o2 img.ajax-loader"); // modify your selector accordingly
            if(!$loaderImage.data("pathChanged")) {
                $loaderImage.attr("src", "ALTERNATIVE_IMAGE_PATH");
                $loaderImage.data("pathChanged", true);
            }
        }
    }, 2000);
})(jQuery);

    Though it may not be the best way, See if it helps.

  3. I read an article with a solid solution for your problem. They gave this solution:

        // Change the URL to the ajax-loader image
function change_wpcf7_ajax_loader($content) {
    if ( is_page('contact') ) {
        $string = $content;
        $pattern = '/(<img class="ajax-loader" style="visibility: hidden;" alt="ajax loader" src=")(.*)(" />)/i';
        $replacement = "$1".get_template_directory_uri()."/images/ajax-loader.gif$3";
        $content =  preg_replace($pattern, $replacement, $string);
    }
    return $content;
}
add_filter( 'the_content', 'change_wpcf7_ajax_loader', 100 );

    link to the article here:

  4. Note: We’re using a heavily modified twenty twenty theme and NONE of these solutions worked. Tried them all. Updated to latest version of plugin, still the same issue. Can’t disabled plugins one at a time and test by practical means because there are dozens and because we need the ones that we have.