お問い合わせページの作り方も、基本的には会社概要と同じです。
固定ページのスラッグをformなどに変更して、専用のテンプレート（page-form.php）を作れば割り当てられます。
ただ、お問い合わせページにはフォームがありますよね。
HTML作ったのは見た目だけ、実際には動かないフォームです。
ですが、WordPressならプログラミングの知識がなくても、本当に動くフォームが簡単に実装できてしまいます。
せっかくですから、プラグインの導入方法も学びつつ、フォーム機能も組み込んでみましょう。
プラグインでフォームを作る
WordPressは「プラグイン」を追加することで、機能を拡張することが出来ます。
プラグインを追加することで、WordPress本体にはない機能も使えるようになるのです。
今回の目的であるフォーム機能も、プラグインで追加する代表的な機能の一つ。
フォーム系プラグインはいくつか種類がありますが、今回はインストール数上位のContact form 7を使ってみましょう。
1.プラグインをインストール
早速、プラグインを追加してみましょう。
WordPress管理画面から、プラグイン > プラグインを追加 を開きます。
右上に表示されている検索窓に Contact form と入力すると、プラグインの候補が表示されます。
Contact form 7の「今すぐインストール」をクリックしてください。
インストールが完了すると、ボタンが「有効化」に変わります。
有効化をクリックしてください。
2.フォームの作成
Contact form 7の有効化が完了すると、左メニューに「お問い合わせ」という項目が増えます。
これがContact form 7の設定画面になります。クリックして開いてみましょう。
上部にある、追加のボタンをクリックするとフォーム作成画面が開きます。
（お問い合わせの子メニューの「コンタクトフォームを追加」からも同じ画面が開きます）
↓
フォームの作成画面が開きます。
この画面で入力・設定した項目がフォームとして表示されます。
わかりやすいように、タイトルは「お問い合わせ」とでもしておきましょう。
- 氏名→名前
- メッセージ本文 (任意)→内容
と、HTMLで使われていたのテキストに打ち替えてください。
メールアドレスと題名は削除しても、そのまま残しても良いです。
■ ラジオボタンの追加
元の form.html には性別を選択するラジオボタンがありました。
これを追加してみましょう。
ラジオボタン、と書かれているところをクリック。
ウィンドウが開くので、オプション欄に「男」「女」と入力します。
右下にあるタグを挿入ボタンをクリックすると、コードが挿入されます。
この状態で表示されるのはラジオボタン（選択肢）の部分だけです。
それでは分かりにくいので「性別：」と追加しておきましょう。
右上に表示されている、保存ボタンをクリックして保存してください。
作成されました、というメッセージが表示されたら、問題なくフォーム設定が出来ています。
固定ページを新規追加する
お問い合わせページを表示するために、固定ページを新規追加します。 固定ページの追加画面を開いてください。
タイトル部分に「お問い合わせ」と入力して、その下にあるブロックを追加ボタン（ + のアイコン）をクリック。
Contact form 7を選択してください。
ブロックを選択するウィンドウの上部にある、検索を使うと見つけやすいです。
Contact form 7のブロックを追加すると、プルダウンでフォームの選択ができます。
先ほど作成したフォームを選んでください。
右側のメニュー、固定ページのタブでスラッグを「form」に変更して、公開してください。
テンプレートファイルを作る
固定ページ（お問い合わせページ）を表示させるテンプレートファイルを作ります。
1.ファイルを作成
form.htmlをエディタで開き、そのまま名前をつけて保存します。
ファイル名は page-form.php にしてください。
style.cssと画像パスに<?php echo get_template_directory_uri()?>を挿入してファイルを読み込めるようにします。
2.投稿の「本文」を呼び出す
先程、WordPress側でお問い合わせページ用の固定ページを作成しました。
その時、本文にContact form 7で作ったフォームを挿入しましたよね。
現在の page-form.php はHTMLでフォームを直書きしています。
固定ページで設定したフォームを表示するために、フォーム部分を固定ページの本文と置き換えましょう。
下記のコードを使用します。
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
page-form.phpの<form> ~ </form>タグまでを削除。
削除した部分に、上記のコードを記述します。
上手くいかない方は上記のコードをコピーアンドペーストしてみてください。
貼り付けたコードで指示していることは、下図の内容です。
<?php the_content(); ?> でエディタの本文部分を出力しています。
while (have_posts()) : the_post(); はWordPress特有の書き方です。
最初はWordPressでよく使う定型の１つ、くらいの認識で問題ありません。
3.フォームを確認
page-form.phpを上書き保存して、お問い合わせページの表示を確認しましょう。
フォーム部分の見た目が変わっていたら、成功です。
ちなみに、このフォームはローカル環境だとうまく動きません。
フォーム管理画面や送信時にエラーが出ることがありますが、これはプラグインの設定を間違えているなどではないのでご安心を。
ローカル環境ではメールサーバーの用意ができていないので、上手く動かないんですね。
Local by Flywheelでは、手軽にメールテストが出来る方法も用意されています。
試してみたい方は、下記の設定を行ってみてください。
フォームの動作確認方法
※動作確認は任意です。スキップしても構いません。
※Localやプラグインの設定が絡むため、お問い合わせ頂いても解決できない場合もございます。
Local by FlywheelのTOOLSから、OPEN MAILHOGをクリックします。
ブラウザでMailHogという、メールボックスのような画面が開きました。
この画面はそのまま置いておきましょう。
WordPressでお問い合わせページを開きます。
フォームに適当に入力して、送信ボタンをクリック。
送信出来たら、MailHogのページを再読み込み。
すると、お問い合わせの通知メールが表示されます。
フォームはばっちり機能していますね。
