Tips

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で動作を確認しています。