[HubSpot]フォームが読み込まれたあとにイベント処理を行いたい（要素を取得したい）

公開日:2024/04/26

HubSpotで作成し、ページに埋め込んだフォームに対して入力項目を取得して何か処理を行いたい場合、下記のような方法ではうまくいきません。

document.addEventListener('DOMContentLoaded', function() {
    const inputTag = document.querySelector('input[name="xxx"]');
}, false);

DOMContentLoadedイベントは、Hubspotのフォームが読み込まれる前に発生してしまうため、上記サンプルコードのようにinputタグやtextareaタグなどの要素を取得しようとしても未定義となってしまいます。

このような場合は、HubSpot側で用意されているイベントを利用してフォームの読み込みが完了したタイミングを検知することができます。

window.addEventListener('message', event => {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
        const inputTag = document.querySelector('input[name="xxx"]');
    }
}, false);

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。