Contact Form 7でCSSデザインや内容確認・完了画面を出す

Contact Form 7でCSSデザインや内容確認・完了画面を出す

Contact Form 7でCSSデザインや内容確認・完了画面を出す

Contact Form 7のデザインカスタマイズ・機能カスタマイズの一例を紹介しています。

編集画面にhtmlソースを入れて、class名を追加すればCSSで自由にデザインできます。

DOMで送信完了画面を出したり、プラグインで内容確認画面を出したりする事もできます。

お問い合わせフォーム「Contact Form 7」のカスタマイズ

Wordpressのお問い合わせフォームとしてよく使われるプラグインと言えば「Contact Form 7」ではないでしょうか。

Contact Form 7プラグイン

Contact Form 7

編集画面(フォームタブ)

Contact Form 7の編集画面

このプラグインで出力されるフォームは、どちらかと言えばシンプルです。

慣れない人がこのプラグインを使う場合に一番気になるのが、デザインや機能部分でしょう。

本記事では「Contact Form 7」のデザインや機能カスタマイズをする方法をご紹介します。

テストフォームの準備

お問い合わせフォームのデザインをカスタマイズする前に、テスト環境を準備しましょう。

テスト用のお問い合わせフォームを作っていきます。

メールの新規作成

Wordpress管理画面に表示される「お問い合わせ」メニューを押し、上部にある「新規追加」をクリックします。

新規メール編集画面

フォームのタブが開いていると思いますが、最初は以下の項目が入っています。

Contact Form 7の編集画面

・お名前
・メールアドレス
・題名
・メッセージ本文

テストフォーム項目の準備

テスト用ではありますが、入力項目は一通り揃えておきましょう。

「住所」やその他設置したいフィールドがあれば、事前に追加しておきます。

今回のはテストなので、メール設定関連には触れずにいきます。

お問い合わせフォームが確認できる状態にしておく

フォームコードのコピー

新規追加したフォームのコードをコピーします。

固定ページにコードを貼り付ける

そのコードを固定ページに貼り付けて、テスト確認できる様にしておきます。

本番フォームをカスタマイズする場合は、事前にテストフォームを設置して事前確認する様にしましょう。何度もいじって変更したりするためです。

仕組みのおさらい

カスタマイズする前に、Contact Form 7の初期状態がページ上に出力された時のHTMLタグを把握しておきましょう。

classコードは既にたくさん入っている

実際のWEBページのソースコードが以下のように入っています。

Contact Form7のソース

実際にはご自身のサイトのソースを確認してみて下さいね。

上の画像ではわかりませんが、それぞれ多くの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が反映してくれませんでした。

同じ事が起こる場合は、"送信"より前の位置に挟む様にしましょう。

送信完了ページを表示させる

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 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

Conditional Fields for Contact Form 7

例えばフォーム内に「資料送付を希望する」のチェック項目があったとします。

これに「はい」と答えた場合にだけ、「住所入力欄」が表示されるといった機能を付ける事ができます。

この様な条件分岐を利用したい場合に役立つプラグインです。

この記事をシェアする

人気記事

Wordpressテーマカスタマイズ系記事