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

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

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

1．設定方法

(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=」の部分を確認します。 

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