【ContactForm7のお問い合わせフォームの困りごと】送信完了メッセージのカスタマイズと表示位置の変更

記事内に広告を含みます

この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

ブログを運営している人の中でもプラグインContact Form 7を使ってお問い合わせフォームを設置している人は多いのではないでしょうか。
ブログ初心者の私は、いろんなカスタマイズブログのお世話になりつつ、コピペ嵐の末にやっとこさContact Form 7でお問い合わせページを設置することができました。

ただ、気になるところが一つ…

お問い合わせページの一番上のところに表示される謎のボックス。

特になにか動作をするわけでもなく、ただ見た目の問題だけのようですが、とても気になります。

う〜ん、私だけでしょうか？

このような謎のボックスが表示されて気になって夜も眠れない人は、是非この記事を参考にしてみてください。

contents

お問い合わせフォームの一番上に現れる謎のボックス

入力項目を空のまま送信ボタンを押すと、謎のボックスの正体が判明しました。

〝必須項目に入力してください〟が表示されるボックスだったようです。

正体が分かっただけでもかなりスッキリしますが、非表示にしたいのでCSSを追加しましょう。

CSS

/* ”必須項目に入力してください”の謎のボックスを消す */
div.screen-reader-response{
  display: none;
}

注意

カスタマイズは自己責任で行ってください。

カスタマイズに関して素人のブログ初心者ですので、お問い合わせをいただいてもお答えできる技量はありません…

消えました。
スッキリしました。
しかしまだ気になるところがあるので、続けてやっていきましょう。

エラーメッセージをカスタマイズ

入力項目を空欄のまま送信ボタンを押すと、入力フォームの下に〝必須項目に入力してください〟というエラーメッセージが出ます。

私の場合は、なぜかフォントサイズもカラーも本文のそれと同じでとても地味です。

目立たないにもほどがあるので、ここにもCSSを追加してみましょう。

CSS

/* ”必須項目に入力してください”の文字の色を変える */
.wpcf7-not-valid-tip{
   color: #dc3232;
}

フォントカラーを赤にしたら、それっぽい感じになりました。

もう一つ地味なところがあるので、次はそちらをどうにかしましょう。

送信後のメッセージをカスタマイズ

送信ボタンを押すと、〝ありがとうございます。メッセージは送信されました。〟や〝メッセージの送信に失敗しました。後でまたお試しください。〟というメッセージが一番下に表示されます。

下の画像では〝入力内容に問題があります。確認して再度お試しください。〟というメッセージが表示されているのですが…

素です。スッピン状態です。

本来はこんな感じでもともと文章に枠がついているようですが、何をどう失敗したのかCSSが効いていないようです。

このままでは、お問い合わせする人が送信できたのかできていないのか分かりにくいので、これをド派手にカスタマイズしましょう。

CSS

/* メッセージの送信に失敗したときのメッセージのカスタマイズ */
div.wpcf7-validation-errors
   color:　#dc3232;/*文字色*/
   font-weight: 900;/*文字の太さ*/
   border: 1.5px solid #dc3232;/*枠線の色と太さ*/
   border-radius: 2px;/*角を丸くする*/
   margin: 1.5em 0;/*外側の余白*/
   padding: 0.5em 1em;/*内側の余白*/
   text-align: center;/*中央寄せ*/
}

これはいろんなカスタマイズブログでよく紹介されているCSSなのですが…
私の場合はこれが効きませんでした。なぜか(泣)

打ちひしがれた私が使った別のCSSを以下に書いておきます。なんだかCSSがうまく反映されない時にお試しください。

CSS

/* 入力内容に不備が見つかったときのメッセージのカスタマイズ（別バージョン）*/
.wpcf7 form.invalid .wpcf7-response-output{
    color: #dc3232;
	font-weight: 900;
	border: 1.5px solid #dc3232;
	border-radius: 2px;
	margin: 1.5em 0;
	padding: 0.5em 1em;
	text-align: center;
}

存在感たっぷり。

ちなみにこれは入力内容に不備があった場合に表示されるメッセージなので、ちゃんと送信できた場合に表示されるメッセージに対しても別途CSSを指定しなければいけません。

その他のメッセージのセレクタを書いておくので、文字や枠線や背景色などを自由にカスタマイズしてください。

メッセージが正常に送信されたとき
ありがとうございます。メッセージは送信されました。
　div.wpcf7-mail-sent-ok
　または
　.wpcf7 form.sent .wpcf7-response-output

メッセージの送信に失敗したとき
メッセージの送信に失敗しました。後でまたお試しください。
　div.wpcf7-mail-sent-ng
　または
　.wpcf7 form.failed .wpcf7-response-output

送信がスパムと見なされたとき
メッセージの送信に失敗しました。後でまたお試しください。
　div.wpcf7-spam-blocked
　または
　.wpcf7 form.spam .wpcf7-response-output

承諾が必要な項目が承諾されていないとき
メッセージを送信する前に承諾確認が必要です。
　div.wpcf7-accept-terms
　または
　.wpcf7 form.invalid .wpcf7-response-output

私は全部、赤字に赤枠にしました。

CSS

/* メッセージは全部赤字で赤枠に */
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output, .wpcf7 form.sent .wpcf7-response-output{
    color: #dc3232;
	font-weight: 900;
	border: 1.5px solid #dc3232;
	border-radius: 2px;
	margin: 1.5em 0;
	padding: 0.5em 1em;
	text-align: center;
}