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

著者名:たにぐち まこと 株式会社エイチツーオー・スペース (External link) (kintone エバンジェリスト)

目次

はじめに

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

本サイトで、一年間無料の kintone 開発者環境を取得できます。
詳細は kintone 開発者ライセンス(開発環境) を確認してください。

カスタマイズの概要

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

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

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

ここでは、中でも人気の WordPress とそのプラグインソフトの『MW WP Form』と『MW WP Form kintone』を利用し、手軽にフォームを作成してみましょう。
『MW WP Form kintone』を利用すると、フォームに入力された内容を kintone のレコードとして登録できます。

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

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

まずは以下の手順を参考に、「MW WP Form」をインストールしましょう。

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

  2. メニューから「プラグイン→新規追加」をクリックし、右上の検索窓に「mw wp form」と入力します。

  3. 図のプラグインが見つかったら「インストール」ボタンと、続けて表示される「有効化」をクリックしましょう。
    メニューバーに「MW WP Form」の項目が追加されます。

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

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

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

フォームには、名前の入力欄や都道府県の選択、ファイルのアップロードなど、さまざまな入力欄があります。
MW WP Form では、これらをマウス操作で挿入できます。
以下の手順を参考に設定しましょう。

  1. まずは、タイトルに「お問い合わせ」と入力し、本文欄の右上のタブで「テキスト」を選んだ後、次のように入力しましょう。

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

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

  4. テキストカーソルの位置に、 ショートコード が挿入されます。

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    <dl>
    <dt>お名前</dt>
    <dd>[mwform_text name="yourname" size="60"]</dd>
    <dt>メールアドレス</dt>
    <dd>[mwform_email name="email" size="60"]</dd>
    <dt>内容</dt>
    <dd>[mwform_textarea name="message" cols="50" rows="5"]</dd>
    </dl>
    [mwform_submitButton name="mwform_submitButton-45" confirm_value="確認画面へ" submit_value="送信する"]

ショートコードとは

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

1
<input type="text" name="yourname" size="60" value="">

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

1
<input type="text" name="yourname" size="60" value="">

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

必須項目や書式チェックを設定する

次に、今準備した項目のうち、必須項目にしたいものやメールアドレスなどの書式チェックを設定します。

  1. 画面を少しスクロールして図の、バリデートチェック欄で「追加」ボタンをクリックしましょう。

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

  3. 同じく、「email」も必須とし、またこちらは「メールアドレス」にもチェックを入れておきましょう。
    これで簡単な書式チェックが行われます。
    こうして、項目を厳密にチェックすることで入力ミスを防ぎ、間違いのお問い合わせなどを減らすことができます。

  4. バリデーションルールを追加したら画面右上の「公開」ボタンをクリックしましょう。

固定ページを作成する

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

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

  1. 「固定ページ→新規追加」をクリックして作成画面を表示し、サブジェクトに「お問い合わせ」と入力します。

  2. 本文エリアにコピーしておいたショートコードを貼り付けましょう。

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

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

kintone の設定をする

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

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

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

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

    フィールド名 フィールドタイプ フィールドコード 備考
    お名前 文字列(1行) yourname
    メールアドレス リンク email 入力値の種類はメールアドレスを選択
    お問い合わせ内容 文字列(複数行) message
  3. フォームを保存したら、このアプリの「API トークン」を発行するため、「設定」タブをクリックします。

  4. 「カスタマイズ/サービス連携」の「API トークン」をクリックしたら、「生成する」ボタンをクリックします。
    API トークンが生成されます。
    「アクセス権」を「レコード追加」のみに設定しましょう。

  5. この API トークンの文字列をコピーして、メモ帳など別のツールに貼り付けておきましょう。

  6. また、上部の説明文部分で、次の箇所に「アプリ ID」が記載されています。

    上記の場合、「app=107」の部分の「107」というのが、アプリ ID になります。
    これもメモしておきましょう。

  7. 左上の「保存」ボタンをクリックし、「アプリを公開」ボタンをクリックします。

その他に必要な情報

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

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

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

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

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

MW WP Form と kintone の連携は、専用のプラグインが準備されています。
以下の手順を参考に設定しましょう。

  1. 「プラグイン→新規追加」で、右上の検索窓に「me wp form kintone」など入力しましょう。
    プラグインが見つかるので、インストールと有効化を行います。

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

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

動作を確認する

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

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

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

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

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

また、メールが送信できないときに、以下のようなエラーメッセージが表示される場合は、WordPress とメールサーバーとの設定に問題があるかもしれません。
WordPress やメールサーバーの設定を見直してください。

1
There was an error trying to send your message. Please try again later.

おわりに

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

ぜひ、さまざまなアイデアを実現するとよいでしょう。

information

この Tips は、2017 年 6 月版 kintone で動作を確認しています。