プラグインContact form 7でお問い合わせページを作る【WordPress制作入門講座】

お問い合わせページの作り方も、基本的には会社概要と同じです。
スラッグをformなどに変更して、専用のpage.phpを作ればOK。

ただ、お問い合わせページにはフォームがありますよね。
HTMLでは見た目だけ作りましたが、WordPressならプログラミングの知識がなくても簡単に本当に動くフォームが実装できてしまいます。
せっかくなので、フォーム機能も組み込んでみましょう。

• プラグインでフォームを作る
• 1.プラグインをインストール
• 2.フォームの作成
• 固定ページを新規追加する
• テンプレートファイルを作る
• 1.ファイルを作成
• 2.投稿の「本文」を呼び出す
• 3.フォームを確認

プラグインでフォームを作る

WordPressは「プラグイン」を追加することで、機能を拡張することが出来ます。

プラグインを追加することで、今回の目的であるフォーム機能を付けるなど、WordPress本体にはない機能も使えるようになるのです。

1.プラグインをインストール

早速、プラグインを追加してみましょう。
WordPress管理画面から、プラグインの新規追加を開きます。

右上に表示されている検索窓に「Contact form」と入力。

プラグインの候補がいくつか表示されます。
Contact form 7の「今すぐインストール」をクリックしてください。

インストールが完了すると、ボタンが「有効化」に変わります。
有効化をクリックしてください。

2.フォームの作成

Contact form 7の有効化が完了すると、左メニューに「お問い合わせ」という項目が増えています。
クリックしてみましょう。

新規追加をクリックするとフォーム作成画面が開きます。

　↓

この画面で入力・設定した項目がフォームとして表示されます。

わかりやすいように、タイトルは「お問い合わせ」とでもしておきましょう。
デザイン上、メールアドレスと題名は不要なので削除。

• 氏名→名前
• メッセージ本文 (任意)→内容

と、デザインのテキストに打ち替えてください。

ラジオボタンの追加

あと、元のform.htmlには性別を選択するラジオボタンがありましたね。
これを追加してみましょう。

ラジオボタン、と書かれているところをクリック。

ウィンドウが開くので、オプション欄に「男」「女」と入力します。

右下にあるタグを挿入ボタンをクリックすると、コードが挿入されます。

この状態で表示されるのはラジオボタン（選択肢）の部分だけです。
それでは分かりにくいので「性別：」を追加しておきましょう。

右上に表示されている保存ボタンをクリック。
保存が完了すると、下図のようにショートコードが表示されます。

次の固定ページを作成時に、このショートコードを貼り付けます。
コピーしておいてください。

固定ページを新規追加する

お問い合わせページを表示するために、固定ページを新規追加します。

タイトル部分に「お問い合わせ」と入力。
本文部分に、さきほどコピーしたショートコードを貼り付けます。

URLスラッグを「form」に変更し、公開してください。

テンプレートファイルを作る

固定ページ（お問い合わせページ）を表示させるテンプレートファイルを作ります。

1.ファイルを作成

form.htmlをエディタで開き、名前をつけて保存を選択。
「page-form.php」という名前で保存してください。

style.cssと画像部分に<?php echo get_template_directory_uri()?>を挿入。
ファイルを読み込めるようにします。

2.投稿の「本文」を呼び出す

先程、WordPress側でお問い合わせページ用の固定ページを作成しました。
その時、本文にContact form 7で作ったフォームを表示するのショートコードを挿入しましたね。

お問い合わせページでプラグインのフォームを表示するために、直打ちしているフォーム部分を固定ページの本文と置き換える必要があります。

エディターを使って設定した本文を表示させるために、下記のコードを挿入します。

<?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のページを再読み込み。
すると、お問い合わせの通知メールが表示されます。
フォームはばっちり機能していますね。