Contact form 7 adding a loading gif

[ariane]

Hi,

I am using contact form 7 on my site, I have a submit button and would like to add a custom loading gif that shows in between pressing the submit button and the successful submission message. Is there a way of adding one?

Thanks,
Ariane

[nico]

Hi @ariane,

Thanks for writing in.

I could not guarantee that we could help you with this because it is beyond the scope of our support. However we could give it a try if it is an easy work.

Would you mind sharing us a URL where it shows something like what you want to achieve so we could check if we could help you to replicate it.

Thanks for understanding.

[ariane]

Hey @nico,

No problem i’ll have a hunt and see what I can find. I mainly wanted to confirm that it was possible and see if you had an tested method of adding one. If you can confirm that would be great,

Thanks,
Ariane

[nico]

Hi @ariane,

Upon searching further, X disabled the loading GIF of contact form 7 due to performances issues.

You can re enabled it again by adding the code below in your functions.php.

add_action('wp_head', 'add_loader_gif');

function add_loader_gif() {
  echo '<style>.wpcf7 .ajax-loader{background-image: url('. plugins_url() .'/contact-form-7/images/ajax-loader.gif);visibility:hidden;display:inline-block;width:16px;height:16px;border:none;padding:0;margin:0 0 0 4px;vertical-align:middle}.wpcf7 .ajax-loader.is-active{visibility:visible}</style>';
}

Hope it helps.

Let us know how it goes.

Thanks.

[ariane]

Oh wicked thanks @nico i will give that a try

[thai]

Let us know how it goes!

[ariane]

Hey @thai @nico,

I can’t seem to get it to work (highly possible I have messed up the order somehow I am not very familiar with PHP). I have a child theme installed and have added the code to the functions file, I have a google tag in there too which is working fine. It saved fine and the form still works but no loader showing, any ideas? code below (when i pasted the code it removed the google tag but its where you would expect after the ?> and closed with a script end tag)

Thanks,
Ariane

add_action(‘wp_head’, ‘my_mixpanel_tracking’);

function my_mixpanel_tracking() {

?>

add_action(‘wp_head’, ‘add_loader_gif’);

function add_loader_gif() {
echo ‘.wpcf7 .ajax-loader{background-image: url(’. plugins_url() .’/contact-form-7/images/ajax-loader.gif);visibility:hidden;display:inline-block;width:16px;height:16px;border:none;padding:0;margin:0 0 0 4px;vertical-align:middle}.wpcf7 .ajax-loader.is-active{visibility:visible}’;
}

<?php }

[christian]

Hey @ariane,

Please remove your other additional functions then add the code given previously for troubleshooting purposes. If that doesn’t help, please give us access to your WordPress admin in a Secure Note.

Thanks.

[ariane]

hey @christian_y

I have removed the other custom function and added the code sent through for the contact form 7 loader, I didn’t work unfortunately. It would be great if you could have a look, I will send you login details in a secure note.

Thanks, Ariane

[ruenel]

Hello There,

I was able to check your site and child theme’s functions.php file. It seems that you have remove some parts of the code. I also tested the form and the loading gif is already working as shown in my screenshot.

Well anyway, if you would like to add back the other parts of your code, please make sure it would be like this:

// Mix Panel Tracking Code
// =============================================================================
add_action('wp_head', 'my_mixpanel_tracking');
function my_mixpanel_tracking() { ?>

   <!-- Add your tracking code here -->

<?php }
// =============================================================================


// Add loading gif to contact form
// =============================================================================
add_action('wp_head', 'add_loader_gif');
function add_loader_gif() {
  echo '<style>.wpcf7 .ajax-loader{background-image: url('. plugins_url() .'/contact-form-7/images/ajax-loader.gif);visibility:hidden;display:inline-block;width:16px;height:16px;border:none;padding:0;margin:0 0 0 4px;vertical-align:middle}.wpcf7 .ajax-loader.is-active{visibility:visible}</style>';
}
// =============================================================================

I have grouped the lines to avoid any confusions when you add or remove something from the code.

Hope this helps.

[ariane]

Hey @RueNel, thanks so much thats great and very helpful

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!