チャットボットのテキストフォームに入力された内容を、既存ページ内のフォームに反映させることができます。

※プレミアムプラン以上でご利用可能な機能です。

以下では例として「問い合わせをしたい」というボタンがクリックされた時にテキストフォームを表示し、入力結果をページ内の既存のフォームに反映する方法をご案内いたします。
 

１．設定方法

(1) 管理画面右上の設定ボタンをクリックします。

(2) 画面左「チャットボット」＞「チャットボット＋」をクリックします。 

(3)「パーツ追加」をクリックします。

(4)「パーツ名」「概要」を入力します。
※画面右上のIDの欄は空欄で構いません。チャットボットプラス作成時に自動でIDが割り振られます。

(5)「ルール」の「＋ルールを追加」ボタンをクリックします。

(6) (5)で表示される「表示ルール」の、
1つめのプルダウンから「訪問者の発言」をクリックして選択し、
2つ目のテキストエリアに「お問い合わせしたい」と入力、
3つめのプルダウンから「一致する」をクリックして選択します。

(7)「アクション」のプルダウンから、「テキストフォーム」をクリックして選択します。

(8)「送信時の動作」のプルダウンから、「Webページのフォームに値を追加」をクリックして選択します。

(9)「フォームセレクタ」欄に、既存ページの「form要素のID」を入力します。

※「即座に送信する」にチェックを入れると、チャットボット内の「送信」ボタンをクリックした際、即座に確認ページなどへ遷移させることができます。

(10) テキストフォームの「訪問者属性名」欄に、既存ページのform内の項目「name属性」を入力します。

「form要素のID」や「name属性」は、デベロッパーツールを利用して確認することができます。 フォームが設置されているページを表示した状態で、Windowsであれば「F12」、Macであれば「Command + Option + i」を入力することで、デベロッパーツールをご利用いただけます。

■デベロッパーツール の使い方の詳細は、こちらのページをご参照ください。

■「form要素のID」「name属性」の詳細な確認手順については、本ページ下部をご覧ください。

(11) 必要に応じてフォームを追加し、ラベル、送信後アクションを設定します。

(12)「更新」ボタンをクリックします。

２．form要素のID、name属性の確認方法

デベロッパーツールを使用して「form要素のID」と「name属性」を確認する方法をご説明します。

(1) 値を追加したい既存のフォームページを開いた状態で、デベロッパーツールを起動します。
※デベロッパーツール の使い方の詳細は、こちらのページをご参照ください。

(2) デベロッパーツール左上にある選択モードボタンをクリックします。

(3) 値を反映させたい入力フォーム枠内に、マウスカーソルを合わせます。

(4) 該当のフォームのコードが表示されるので、「form要素のID」は「id=」の部分を、「name属性」は「name=」の部分を確認します。

 

他にも値を反映させたい入力フォームがあれば、同様の方法で確認します。