チャットボット経由でCMSの入力フォームを流し込み(Filling out CMS input forms via chatbot)

Develop, Build & Integrate CMS Development
1

質問です。(I have a question.)

ハブスポットのCMSサービスを利用しているページで、チャットボットを使用しています。

(We are using a chatbot on a page that uses Hubspot’s CMS service.)

【problem】

スマートフォンを使用し、チャットボット経由でサブミットボタンを押すとデータが取得できず、入力した情報が全てクリアされてしまいます。

(If you use a smart phone and press the submit button via the chatbot, no data is retrieved and all information entered is cleared.)

【supplement】

・チャットボットはJavaScriptで書かれた外部ツールです。

(Chatbots are external tools written in JavaScript.)

・チャットボットはハブスポットとは連携していません。

(The chatbot is not linked to the Hubspot.)

・チャットボットで入力した情報をハブスポットの入力フォームに流し込みしているだけです。その後、チェンジイベントを走らせています。

(The information entered by the chatbot is simply poured into the Hubspot’s input form. Then running a change event.)

Example）

$('input[name="firstname"]').val('Brian').change();

・最後のサブミットボタンはチャットボットで押します。チャットボットでサブミットボタンが押されたら、DOM操作でLPのハブスポットのサブミットボタンを押す処理をしています。

(The last submit button is pressed by the chatbot. Once the submit button is pressed by the chatbot, a DOM operation is used to push the submit button at the LP hub spot.)

Example）

document.getElementByID(“”).click();

・PCのスマートフォンモードで確認した時は、処理が成功し、データが流し込めていることを確認しました。

(When we checked in smart phone mode on the PC, we confirmed that the process was successful and data was flowing in.)

・iphoneやandroidで確認した時は、データが取得できず、入力した情報が全てクリアされてしまいます。

(When I check on my iphone or android, I cannot retrieve the data and all the information I entered is cleared.)

・他にも必要な情報があればお伝えいたします。

(We will provide any other information you need.)

【Question】

・iphoneやandroidを使用し、サブミットボタンを押した時に入力した情報が全てクリアされてしまう原因は何でしょうか。PCのスマートフォンでテストした際には成功しました。

(What causes all the information entered to be cleared when using iphone or android and pressing the submit button. when tested on a PC smart phone it was successful.)

2

Hi, @6ダイヤ :waving_hand: Thank you very much for your question. Troubleshooting an issue that is mobile-only via the community is likely to very challenging. And I am happy to help by asking some questions of my own.

Questions:

  • It could be that could be that smartphones are processing the JavaScript at a different time vs in-browser. Have you tried using a DOMContentLoaded event listener?
  • Have you checked the user agent to see if the issue might be specific to certain browsers? Or checked for quirks or differences in how certain versions handle JavaScript?
  • Have you looked for any difference in network speed between your successful tests and the failed ones?

Because your use case is customized, not that that’s a bad thing, it may not be possible to fully troubleshoot it in the community. My goal is to help get us closer to likely “good” answers and remove anything we can rule out or that you’ve already tried.

Thanks in advance! — Jaycee

3

Hi, @Jaycee_Lewis.

I’m appliciate for your replying.

Thanks to reply, This issue has been resolved.

原因はthe change eventの指定場所でした。

(The cause was the fire location of the change event.)

EXAMPLE)

:multiply:document.querySelectorAll(‘input[name=“questionnaire01”]’);

:hollow_red_circle:for(~){ document.querySelectorAll(‘.questionnaire01’)[i].firstChild; }

In this way, I resolved this issue.

Thank you very much!