WordPress連携 MW WP Formとの連携でお問い合わせ管理

著者：株式会社エイチツーオー・スペース たにぐち まこと （kintone エバンジェリスト）

はじめまして。kintone エバンジェリストのたにぐちです。
私はこれまで WordPress を利用したサイト制作や、スマートデバイス向けのサイトを制作してきました。
今回は kintone との相性が良い WordPress との連携をご紹介します。

kintone の環境は、developer network のメンバー登録をすると1年間無料の開発者用ライセンスを使えます。

• developer network のメンバー登録
• 1年間無料の開発者用ライセンスの申し込み
  ※申し込みにはメンバー登録が必要です

Index

• はじめに
• MW WP Form をインストールする
• フォームパーツを挿入する
• 【コラム】ショートコードとは
• 必須項目や書式チェックを設定しよう
• 固定ページを作成しよう
• kintone と連携しよう
• その他に必要な情報
• MW WP Form kintone をインストールする
• 動作を確認する
• お問い合わせデータを活用しよう

はじめに

Webサイトには、「フォーム」が欠かせません。
お問い合わせや、資料請求、予約やイベント等への参加など、フォームで受け付ければ次のようなメリットが得られます。

• 電話に比べて、受ける人の手が煩わされない
• Faxや郵送と比べて、直接電子データとして保管できる
• 自由なフォーマットのメールと比べて、必要な項目をしっかりと記入してもらえる

フォームの制作には、プログラミングの知識が必要となりますが、現在ではCMS（コンテンツ管理システム）に搭載されていたり、専用のサービスがあったりなどで、手軽に利用できます。

ここでは、中でも人気のある WordPress と、そのプラグインソフトである『MW WP Form』を利用し、手軽にフォームを作成してみましょう。

なお、本記事では WordPress のインストールなどはされていることを前提とします。これから導入する場合には、入門書などをご参照ください。

MW WP Form をインストールする

まずは、『MW WP Form』をインストールしましょう。WordPress に管理者権限でログインします。
管理者権限ではない場合、「プラグイン」というメニューが表示されないため、別途管理者の方にインストールを依頼すると良いでしょう。


メニューから「プラグイン→新規追加」をクリックし、右上の検索窓に「mw wp form」と入力します。
図のプラグインが見つかったら「インストール」ボタンと、続けて表示される「有効化」をクリックしましょう。
メニューバーに「MW WP Form」の項目が追加されます。
　

メニューをクリックし「新規追加」をクリックすると、図のような作成画面が表示されます。


基本的な使い方は、普段の投稿や固定ページを作るのと同じで、HTMLや画像なども挿入できます。
少し違うのはフォームパーツの挿入ボタンと、サイドエリアにある各種設定項目です。順番に設定していきましょう。

フォームパーツを挿入する

フォームには、名前の入力欄や都道府県の選択、ファイルのアップロードなど、さまざまな入力欄があります。MW WP Formでは、これらをマウス操作で挿入することができます。
まずは、タイトルに「お問い合わせ」と入力し、本文欄の右上のタブで「テキスト」を選んだ後、次のように入力しましょう。



続いて、「お名前」の下にある「`<dd></dd>`」の間にテキストカーソルを移動した後、図のドロップダウンリストをクリックして、「テキスト」をクリックします。


「フォームタグを追加」ボタンをクリックすると、図の設定画面が表示されるので、図と同じように設定をして「Insert」ボタンをクリックします。


テキストカーソルの位置に、ショートコード（コラム参照）が挿入されます。


同じ要領で、「メールアドレス」「テキストエリア」をそれぞれ、図のように設定して挿入しておきましょう。
　

さらに、最後の行に「確認・送信」ボタンを挿入します。これで、フォームの見た目が完成です。


できあがるHTMLは次のようになります。

【コラム】ショートコードとは

ショートコードは、WordPress 特有の機能で、"[xxx]" という大括弧を使ったキーワードをいいます。
例えば本文では、次のようなショートコードが挿入されました。

MW WP Formプラグインがインストールされている場合、このショートコードを発見すると、自動的に次のようなHTMLに変換されます。

このように、複雑なコードやHTMLの場合に、WordPress では代わりに短いコードを利用して表現し、Webページに表示するときに変換するというしくみが「ショートコード」です。

必須項目や書式チェックを設定しよう

次に、今準備した項目のうち、必須項目にしたいものやメールアドレスなどの書式チェックを設定します。
画面を少しスクロールして図の、バリデートチェック欄で「追加」ボタンをクリックしましょう。


まずは、対象のパーツ名を入力します。パーツ名は、先ほど項目を作ったときにつけた名前です。
ここでは、「お名前」を必須にするため「yourname」と入力しましょう。
そして、「必須項目」にチェックを入れます。これで、お名前は必須項目になりました。


同じく、「email」も必須とし、またこちらは「メールアドレス」にもチェックを入れておきましょう。これで、簡単な書式チェックが行われます。


こうして、項目を厳密にチェックすることで入力ミスを防ぎ、間違いのお問い合わせなどを減らすことができます。
バリデーションルールを追加したら画面右上の「公開」ボタンをクリックしましょう。

固定ページを作成しよう

MW WP Formは、作成しただけでは画面上には表示されません。
右側に表示される「ショートコード」を利用し、記事内やサイドバー、フッターなど、自由な場所に埋め込むことができます（利用しているテーマの対応によります）。


ここでは、お問い合わせページを作成して埋め込んでみましょう。

「固定ページ→新規追加」をクリックして作成画面を表示し、サブジェクトに「お問い合わせ」と入力します。
また、本文エリアにコピーしておいたショートコードを貼り付けましょう。


公開して、表示すると図のような問い合わせフォームが表示されます。


空のまま送信しようとすると図のように、エラーチェックもされるようになっています。これで、お問い合わせフォームの完成です。

kintone と連携しよう

通常、MW WP Formは送信された内容を、電子メールで管理者宛に送信します。
これを、kintone に送信できるようにすれば、問い合わせ履歴を管理できたり、ナレッジベースとして活用することができるようになって便利です。早速やってみましょう。

まずは、kintone にアプリを作成します。「はじめから作成」を選択し、図のようなフォームを作成しましょう。


この時注意したいのが、「フィールドコード」です。これを、先ほどフォームを作成したときの「name」と合わせて設定してください。


ここでは、次のように設定します。

フィールド名	フィールドタイプ	フィールドコード	備考
お名前	文字列（1行）	yourname
メールアドレス	リンク	email	入力値の種類はメールアドレスを選択
お問い合わせ内容	文字列（複数行）	message

フォームを保存したら、このアプリの「APIトークン」を発行するため、「設定」タブをクリックします。
「カスタマイズ／サービス連携」の「APIトークン」をクリックしたら、「生成する」ボタンをクリックします。
APIトークンが生成されます。「アクセス権」を「レコード追加」のみに設定しましょう。


このAPIトークンの文字列をコピーして、メモ帳など別のツールに貼り付けておきましょう。
また、上部の説明文部分で、次の箇所に「アプリID」が記載されています。


上記の場合、「app=107」の部分の「107」というのが、アプリIDになります。これもメモしておきましょう。
左上の「保存」ボタンをクリックし、「アプリを公開」ボタンをクリックします。

その他に必要な情報

MW WP Formと、kintoneを連携するために必要な情報は、次のものがあります。それぞれ確認しておきましょう。

• ユーザー名
• パスワード
• サブドメイン
• アプリID
• APIトークン

サブドメインとは、kintoneにアクセスするときのURLに記載されています。
例えばURLが「{subdomain}.cybozu.com」の場合は「{subdomain}」がサブドメインになります。

すべての情報が整ったら、いよいよ連携していきます。

MW WP Form kintone をインストールする

MW WP Formと kintone の連携は、専用のプラグインが準備されています。
「プラグイン→新規追加」で、右上の検索窓に「me wp form kintone」など入力しましょう。プラグインが見つかるので、インストールと有効化を行ないます。


「MW WP Form」メニューに「kintone」という項目が増えるので、クリックします。先ほどコピーした各項目を設定していきましょう。
最後の「フォーム識別子」とは、お問い合わせフォームのID番号です。ショートコードの以下の部分で確認することができます。

> [mwform_formkey key="4"]

この場合フォーム識別子は「4」になります。


設定できたら「保存ボタン」をクリックします。

動作を確認する

お問い合わせ画面を再び表示します。
場所が分からなくなってしまった場合は「固定ページ→固定ページ一覧」から「お問い合わせ」にマウスを近付けると表示される「表示」リンクをクリックすると良いでしょう。


確認画面で「送信」ボタンをクリックすると、フォームの内容が kintone に登録されます。kintone を表示してみましょう。


メッセージが無事に挿入されました。うまく挿入されない場合は、次のようなポイントを確認してください。

• APIトークンの権限で「追加」が許可されていますか？
• APIトークンを発行した後、「保存」「アプリを公開」ボタンをクリックしていますか？
• ユーザー名・パスワードは間違いありませんか？
• フォーム識別子・アプリIDの数字は間違いありませんか？

一部のデータだけが挿入されている場合は、「フィールドコード」が間違えている可能性があります。
フォームの「name」で設定した値と、フィールドコードが一致しないと挿入されませんので、ご注意ください。

また、以下のようなエラーメッセージ（メールが送信できない）が表示される場合は WordPress とメールサーバーとの設定に問題がある可能性があります。WordPress やメールサーバーの設定を見直してください。
エラーメッセージ： There was an error trying to send your message. Please try again later.

お問い合わせデータを活用しよう

こうして、お問い合わせフォームと kintone を連携すれば、コメント機能を利用して複数の担当者がお問い合わせに対して対応できます。
また、プロセス管理を使って「返信済み」「解決済み」といったステータス管理をしたり、メールワイズと連携してメールの返答を自動化するなど、データを活用することができます。

是非、様々なアイデアを実現すると良いでしょう。