「Contact Form 7」はWordPressで簡単にお問い合わせフォームを作ることが出来る人気プラグイン。
このプラグインの特徴として、送信ボタンをクリックしたらクルクルと回るローディング画像が表示されるようになっています。
しかし、このローディング画像がデザイン性を損なう場合、消したいなと思ったことがある人もいるのではないでしょうか。

この記事では「Contact Form 7」で送信ボタンをクリックしたときに表示されるローディング画像を消す方法をご紹介したいと思います。

実装方法

まずは手っ取り早く結論から。

「Contact Form 7」で送信ボタンをクリックした時に表示されるローディング画像を消すには以下のCSSを追加します。

wpcf7-spinner {
    visibility: hidden !important;
}

もしくは

wpcf7-spinner {
    display: none;
}

どちらかをテーマのCSS、もしくはテンプレートファイルに直接指定するようにします。

間違ってもプラグインの中のstyle.cssに直接指定することはしないようにしましょう。「Contact Form 7」をアップデートするたびにこのCSSを追加しないといけなくなってします。

Contact Form 7のローディング画像の仕組み

ここからは「Contact Form 7」で送信ボタンをクリックした後に表示されるローディング画像の仕組みをご紹介します。

「Contact Form 7」で送信ボタンをクリックした後に表示されるローディング画像は以下のHTMLで作られています。

<span class="wpcf7-spinner"></span>

このHTMLタグは送信ボタンのすぐ後に以下のような組み合わせで配置されています。

<input class="wpcf7-form-control has-spinner wpcf7-submit" type="submit" value="送信">
<span class="wpcf7-spinner"></span>

そして、<span class="wpcf7-spinner">には/wp-content/plugins/contact-form-7/includes/css/style.cssの77行目に以下のようなCSSが設定されています。

.wpcf7-spinner {
    visibility: hidden;
    display: inline-block;
    background-color: #23282d;
    opacity: 0.75;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: 0 24px;
    position: relative;
}

このCSSのうち、visibility: hidden;の指定があるため、通常時は表示されないようになっています。

「Contact Form 7」では送信ボタンをクリックしたタイミングでformタグにsubmittingというクラスが追加されます。
そのため、/wp-content/plugins/contact-form-7/includes/css/style.cssの91行目に書かれている以下のCSSが反映されるようになります。

form.submitting .wpcf7-spinner {
    visibility: visible;
}

visibility: hidden;だったものがvisibility: visable;に変わるためローディング画像が表示されるようになります。

なので、この表示する指定を打ち消すCSSを追加してあげることでローディング画像が表示されなくなるというわけでした。

まとめ

いかがでしたか？
「Contact Form 7」でローディング画像は簡単に消すことが出来ます。
ローディング画像は必要ないなという時には是非、実際に試してみて下さい。