Contact form button to be greyed out before success/failure message

Support
#1

Hi,

We have a contact form 7 on our website that runs X theme.

After the user fills out the contact form, there is a bit of delay before they get the success/failure message. During this time, we would like the form to grey out, change color or something. Otherwise the user thinks the submission did not go through and they click multiple times.

In our other non-xtheme sites, we can see a rotating circle or color change. But in Xtheme there seems to be no indication that the process is going on in the background. Or may be I am unable to see where that setting needs to be turned on.

So, How do we grey out the button after the submit button is clicked? Or some other change in UI? Before the success or failure message pops up?

Regards,
Lazarus

#2

Hey Lazarus,

This is a known issue which is yet to be addressed. Please try adding this code 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 that helps.