[Contact Form 7]送信時にボタンを非アクティブにし送信中と表示＆ローダー画像の位置調整を行う

WordPressのプラグイン「Contact Form 7」の送信時のアクションが微妙に気付きにくい事と、ローダーの位置調整が難しいと感じたので合わせて調整をしたいと思います。

Contact Form 7

お問い合わせフォームプラグイン。シンプル、でも柔軟。

ja.wordpress.org

2021/12/8 : 「Contact Form 7」アップデートに伴いCSSを修正。

目指したもの

• 送信ボタンを押した時に、ボタンを非アクティブ（ボタンの半透明化&「送信中」と表示）にすることで、UIの向上と二重クリックを防止する。
• 送信中に表示されるローダーの位置調整を行う。

使用デモ

※上記デモでは加えて「送信完了時にモーダルウィンドウを表示する」を使用しています。

[Contact Form 7]送信完了時にモーダルウィンドウを表示する

「Word Press」用プラグイン「Contact Form 7」は使いやすい便利なメール送信フォーム作成プラグインです。しかし、メール送信完了時のアクションがフォームの下に文言が追加されるだけとなっており「メールが...

mirailog.jp

2021.07.03

実装手順

• Contact Form 7内のコンタクトフォームの編集を行います。
• 下記のCSSとJavascriptをContact Form 7を設置するページに反映させます。

コンタクトフォームの編集

送信ボタンをクラス「wpcf7-submit-block」を持つ要素で囲みます。

<div class="wpcf7-submit-block">[submit]</div>

CSS

/* 送信ローダーの位置調整 */
.wpcf7 .wpcf7-spinner {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.wpcf7-submit-block {
    position: relative;
    margin-bottom: 2em; /* 要調整(*1) */
}

.wpcf7-submit-block input[type='submit'] {
    min-width: 200px;
}

/* 送信ローダークリック時 */
.wpcf7-submit.wpcf7-active {
    pointer-events: none;
    opacity: .5;
}

1. ローダー要素があった分のマージンが消えるため適宜調整

JavaScript

// 送信ローダーの調整
const submitElement = document.getElementsByClassName('wpcf7-submit');
const submitValue = submitElement[0].value;

submitElement[0].addEventListener('click', (ev) => {
    submitElement[0].classList.add('wpcf7-active'); // 指定のクラスを付与する
    submitElement[0].value = '送信中…'; // 送信中の文言(*1)
});

document.addEventListener('wpcf7submit', (ev) => { // Ajaxのフォーム送信が完了した場合（成功・失敗問わず）
    submitElement[0].classList.remove('wpcf7-active'); // 指定のクラスを外す
    submitElement[0].value = submitValue;
});

1. 送信中の文言はここで変更が可能

まとめ

以上で完成です。