PAGETOP

WordPressの国産プラグイン「Contact Form 7」でお問い合わせフォームを作ろう③ ~送信後のメッセージをカスタマイズする~

2021年8月11日

WordPressの国産プラグイン「Contact Form 7」でお問い合わせフォームを作ろう③送信後のメッセージをカスタマイズする

ContactForm7は、送信後にサンクスページに移動することはなく、「あなたのメッセージを送信しました」というメッセージが表示されるだけです。
しかしこのメッセージはフォームの最下部に表示されるため、あまり目立たず見落としてしまう場合があります。そうなると、ユーザーには送信できたかどうかが分かりません。

ただ、ContactForm7の作者は、送信後にサンクスページなどの別のURLに移動することを推奨していません。

[外部記事]送信後に異なるURLにリダイレクトさせるには

確かに、ページ遷移すると余計なロードが増え、スマートフォンユーザーなどにはストレスになるかもしれません。送信されたことを伝えるだけであれば、ページ遷移しなくてもいいわけです。
そこで、別の方法でこのメッセージをもっと目立つように工夫してみたいと思います。

①メッセージの位置を変える

ContactForm7の作者も推奨している方法です。
[response]というコードをフォーム内に入れることで、好きな位置にメッセージを表示させることができます。

設定画面

表示

上下に表示されれば、気づかないということはなさそうです。

②メッセージのデザインを変更する

メッセージは、送信完了や入力ミスを知らせるものなど数種類ありますが、どれもテキストをボーダーで囲むスタイルになっています。
ContactForm7のCSSを見てみると、次のように記述されています。

[style.css]

div.wpcf7-mail-sent-ok {
border: 2px solid #398f14;
}
div.wpcf7-mail-sent-ng {
border: 2px solid #ff0000;
}
div.wpcf7-spam-blocked {
border: 2px solid #ffa500;
}
div.wpcf7-validation-errors {
border: 2px solid #f7e700;
}

この部分を、使っているテーマのstyle.cssで上書きしてしまいましょう。
外観>テーマの編集から、style.cssの最後に次のように追記します。

[style.css]

div.wpcf7-mail-sent-ok {
background-color: #56b379;
color:#ffffff;
font-weight:bold;
font-size:120%;
padding:10px;
}

表示

目立つようになりました!
ここでは送信完了メッセージに付与されるクラス「wpcf7-mail-sent-ok」に対してCSSを上書きしましたが、入力ミス時のメッセージ「wpcf7-validation-errors」などでも同様に上書きができます。
好みのデザインに変えてみてください。

③フォームを消してしまう

送信ボタンをクリックしたらフォーム部分は消し、メッセージのみを表示させるようにします。つまり擬似的に、ページ遷移したように見せかける方法です。
送信完了時のソースを見てみると、フォーム部分のHTMLは下記のようにsentというクラスが付与されています。

[formタグ部分]

<form novalidate="novalidate" class="wpcf7-form sent" method="post" action="/97/#wpcf7-f95-p97-o1" name="">

[input部分]

<p>お名前 (必須)<br>
<span class="wpcf7-form-control-wrap your-name"><input type="text" aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" value="" name="your-name"></span>
</p>

[メッセージ部分]

<p>お名前 (必須)<br>
<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">あなたのメッセージは送信されました。ありがとうございました。</div>

input部分は<form>下にあり、<p>タグで囲まれているので、style.cssに次のように記述し、input部分を消してしまいます。

[style.css]

form.sent p{
display:none;
}

表示

メッセージだけが表示されました。

以上、ContactForm7のメッセージをカスタマイズする方法をご紹介しました。
デフォルトの設定ではメッセージに気づきにくい、と感じたら、ぜひ試してみてください。