[ContactForm7]送信完了を分かりやすくする

そんなに珍しい話じゃないけど、知っておくと便利。

基本的な挙動

ContactForm7はページ遷移をしない問い合わせフォーム。するっちゃするけど。

フォームの上下にメッセージエリアがあって、普通に使うとエラーメッセージとか送信完了のメッセージがそこに表示される。

メッセージが表示されるのはいいけど痒いところがある。

エラーが出た時のエラー文は重複してるんで、複数エラーが出たときに同じエラー文がエラー数だけ羅列されて、どれがどれかわからない。設定できないわけじゃないけど。inputの直下それぞれにもエラー表示が出るのでひょっとして要らないんじゃないの?って気さえする。

送信完了したときもフォームがそのまま残ってるんで、パッと見では送信されたのかどうなのかよく分からない、ということがある。なのでそのへんをいじっていく。

詳しいことは検索すれば他所でしっかり書かれてあるので自分にわかりやすいものを選んで読むのが良いです。

システムに喧嘩を売るとアップデートのときに都度修正するはめになるんで、cssで済ませる。

エラー挙動の対処

個別にエラー表記があればそれでいい、フォーム上下のメッセージは不要、とする。

div.screen-reader-response,
div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
    display: none !important;
}

span.wpcf7-not-valid-tip{
    color: red;
}

単純に「!important」で強くするか、入れ子になる親をくっつけるとかして、まるっと非表示にする。ついでに各項目のエラー表記部分は共通するclassのspanで囲われてるんで、それをいじっていい感じにする。

ちなみにこれは、フォーム上の方は完全に非表示、下の方はエラーの内訳を非表示にする内容。

簡単。

送信完了時の対処

ちょっとめんどくさい。

まず、フォームをこんな感じでContactform7で作る。

<ul class="form_list">
<li>[input example]</li>
<li>[input example]</li>
<li>[input example]</li>
︙
<li>[submit "送信"]</li>
</ul>

<ul>じゃなくてもなんでも良いけど、入力部位をまとめて指定できる状態を作る必要がある。

で、こうする。

.screen-reader-response,
form.sent ul.form_list{
    display: none;
}

contactform7はsubmitクリック時に送信失敗(エラー)、送信完了それぞれでformにclassを振る。送信完了は.sentが付与されるんで、それを含めて非表示にする。

「.screen-reader-response」はフォームの直前に挿入されてるメッセージエリアで、2回も同じことを表示したって仕方がないので非表示にする。先述のエラーと絡めたら、本当にこの子は存在意義が薄いかわいそうな子だと思う。

一応簡単に必要な部分だけ、送信完了時のコメント表示はこんな感じになる。

<form class="">
<ul class="form_list">
<li>[input example]</li>
<li>[input example]</li>
<li>[input example]</li>
︙
<li>[submit "送信"]</li>
</ul>
<div class="wpcf7-response-output">送信完了</div>
</form>

入力部位を非表示にするんで送信完了時のメッセージだけが残ることになる。ただ文字を表示するだけだったらこれでおしまい。

「wpcf7-response-output」が厄介だという話に続く。

メッセージ部を装飾したい場合

メッセージは「.wpcf7-response-output」だけ使うってことでやってきたので、これもここだけの話。

これが地味にだるい。

まず、Contactform7は仕様上、表示するメッセージは任意のものを設定できるけど、htmlを加えることができない。ということで、改行すら指定できないということになる。地味に厄介。

で、表示するときはこうなる。

<div class="wpcf7-response-output">【メッセージ内容】</div>

エラーだろうが送信完了だろうが、共通のclassのdivに直接文字が突っ込まれる。

送信完了してない、エラーもないときはこうなる。

<div class="wpcf7-response-output"></div>

つまり、htmlタグは常時設置されていることになる。

htmlタグを追加できない足掻きとして背景色を付けたり枠を付けたり余白を作ったりしちゃったら、文字がなくてもその装飾だけが表示されるというとんでもないことが起きる。

だから、こんな感じでcssを組む。

.wpcf7-response-output{
    display: none;
}
form.invalid .wpcf7-response-output,
form.sent .wpcf7-response-output{
    display: block;
    /* 装飾 */
}

先述の通り、エラー時と送信完了時にformにそれぞれclassが付与されるんで、そのときだけ表示するようにしておく。これでメッセージがないときは何もない状態にできる。

そんな感じで。

要するに

  • 入力部の上下でエラー文を表示させない
  • 送信完了時に入力部を非表示にする
  • エラー、送信完了時のみメッセージエリアを表示する
  • エラー文、メッセージ文の装飾に対応する
/* 表示・非表示 */
form.sent ul.form_list, /* 入力部全体を指定 */
span.wpcf7-not-valid-tip,
div.wpcf7-response-output,
div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing,
div.screen-reader-response{
    display: none;
}
form.invalid span.wpcf7-not-valid-tip,
form.invalid div.wpcf7-response-output,
form.sent div.wpcf7-response-output{
    display: block;
}

/* 装飾 */
span.wpcf7-not-valid-tip{ /* 入力部エラー文 */ }
div.wpcf7-response-output{ /* フォーム下部メッセージエリア */ }

/* メッセージエリアの装飾をエラーと送信完了で分ける場合 */
form.invalid div.wpcf7-response-output{ /* エラー時 */ }
form.sent div.wpcf7-response-output{ /* 送信完了時 */ }

入力部の指定以外は既存のclassで済むので使いまわししやすい部類だと思う。

コメント

タイトルとURLをコピーしました