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

前回の記事「固定ページのメインエリア編集」に続いて、「Contact Form 7」プラグインを利用してお問い合わせページのメインエリアにメール送信フォームを追加します。

メールフォームのコーディング

まずは他の固定ページと同様に、デザインに従ってメインエリアのコーディングを行います。
この段階では表示を整えるだけなので、form内のinput等の要素は適当で構いません。

▼固定ページ(お問い合わせ)のメインエリア

コードを表示

スタイルの追加

▼style.css

コードを表示

プラグインの追加とフォーム作成

Contact Form 7 と Contact Form 7 add confirmをインストールして有効化します。

インストールが済んだら、管理メニューの「お問い合わせ」から既存の「コンタクトフォーム1」を開き、内容を編集します。

フォームの設定

contact_form_install06タイトルは任意に設定します。ここでは「お問い合わせフォーム」とします。
固定ページの記事本文(コンテンツ)に入力したHTMLコードから、formタグの内側のコードをコピーしてフォーム内容欄にペーストます。

input、select、textareaの各入力項目のタグをフォームタグに全て置き換え、一旦設定を保存します。
実際は編集画面上での作業は使い勝手が悪いので、使い慣れたテキストエディタ等でフォームタグの置き換えを行ってから、ペーストする方が作業がスムーズかと思います
←テキストエディタで編集してからペースト

以下は各入力項目のフォームタグを作成する際の設定例です。
「メールアドレス」は必須項目のチェックを必ずONにしてください。

入力項目のタグを全てフォームタグに置き換えると以下のようになります。
「入力内容を確認」ボタンの箇所は「確認ボタン」「戻って編集ボタン」「送信ボタン」の3つのフォームタグに置き換えます。

フォームタグに置き換えた後のフォーム内容は以下の通りです。

フォームが作成できたら、ここまでの作業を一旦保存します。

メールの設定

contact_form_mail01「メール」のタブをクリックしてメール本文や送信先などを設定します。

contact_form_mail02送信者宛てに控えのメールを自動送信したい場合は、「メール2を使用」のチェックをONにします。

 

Contact Form 7 4.4 から追加された設定検証機能について

Contact Form 7 のバージョン4.4 から設定検証機能というものが追加されましたが、エラーと判定される原因が当初よくわからなかったので、作成者のサイトを参考に状況を整理してみました。
(参考)設定エラーを解消する | Contact Form 7 [日本語]

送信先 実際の送信先。普段使用しているメールアドレスでもOK。(例)nameA@aaa.com
送信元 「送信元アドレス」と「経由したサーバ」のホスト名(ドメイン名)が異なると、送信先のメールサーバにスパム判定される恐れがあるため、サイトURLと同一のホスト名のメールアドレスを設定。(例)サイトURLがbbb.comの場合→nameB@bbb.com
題名 空欄になるとNGなので、フォームタグのみを設定する場合はタグ作成時に必須項目に設定。
追加ヘッダー Reply-To、Cc、Bccのみ設定可。Reply-Toのメールアドレスは空欄になるとNGなので、フォームタグ作成時に必須項目に設定。
メッセージ本文 空欄になるとNGなので、フォームタグのみを設定する場合はタグ作成時に必須項目に設定。
メール(2)の
送信先
送信先メールアドレスが空欄になるとNGなので、フォームタグ作成時に必須項目に設定。
メール(2)の
送信元
「送信元アドレス」と「経由したサーバ」のホスト名(ドメイン名)が異なると、送信先サーバにスパムと見なされる恐れがあるため、サイトURLと同一のホスト名のメールアドレスを設定。(例)サイトURLがbbb.comの場合→nameB@bbb.com
メール(2)の
追加ヘッダー
Reply-To、Cc、Bccのみ設定可。Reply-Toのメールアドレスは実際の送信先アドレスでOK。(例)Reply-To:nameA@aaa.com

上記の例の送信元アドレス「nameB@bbb.com」を新規に用意する必要がある場合は、アドレスの新規追加時に「nameA@aaa.com」へ転送する設定にしておけば面倒が無いかと思います

「メッセージ」「その他の設定」については必要に応じて編集してください。

以上でフォームの設定は完了です。
次のページでは、作成したフォームのショートコードを固定ページに追加します。

PR

DO WP 管理人