お問い合わせフォームの作成

固定ページにショートコードを追加

contact_form_code01「フォーム」と「メール」の設定が全て終わったら、ショートコードをコピーして固定ページの本文欄にペーストします。

「お問い合わせ」ページの編集画面を開き、<form>〜</form>の範囲を削除して、コピーしたショートコードに置き換えます。

contact_form_code02 contact_form_code03

表示してみると下図のようになりますので、デザイン通りにするためにいくつか修正を行います。

contact_form_code04

Contact Form 7 の自動整形を停止

記事本文(content)と同様にContact Form 7のフォーム欄にも自動整形機能が働いています。
単純なフォーム程度なら表示を確認しながら自動整形に合わせて調整しても良いのですが、入力項目が多くデザインが複雑なものになると効率が悪いので、ここでは自動整形機能を停止させる方法で修正します。

プラグイン作者のサイトの説明にあるる通り、wp-config.phpに以下の行を追加します。

(参考)定数指定で動作を制御する | Contact Form 7 [日本語]

▼wp-config.phpに追加

wp-config.phpは一般設定でWordPressのアドレスを「http://【ホスト名】/wp」としている場合、「http://【ホスト名】/wp/wp-config.php」にあります。

contact_form_code05コードは必ず「require_once(ABSPATH . ‘wp-settings.php’);」の行の前に追加するように注意してください。

これで改行タグ(<br>)が自動的に挿入されて二重になってしまっていた箇所が正常に直ります。

contact_form_code06

できるだけカスタマイズはテーマフォルダ内だけ済ませたい気持ちもあって、他に自動整形を停止する方法がないか探してみたところ、次のような方法ありましたので参考に書き留めておきます。

続きを表示

▼functions.phpに追加

▼ページにショートコードを追加する際の記述

(参考)Contact Form 7 auto added p tags

selectフォームの空項目をjQueryで置換

selectフォーム(ドロップダウンメニュー)の1行目にはフォームタグの設定で空項目が入るようにしていますが、Contact Form 7では空項目のラベル「—」を任意に設定できないため、ここではjQueryの置換を利用してデザイン通りの表示に修正します。

contact_form_code07

contact_form_code08footer.phpファイルを開き、以下の記述を<?php wp_footer(); ?>の前に追加します。

▼footer.phpに追加

以上でselectフォームの表示がデザイン通りに変更されました。

contact_form_code09

エラー表示のカスタマイズ

デザイン通りに表示を整えたら、次は実際にフォームを動作させてエラー表示などを確認します。

contact_form_modify01まずは入力項目が空の状態で「入力内容を確認」ボタンをクリックしてみます。

contact_form_modify02左図のようにインラインで横並びにした入力項目は表示が崩れるので、どうしても横並びのデザインを維持したいという場合は、次のように修正します。

contact_form_modify03フォームの編集画面を再度開き、横並びにしたい箇所を「float: left」でスタイルを設定できるように<span class=”floatL”>〜</span>で括ります。

contact_form_modify04エラーメッセージはデフォルトのままでは長過ぎてデザインに収まらないので、文字数を減らして簡略化します。

contact_form_modify05後はstyle.cssにスタイルを追加して表示を整えます。
フォーム下部に表示されるエラーメッセージもデザインに馴染むようにスタイルを変更します。
各メッセージのセレクタは以下の通りです。

div.wpcf7-validation-ok
  送信が正常に完了した際のメッセージ
div.wpcf7-validation-ng
  送信が失敗した際のメッセージ
div.wpcf7-validation-blocked
  送信がスパムと見なされた際のメッセージ
div.wpcf7-validation-errors
  入力内容に不備が見つかった際のメッセージ

修正したフォーム内容と追加したスタイルは以下の通りです。

▼フォーム内容

コードを表示

▼style.cssに追加

コードを表示

以上でお問い合わせフォームの作成は一通り完了です。


【次の手順→】 準備中
【←前の手順】 固定ページのメインエリア編集

PR

DO WP 管理人