こんにちは。fsです。
WordPressテーマ開発シリーズの続きです。
今回は問い合わせページをつくっていきます。
仕上がりはこんなイメージです。
問い合わせフォームと確認・送付ボタンを表示できるようにしていきます。
前回同様にコードを共有しながら進めていきますので、初心者の方も安心して読み進めていただければと思います。
それではご覧ください。
問い合わせページの作成
それでは実際にページを作成していきましょう。
プラグインで問い合わせフォームの機能を追加
問い合わせページでは、実際にフォーム（問い合わせする中身）を稼働させて通知がくるように設定する必要があります。
この機能はWordpressの標準では備わってないので、プラグイン（拡張機能）を用いて機能を実装する必要があります。
問い合わせフォームの代表的なプラグインは以下の2つがあります。
- Contact Form7
- MW WP Form
どちらのプラグインを使っても変わりませんが（どちらも優秀なプラグインです）、今回はMW WP Formを使っていきます。
MW WP Formで開発
まず、プラグインを追加していきましょう。
プラグインの新規追加をクリックします。
検索欄にMW WP Formと入れて、インストール後有効化します。
これでプラグインの設置が完了です。
問い合わせフォームの作成
プラグインを導入できたら実際にフォームをつくっていきます。
流れとしては、
- MW WP Formので問い合わせフォームをつくる
- 送信完了メッセージやバリデーションなどの詳細設定を行う
- フォーム設置完了後、識別子をコピー
- 問い合わせ用の固定ページをつくる
- 動作確認
このように進めます。
MW WP Formで問い合わせフォーム作成
それではMW WP Formを使って、問い合わせフォームを作っていきましょう。
このプラグインを使うことで、複雑なプログラムを書くことなくフォームを作成することができます。
今回は氏名、Eメール、問い合わせ内容の3つの項目を入れていきます。
管理画面からMW WP Formをクリックし、新規追加を選択します。
フォーム作成ページ画面になるので、タイトル（ここではお問い合わせ）を記入。
その後テキストモードに移行します。
ここでhtmlのコードを書いていくわけですが、基本的に記載するのはlabelタグとinputタグの2つでOKです。
labelタグは記載する項目の名前（氏名やEメール、お問い合わせ内容など）、inputタグは実際に記入してもらうエリアを指します。
まずは氏名を記入してもらうところから書いていきます。
labelタグをこのように作っていきます。
次にinputタグをつくります。
inputタグはプラグインの機能を使って実装していきます。
labelタグの下にカーソルを合わせ、左上のドロップダウンリストからinputタグの種類を選択し、隣の「フォームタグを追加」をクリックします。
そうすると、属性、ID、クラスなどを入力する画面が出てくるので、必要事項を記入し挿入します。
Start Bootstrapのように、元々のデザインテンプレートを使っている場合は元のファイルを参考に記入すると良いです。
挿入をクリックしたら、このようにWordpress専用のinputタグ（ショートコード）が記載されます。
同じ要領でEメールと問い合わせ内容の項目も作成していきます。
※問い合わせ内容は複数行を入力することを想定して”テキストエリア”とします
これでフォームの内容ができたので、最後にボタンを設置します（今回は確認ボタンと送信ボタン）。
ドロップダウンから確認/送信ボタンを選択し、必要なクラス名があれば記載して挿入するだけです。
そうするとボタンのショートコードが記載されます。
これでフォームの設置はとりあえず完了です。
フォームの詳細設定
次はフォームの詳細設定です。
まずは完了メッセージから。
こちらはフォーム送信ボタンが押された後、画面上に表示されるメッセージです。
フォーム記入画面から下にスクロールし、表示させたいメッセージを記入します。
次はバリデーションを設定します。
ここでいうバリデーションは入力チェックのことを言います。
要はこちら側(管理者)が必須項目など、書いてほしい条件を設定するものです。
今回は氏名、Eメール、問い合わせ内容全てを必須項目とします。
完了画面メッセージ入力欄からさらに下にスクロールし、”バリデーションルール追加”をクリックします。
フォームを設置したときに設定した項目名を入れて、好きなルールを指定してきます。
同じ要領で、他の項目の条件も追加していきます。
これで詳細設定が完了したので、公開をクリックして保存します。
識別子をゲット
設定したフォームを公開すると入力画面の右上にフォーム識別子が表示されます。
こちらは固定ページ上で問い合わせフォームを表示させるためのキー（ショートコード）になります。
コピーをして、固定ページ作成画面に行きましょう。
問い合わせ用固定ページの作成
プラグインはフォームの機能をつくるだけなので、これだけでは問い合わせフォームは表示されません。
なので、問い合わせ専用の固定ページをつくり、プラグインと連携させる必要があります。
手順としては新規に固定ページをつくり、先ほどの識別子を貼り付けるだけです。
とても簡単ですね😌
まず管理画面の”固定ページ”をクリックし、新規作成に進みます。
固定ページ作成画面に進んだら、タイトル（ここではお問い合わせ）を記入し、内容を記載する箇所に先ほどコピーした識別子を貼り付けて完了です。
動作確認
これで一連の作業が終わったので、あとはプレビューで動作確認をしていきます。
次にバリデーションが有効になっているか確認してみます。
何も入力せず確認ボタンを押すと「未入力」と表示され、機能していることがわかります。
続いて、必要項目を記入して確認ボタンを押すとちゃんと確認画面にいきます。
送信を押すと、ちゃんとメッセージも表示されていました。
これで問い合わせフォームの実装は完了です。
まとめ 『プラグイン』で楽々フォーム設置
いかがだったでしょうか。
今回は問い合わせページを作りながら、
・プラグインを用いながら問い合わせフォームを設置
・固定ページでつくったフォームを読み込む
といった作業を実践していきました。
自分で1からフォームをつくろうとしたらPHPをかなりしっかり学ばないといけません（かなり大変な作業です）。
ですが、Wordpressの拡張機能である『プラグイン』を使えば、htmlのちょっとした知識だけで簡単にフォームを設置することができます。
もちろん複雑なコードを書く必要もありません。
今回のお問い合わせフォーム設置も最初は少し複雑に感じると思いますが、覚えることはごくわずかです。
ぜひ手を動かしながら慣れていっていただければ嬉しいです😌
以上、少しでも参考になれば幸いです。
最後までお読みいただきありがとうございました。
2021年11月26日までセール中！！
UdemyでWordpressを学ぼう！
コメント