Contact Form 7でCSSデザインや内容確認・完了画面を出す
Contact Form 7のデザインカスタマイズ・機能カスタマイズの一例を紹介しています。
編集画面にhtmlソースを入れて、class名を追加すればCSSで自由にデザインできます。
DOMで送信完了画面を出したり、プラグインで内容確認画面を出したりする事もできます。
お問い合わせフォーム「Contact Form 7」のカスタマイズ
Wordpressのお問い合わせフォームとしてよく使われるプラグインと言えば「Contact Form 7」ではないでしょうか。
Contact Form 7プラグイン
編集画面（フォームタブ）
このプラグインで出力されるフォームは、どちらかと言えばシンプルです。
慣れない人がこのプラグインを使う場合に一番気になるのが、デザインや機能部分でしょう。
本記事では「Contact Form 7」のデザインや機能カスタマイズをする方法をご紹介します。
テストフォームの準備
お問い合わせフォームのデザインをカスタマイズする前に、テスト環境を準備しましょう。
テスト用のお問い合わせフォームを作っていきます。
Wordpress管理画面に表示される「お問い合わせ」メニューを押し、上部にある「新規追加」をクリックします。
新規メール編集画面
フォームのタブが開いていると思いますが、最初は以下の項目が入っています。
・お名前
・メールアドレス
・題名
・メッセージ本文
テストフォーム項目の準備
テスト用ではありますが、入力項目は一通り揃えておきましょう。
「住所」やその他設置したいフィールドがあれば、事前に追加しておきます。
今回のはテストなので、メール設定関連には触れずにいきます。
お問い合わせフォームが確認できる状態にしておく
新規追加したフォームのコードをコピーします。
そのコードを固定ページに貼り付けて、テスト確認できる様にしておきます。
本番フォームをカスタマイズする場合は、事前にテストフォームを設置して事前確認する様にしましょう。何度もいじって変更したりするためです。
仕組みのおさらい
カスタマイズする前に、Contact Form 7の初期状態がページ上に出力された時のHTMLタグを把握しておきましょう。
classコードは既にたくさん入っている
実際のWEBページのソースコードが以下のように入っています。
実際にはご自身のサイトのソースを確認してみて下さいね。
上の画像ではわかりませんが、それぞれ多くのclass名が入っています。
これらはそれぞれの入力フィールドをコントロールするために設定されたものです。
逆にこれらのclassに、デザイン的な設定はほとんど含まれていません。
formタグについて
まずはソース内を囲む、<form></form>タグについてです。
このタグは出力時に自動で入る様になっていますので、編集画面上では書く必要がありません。
出力されたformタグ例
<form action="/contacts/#wpcf7-f249-p230-o1" method="post" class="wpcf7-form" novalidate="novalidate"> …フォーム内容のソースコード… </form>
ですのでタグを入れて装飾する際、formタグは入れない様にしましょう。
inputタグについて
次にソース内のinputタグを見てみましょう。以下は「text your-name」の出力ソース例です。
出力されたinputタグ例
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" />
[text ]としている部分が<input type="text">タグとなり、name値も挿入されている事がわかります。
class部分は出力時に自動的に入る様になっています。
[textarea ]についても同様で、[textarea ]が<textarea></textarea>タグに相当します。
送信ボタンについて
送信ボタンの実際の出力ソースは以下の様になります。
<input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit" />
他と同様にclass名が出力されていますが、それ以外は基本的な感じですね。
カスタマイズ例
では、編集画面のフォームタブ欄に装飾を加えてみたいと思います。
今回は箇条書きリストタグを使った一例をご紹介します。
HTMLタグ入りの構成
<ul class="contact-form"> <li>お名前<span>必須</span>：[text* your-name]</li> <li>メールアドレス<span>必須</span>：[text* your-mail]</li> <li>目的：[text your-subject]</li> <li>お問い合わせ内容：[textarea your-message]</li> <li>送信：[submit "送信する"]</li> </ul>
上記の様に、フォームタブ内に自由にタグを挿入・形成する事ができます。
HTMLタグが入りましたが、赤文字[]の記述部分はそのままなのがわかりますよね。
CSSの設定
上記例では、ulタグにcontact-formクラスが設置されています。
まずはこのcontact-formクラスを使ったCSS設定を紹介します。
contact-formクラスを使ったinputへのデザインCSS例
.contact-form input { width: 70%; background-color: #005513; color: #fff; font-size: 1.0em; font-weight: bold; letter-spacing: 0.2em; border: 1px solid #005513; transition: 0.3s; } .contact-form input:hover { background-color: #fff; color: #005513; }
上記設定により、contact-form要素の子要素である「input」に対してCSSが反映されます。
こうすればinput内にclassを付けなくてもコントロールできますよね。
この様にフォームタブ内に自在にHTMLタグを入れ、フォームデザインを変える事ができるので試してみましょう。
入力フィールドに直接class名を入れる
上の例では親要素である外枠にクラス名（contact-form）を付けて、その子要素に対してCSSを設定しました。
しかし時には、inputタグに直接クラス名を付けてコントロールしたい場合もあるでしょう。
しかしContact Form 7のフォームタブ上では、[]の中にclass名は入っていません。
class=""部分は全て、Contact Form 7により自動出力されるためですね。
classは追記できる
安心して下さい。[]内に直接class名やid名の追記ができます。
クラス名追記例
[text* your-name class:m-t30]
上記の様に「class:クラス名」を間に入れます。
クラス名を複数設定したい場合は、上記の様にclass:クラス名を連続で並べるだけです。
クラス名複数追加
[text* your-subject class:small class:m-t30]
他にidやsize等も全て、コロン「:」で区切って記載する事で設定ができるのです。
[text* your-email size:70 class:m-t30]
これだけできる事がわかれば、自由にカスタマイズできそうですよね。
実際に出力される時の表記
この時Contact Form 7側が自動で生成するclass名は、そのまま出力されます。
ですので結果として、class=""の欄に複数のクラス値がずらっと並ぶ事になりますね。
class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email small m-t30" size="70"
送信ボタンへのclass追加
一つ注意頂きたいのは、最後に押す「送信ボタン」にclassを追加する場合です。
Contact Form 7の送信ボタンはinput type="submit"で始まり、他と同じタグ構成となっています。
ですので先ほどと同様にclass:を追記すれば設定が効くのですが、この時設置する位置に注意して下さい。
class名は"送信"の前に挟む事
クラス名は、"送信"より前の位置に付けましょう。
[submit "送信" class:m-t30]…×
[submit class:m-t30 "送信"]…〇
私の環境では"送信"の後ろにつけると、CSSが反映してくれませんでした。
同じ事が起こる場合は、"送信"より前の位置に挟む様にしましょう。
formタグに直接クラス名を入れる
サイトの設計によっては、大元の<form>タグに「オリジナルのクラス名」をつけている場合もあるでしょう。
例：<form method="post" class="form-group classform">
…inputなどの記述
</form>
中身のinputタグに直接class名を入れるのではなく、form自体にclass名を付けてCSSを制御するタイプですね。
これをContactform7で実現する場合、同じようにformタグの中にclass名を付けなければなりません。
しかし先程説明したようにContactform7の画面内にformタグがないので、class名を書けません。
ではどうすればよいのでしょうか。
ショートコードの中に追記する
答えはズバリ、張り付けた「ショートコードの中」にclass名を追記します。
お問い合わせ様に準備した固定ページに、対処となるフォームの「ショートコード」を張り付けているはずです。
固定ページに貼り付けたショートコード
[contact-form-y id="754" title="テストフォーム"]
このショートコード内に追記する形でclassの記述を入れれば、出力された時のformタグ内にclass名が追加できるのです。
formタグには元々wpcf7-formというクラス名がつけられています。
この後ろに半角スペース入りで、別のクラス名が付与される事になります。
html_classの追記
例えばclass名として「form-group」および「classform」の2つをformタグに追加したいとしましょう。
その場合は以下の様に「html_class=""」を追記して並べます。
[contact-form-y id="754" title="テストフォーム"] ↓ [contact-form-y id="754" title="テストフォーム" html_class="form-group classform"]
こうすればソース上のwpcf7-formに続けて、form-groupとclassformが追加された状態になります。
同様にid=""を追加したい場合は、html_id=""として追記する事でformタグ内に反映されます。
formタグのソース部分
<form class="wpcf7-form form-group classform" method="…"> 元のclass名の後ろに追加される
これでformタグにclassの追加が必要な場合もバッチリです。
送信完了ページを表示させる
Contact Form 7に限った事ではありませんが「送信ボタン」を押しても送信が完了したかってわかりにくいですよね。
それは「送信完了」と小さく表示が出るだけで、ページ自体が切り替わらない事が原因でしょう。
実際に送信されたかがわからず、何度も送信ボタンを押すユーザーもいるようです。
そこで「送信完了ページ」を別途準備して送信後に表示させる様にすれば、ユーザーに送信完了を認識してもらいやすくなります。
送信完了ページの作成
まず固定ページを使って、送信完了ページを作成しましょう。
文面は送信完了時の文言として適当に作って頂いて構いません。
文面例（一部）
この度はお問い合わせメールをお送りいただきありがとうございます。
後ほど、担当者よりご連絡をさせていただきます。
今しばらくお待ちくださいますようよろしくお願い申し上げます。
URLの名称は「/thanks」などで良いと思います。このURLは後で使います。
例えば本サイトURLなら、https://lpeg.info/thanks/が「送信完了ページ」になりますね。
送信完了ページへのリダイレクト設定
functions.phpへ記述する
以下のリダイレクト設定を、テーマファイルのheader.php内に記述しましょう。
</head>の直前に入れる様にして下さい。
<script> document.addEventListener( 'wpcf7mailsent', function( event ) { location = 'https://lpeg.info/thanks/'; }, false ); </script>
前は「on_sent_ok: "window.location.href ='送信完了ページのURL';"」をその他の設定欄に入れる事で処理できていましたが、今は使えなくなっています。
動作確認
実際に自分でお問い合わせフォームを入力して、送信ボタンを押してみましょう。
先ほど作成した送信完了ページのURLに遷移したら完成です！
プラグイン追加によるカスタマイズ
内容確認ページを別途出したい場合
送信完了の前に「確認画面」を表示したい場合は、「Contact Form 7 add confirm」プラグインを使いましょう。
Contact Form 7は基本的に確認画面などは存在せず、そのまま送信される仕様です。
入力項目が多ければ、ユーザーも入力内容を確認したいと思うはずですしね。
このプラグインを導入する事で、内容確認ページを出す事ができます。
Contact Form 7 add confirm
プラグインをインストールすると、以下のボタンがフォームタブ上部の並びに追加されます。
・「確認」ボタン
・「戻って編集」ボタン
ボタンの名称は自由に変更できます。
「確認」ボタンを設置すると「送信」ボタンが「確認」ボタンに変わります。
内容確認画面が出る
実際にフォームに入力して確認ボタンを押すと、入力内容が確認できるページになります。
画面の下には「送信」ボタンが表示されています。
デザインは一緒になのでわかりにくいかも知れませんが、入力された枠と未入力枠とではフィールド色が変わります。
「戻って編集」ボタンも設置しておくと、内容確認ページで「戻る」と「送信」ボタンがそれぞれ並びます。
項目内容によって条件分岐させたい場合
「Conditional Fields for Contact Form 7」は、Contact Form 7のフォームに条件分岐を追加できるプラグインです。
Conditional Fields for Contact Form 7
例えばフォーム内に「資料送付を希望する」のチェック項目があったとします。
これに「はい」と答えた場合にだけ、「住所入力欄」が表示されるといった機能を付ける事ができます。
この様な条件分岐を利用したい場合に役立つプラグインです。
