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

フォローする

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

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

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

 

Index

 

はじめに

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

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

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

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

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

 

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

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

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

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

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

 

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

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


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

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

テキストカーソルの位置に、ショートコード(コラム参照)が挿入されます。
1-8.png

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

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

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

 

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

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

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

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

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

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

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

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

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

 

固定ページを作成しよう

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

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

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

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

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

kintone と連携しよう

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

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

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

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

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

 

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

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

上記の場合、「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」など入力しましょう。プラグインが見つかるので、インストールと有効化を行ないます。
3-1.png

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

> [mwform_formkey key="4"]

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

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

動作を確認する

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

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

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

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

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

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

 

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

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

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

 

次回コンテンツのご紹介

さ~て、来週のWP連携は~

「kintone のデータを WordPress に表示」、「画像の表示」、「絞り込んで表示」の3本です。お楽しみに!

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
ファーストストラテジー

添付ファイルのkintone連携のやり方がおわかりになりましたら教えて頂けると幸いです。

kintone側の添付ファイルのチェックフィールドと同じnameにして

[mwform_file name="***"]

でアップしても動きません。。

どうぞよろしくお願いいたします。

Avatar
cybozu Development team

ファーストストラテジー様

お世話になっております。
cybozu developer network 運営事務局です。

返信が遅くなってしまい申し訳ありません。

いただいご質問について確認したところ、wordpressからkintoneに添付ファイルを登録する機能は
MW WP Form kintoneの仕様上、できないということがわかりました。

すみませんが、別案のご検討をよろしくお願いします。

Avatar
y-kishi

お世話になっております。

 

チェックボックスの登録についてご質問があります。

 

入力内容の確認画面を経由すると、チェックボックスの値がkintoneに登録されませんでした。

確認画面無しで送信すると問題なくチェックボックスの値は登録されます。

 

以下、確認した内容です。

■ボタン項目(input)

送信ボタン ⇒ OK

確認・送信ボタン ⇒ NG

 

■ボタン項目(button)

送信ボタン ⇒ NG

 

チェックボックスの値を登録するには、確認画面を経由させないという回避方法しかないのでしょうか。

お手数ですがご確認いただけますと幸いです。

Avatar
cybozu Development team

y-kishi様

お世話になっております。
cybozu developer network 運営事務局です。反応が遅くなってしまい申し訳ありません。

こちら確認させていただいたところ、記載いただいた通り、
チェックボックスを登録するには確認画面なしで送信する必要があります。

確認画面を経由させない方法以外は、まだ回避方法はないかと思います。

ご確認のほどよろしくお願いいたします。

ログインしてコメントを残してください。
Powered by Zendesk