NEWS ABOUT Solution WORKS TEAM BLOG お問い合わせ JP EN

WORDPRESS 虎の巻 ~お問い合わせ篇~

こんにちは

エンジニアの神谷です。

 

WordPress 虎の巻 と題し、作成を始めたブログも2回目。

1回目は、~出し分け篇~と称しまして、「Custom Field Template」というプラグインを紹介いたしました。

今回は、~お問い合わせ篇~として、別のプラグインを紹介いたします。

虎の巻

 

その前に、なぜ、WordPressで作成をするページにお問い合わせページが必要かといいますと、

昨今、企業もWordPressを導入し、ブログなどのページを作成しています。

その際、HPを見て興味を持った時、お問い合わせをするページがないとお問い合わせをすることが出来ません。

でも問題ありません。プラグインを使えば、お問い合わせページを簡単に作ることが出来ます。

 

 

今回紹介をするプラグインは「MW WP Form」というプラグインです。

お問い合わせ用のプラグインは、「Contact Form 7」が有名ですが、このプラグインはお問い合わせフォームに入力後、文章の確認をする手順がありません。

よく日本の企業では、お問い合わせフォームにお問い合わせ内容を入力後、送信をする前に文章の確認をする確認画面を設けていますが、「Contact Form 7」にはその確認画面がありません。

そのため、確認画面を設ける場合、プラグインを使用せず、自作でお問い合わせフォームを作成する必要があります。

ただ、お問い合わせフォームを自作するのは大変です。ですが、このプラグインを使えば、確認画面のあるお問い合わせページを作成することが可能です。

 

まずは、プラグインの導入から説明していきます。

1.プラグインの導入

wordpressにログインし、左メニューにある「プラグイン」から「新規追加」を選択します。

右上にあるテキストボックスに「MW WP Form」と入力し、検索をしてください。

検索をすると、先頭に検索をしたプラグインが表示されるので、赤枠内にある「今すぐインストール」をクリックしてください。

mwwpform

 

「今すぐインストール」をクリックすると、プラグインのインストールが行われます。

ただ、このままでは、使うことができないので、プラグインの有効化を行い、プラグインを使うことができるようにしてください。

 

また、このプラグインは画面遷移によって入力画面や確認画面や送信完了画面を表示しているため、

WordPressの標準関数である「wp_head()、wp_footer()、get_header() 」が無いと画面がうまく切り替わりません。

そのため、ページを表示させるテーマのファイルに「wp_head()、wp_footer()、get_header()」を記載しておいてください。

 

2.プラグインの設定

インストールを行い、プラグインを有効化すると、左メニューに「MW WP Form」が追加されます。メニューに追加された「MW WP Form」からプラグインの設定をしていきましょう。

左メニューにある「MW WP Form」にマウスカーソルを持って行くと「新規追加」が表示されるので、「新規追加」をクリックして、お問い合わせ用のフォームを作成します。

お問い合わせフォーム

 

まずはフォームのタイトルです。これは管理画面で他のフォームと混同しないようにわかりやすい名前をつけてください。

つぎにお問い合わせフォームの追加です。

タイトルの下に「フォームタグを追加」というものがあると思います。

ここで、どのフォーム(メールアドレスやお問い合わせタイトルなどのテキストボックスなど)にするか選択し、ページ内に追加をしていきます。

 

では実際に、フォームを作成してみましょう。

まずは、メールアドレスを入力するフォームです。

「メディアを追加」の下に「選択してください」と書かれたセレクトボックスがあります。

そのセレクトボックスをクリックすると、作成可能なフォームの一覧が表示されるので、その中にある「Email フィールド」を選択してください。

セレクトボックス内

 

選択をすると、「選択してください」の部分が「Email フィールド」に変わりますので、

Email フィールドに変わったことを確認して、「フォームタグを追加」をクリックしてください。

Emailフィールド

 

「フォームタグを追加」をクリックすると、ポップアップが表示されます。

フォーム

 

そのポップアップにフォームで使うnameやclassなどを設定して、「Insert」をクリックします。

Insertをクリックすると、下記のようにメールアドレスを入力することができるフォームがエリア内に追加されます。

email追加

 

このままではメールアドレスを入力するエリアが出来ただけなので他のパーツも追加してお問い合わせフォームを作成してみましょう。

 

ここでは、お問い合わせタイトル、名前、メールアドレス、お問い合わせ内容を追加してみました。

フォーム追加

 

さらに、このままでは、お問い合わせを送信するためのボタンがないため、お問い合わせ内容を送信するためのボタンを追加してみます。

そこで登場するのが、パーツを選択する一覧にあった「確認・送信」と書かれたボタンです。
このボタンが、「確認ボタンと送信ボタン」を兼ね備えており、送信前に確認画面を表示させることができ、お問い合わせ内容を確認することができます。

確認・送信

 

これで、お問い合わせフォームを作成することができました。

公開を行わないと、記事と同じで、下書き状態になってしまい、フォームを使うことが出来ません。そのため、必ずフォームを公開してください。

 

その後、「フォーム識別子」というのが、ページ内にありますので、その中にある識別子をコピーしておいてください。下の図では[mwform_formkey key=”8″]が識別子になります。

フォーム識別子

 

3.公開

プラグインを使って、お問い合わせフォームを作ることができました。

ただ、このままでは、お問い合わせフォームを呼び出すページが無いため、固定ページを作成して、お問い合わせフォームを公開してみましょう。

3-1.固定ページ作成

固定ページは、左メニューにある固定ページから「新規追加」を選択して、作成してください。

ページが開くと、固定ページのタイトルを入力する部分などが表示されるので、固定ページのタイトルを入力してください。
タイトルを入力すると、パーマリンクが設定されるので、固定ページを表示するためのURLに変更してください。(そのままでは、先ほど入力したタイトルになっているため)

お問い合わせページ

 

3-2.お問い合わせフォームを固定ページに追加

先ほど、コピーした「フォーム識別子」をお問い合わせフォームとして表示させる箇所に記載してください。

お問い合わせフォーム呼び出し

追加をした後、右側にある「公開」をクリックして、お問い合わせフォームのページが公開されます。

 

ページにアクセスしてみましょう。

先ほど、固定ページとして作成したURLをブラウザのアドレスバーに入力してください。

そうすると、下のような画面が表示されます。
表示されたページはお問い合わせ内容を入力する画面になります。

お問い合わせページの完成

 

お問い合わせの内容などを入力して、フォームの下部にある、「確認」ボタンをクリックしてください。

確認画面

 

そうすると、入力した内容を確認するためのページに変わります。
ただ、このままでは、入力内容を変更したい場合、前のページに戻ることができません。

そこで、先ほど作成したお問い合わせフォームに、「戻る」ボタンを追加して前のページに戻ることができるようにします。

フォームボタン追加

戻るボタンを追加後、確認ページを見ると、下の画面のようになります。

戻るボタン追加

これで、簡単なお問い合わせフォームを作成することが出来ました。

 

 

ここでは機能のごく一部を紹介しました。

他にも、お問い合わせページに必要な完了画面やお問い合わせした人に返す自動返信メールの設定なども作ることができます。

 

 

最後に

作るのが難しいお問い合わせページもプラグインを使えば簡単に作ることが出来ます。

プラグインを導入してお問い合わせページを作ってみてはいかがですか。

n.kamiya
ひとつ前の投稿 ひとつ前の投稿
ひとつ前の投稿 ひとつ前の投稿 WordPress 虎の巻 ~出し分け篇~