プラグイン「Contact Form 7」をインストールし、問い合わせフォームの作成を行う。

プラグインのインストールと有効化

プラグインを追加画面より、画面右上にあるプラグインの検索から「Contact Form 7」の検索を行い、
検索結果にある「Contact Form 7」の「今すぐインストール」リンクをクリック

プラグインがインストールされ、「有効化」のリンクが表示されるので、クリック

クリック後、インストール済みプラグイン一覧画面が表示されるので、
一覧上の「Contact Form 7」が有効になっていることを確認する。

これで、「Contact Form 7」の有効化は完了。

「Contact Form 7」で作成した問い合わせフォームの表示方法
プラグイン「Contact Form 7」をインストールした時点で、
フォームが1種類生成されているので、まずは、それを表示してみる。

左メニューの「お問い合わせ」内にある「コンタクトフォーム」をクリックする。

コンタクトフォーム一覧画面が表示され、一覧上には「コンタクトフォーム1」がすでに存在している。
この項目のショートコードを投稿や固定ページに記載すると、問い合わせフォームが表示できる。

(投稿ページに貼ってみた場合)

コンタクトフォームの表示が行えることを確認した。

ここからは、コンタクトフォームにて入力項目を編集したり、
送信時のメール設定の変更を行うための方法を記載する。

「Contact Form 7」でのコンタクトフォームの編集方法

コンタクトフォームの編集については、コンタクトフォーム一覧画面から編集したいコンタクトフォームのタイトル部分、
またはカーソルを当てた際に表示される編集リンクをクリックする。

また、新たにコンタクトフォームを追加したい場合、コンタクトフォーム一覧画面の「新規追加」リンクか、
左メニューの「お問い合わせ」内にある「新規追加」をクリックし、新規追加用ページに遷移する。

(今回はコンタクトフォーム1の編集画面を表示しました。)

1、コンタクトフォーム上の共通設定について
コンタクトフォーム編集(追加)画面を表示すると、
画面上部にコンタクトフォーム名とショートコードが表示され、コンタクトフォーム名については編集が可能となっている。
また、画面右上に表示される「ステータス」にて、複製(編集時のみ)、削除(編集時のみ)、保存が可能となっている。

2、「フォーム」タグでのフォーム表示項目編集方法について
フォームタグにて、コンタクトフォームの表示項目の編集が行える。

下部のテキストエリアにて手入力が行えるが、
タグを追加する場合、画面中央にある各種フォームタグ追加用ボタンから追加するのが簡単なため、
そちらをまずは解説する。

例として、テキストのフォームタグを追加したい場合の動作を行う。
画面中央にある各種フォームタグ追加用ボタンから、「テキスト」をクリックする。
すると、フォームタグ生成画面が表示される。

今回は、以下の通り入力し、「タグの生成ボタン」を押下した。
押下すると、テキストエリア内のカーソル位置にフォームタグが追加される。

この追加されたタグの構成について、下記に記載する。
[text* text-test id:test class:test placeholder “test code input”]

text* → タイプを表している。「*」が語尾についている場合、必須項目となる。
text-test → 名前を表している。この項目は後続で編集するメール本文に記載する「メールタグ」と紐づく。
id:test class:test placeholder → オプション項目を表している。タグのオプションなので、タイプによって利用可能な項目は異なる。
“test code input”→デフォルト値を表している。表示時に設定されている入力値となる。(今回はオプション項目でplaceholderを指定しているので、プレースホルダーの表示として利用される。)

3、「メール」タグでの送信メールの編集方法について
メールタグにて、送信ボタン押下時に送信するメールの設定を行うことが出来る。

入力内容について、下記に記載する。
送信先→問い合わせメールを受信したいメールアドレスを入力する。
送信元→問い合わせメールを送信している名称を入力する。
題名→問い合わせメールの題名を入力する。
追加ヘッダー→CcやBcc等の指定がある場合に入力する。
メッセージ本文→問い合わせメールの本文を入力する。
空のメールタグを含む行を出力から除外する→チェックありの状態で、メールタグの値が空の場合、そのメールタグを含む行ごとメール本文から除外します。
HTML 形式のメールを使用する→チェックありの場合、送信メールの形式をHTML形式にします。
ファイル添付→メールに添付するファイル情報を入力する。
ファイル情報は、フォームにてfileタイプの入力項目の名前をメールタグで指定します。
また、ローカルファイルのパスも指定出来ます。

入力内容にてメールタグを利用出来ます。
メールタグの構成については、大括弧内にフォームタグで指定している氏名を入力すれば、
フォームタグ上の入力内容を反映してくれます。

また、「メール (2) を使用」にチェックを入れると、メールの送信が正常に行えた場合、
別途メール設定をすることでそのメールを送信することも可能です。

4、「メッセージ」タグでのメッセージ編集方法について
メールタグにて、発生した状況時に表示するメッセージを設定できます。
こちらについては、各自状況とメッセージ本文の編集のみが可能なため、詳細な説明は省略します。

5、「その他の設定」タグで設定可能な内容について
その他の設定タグにて、下記の設定を追加する事が出来ます。
demo_mode: on → デモモードを有効にします。デモモードでは、メール送信をスキップします。
subscribers_only: true → 購読者限定モードを有効にします。購読者限定モードでは、コンタクトフォームの送信を行う際にWordPressへのログインが必須となります。
acceptance_as_validation: on → 承諾確認チェックボックスの検証確認が入力チェックと同タイミングとなり、チェックエラー時にメッセージが画面上に表示されるようになります。

以上で、「Contact Form 7」でのコンタクトフォームの編集についての説明を終える。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA