フォームマッピング

フォームマッピングを設定する

immedioのタグを設置した後は、フォームマッピングを設定する必要があります。フォームマッピングは、immedioがどのようにフォームデータを処理するかを定義します。

自動マッピング

immedioでは、フォームのフィールドを自動的にマッピングする機能があります。これにより、手動でフィールドを設定する手間が省けます。

管理画面の「企業設定」>「マッピング・ルーター」>「フォームマッピング」を開きます。
「新規作成」ボタンをクリックします。
フォームのURLを入力し、マッピング自動生成ボタンをクリックし、自動生成されるのを待ちます。
自動検出されたフィールドを確認します。この段階では、明らかに不要と思われるフィールドだけ削除しておきます。
「保存」ボタンをクリックして、マッピングを保存します。

自動でうまくマッピングできなかった場合、手動でマッピングをすることになります。下記を参照ください。

手動マッピング

取得したいinput要素を特定する

通常、フォームの中には、inputと呼ばれる要素があり、これらの要素にユーザーが入力した情報が格納されます。immedioでは、これらのinput要素を特定し、マッピングする必要があります。

まず、inputに対して紐づいているlabel要素を特定します。

入力欄の側にある文字をクリックすると、対応するinput要素が選択されるかどうかを確認します
選択される場合、文字がlabelとしてinputに紐づいています。紐づいている場合は、label要素がある場合に進みます
選択されない場合は下記に進みます
ブラウザの開発者ツールを開きます（通常はF12キー）。
「要素」タブを選択します。
フォームページを開きます。
フォームの中のinput要素を探します。input要素は通常、<input>タグで表されます。
取得したいinput要素のname属性がある場合は、name属性がある場合に進みます
取得したいinput要素のid属性がある場合は、id属性がある場合に進みます
name属性もid属性もない場合は、何も取れない場合に進みます

label要素がある場合

label要素がある場合は、フォームマッピングを下記のように設定します。

マッピング先プロパティ

マッピング元フォーム項目タイプ

マッピング元フォーム項目値

取得形式

任意の名前

label

取得したいlabelのテキスト

value

例えば、以下のようなHTMLがある場合

<label for="example">Example</label>
<input type="text" id="example" name="example">

上記のHTMLに対して、フォームマッピングは以下のように設定します。

マッピング先プロパティ

マッピング元フォーム項目タイプ

マッピング元フォーム項目値

取得形式

テスト項目

label

Example

value

name属性がある場合

name属性がある場合は、フォームマッピングを下記のように設定します。

マッピング先プロパティ

マッピング元フォーム項目タイプ

マッピング元フォーム項目値

取得形式

任意の名前

name

取得したいname属性の値

value

例えば、以下のようなHTMLがある場合

<input type="text" name="example">

上記のHTMLに対して、フォームマッピングは以下のように設定します。

マッピング先プロパティ

マッピング元フォーム項目タイプ

マッピング元フォーム項目値

取得形式

テスト項目

name

example

value

id属性がある場合

id属性がある場合は、フォームマッピングを下記のように設定します。

マッピング先プロパティ

マッピング元フォーム項目タイプ

マッピング元フォーム項目値

取得形式

任意の名前

query

# + 取得したいid属性の値

value

例えば、以下のようなHTMLがある場合

<input type="text" id="example">

上記のHTMLに対して、フォームマッピングは以下のように設定します。

マッピング先プロパティ

マッピング元フォーム項目タイプ

マッピング元フォーム項目値

取得形式

テスト項目

query

#example

value

何も取れない場合

input要素に対して紐づくものが何もない場合、何かしらの属性を付与していただくようにHTMLを変更していただく必要があります。お手数ですが、以下のいずれかの方法で対応をお願いします。

input要素にlabel要素を追加する
input要素にname属性を追加する
input要素にid属性を追加する

inputに対してマッピングができたら

取得したい全てのinput要素に対して、上記の手順でマッピングを設定します。全てが完了したら、次へ進みます。

formIndexを設定する

フォームマッピングを設定した後は、formIndexを設定する必要があります。formIndexは、immedioがどのフォームを対象にするかを指定するためのものです。 formIndexは、HTMLの中でのform要素の順番を指定します。通常は、0を指定します。一つのページに複数のform要素がある場合、取得したいform要素を、formIndexで指定します。1番目が0で、2番目が1の要領で設定する必要があります。

例

<form>
    <input type="text" name="example1">
</form>
<form>
    <input type="text" name="example2">
</form>

この場合、1番目のform要素はformIndexは「0」、2番目のform要素はformIndexは「1」です。

HubSpotで作成されたフォームの場合

HubSpot作成されたフォームがiframeタグの中に設置されている場合、immedioのフォームマッピングにて、iframe要素を指定する必要があります。

immedioのフォームマッピング画面にて、利用するフォームマッピングを選択します
「iframeSelector」にiframe.hs-form-iframeを入力します

注意事項

inputが<form>タグに囲われている必要があります。必ず<form>タグの中にinputがあることを確認してください。

<!-- NG❌な例。formタグに囲われていないinput -->
<body>
    <input type="text" name="example">
</body>

また、<form>タグが二重に囲われている場合も動作しません。二重に囲われているとは、下記のような状態です。

<!-- NG❌な例。二重にformタグに囲われている -->
<form>
    <form>
        <input type="text" name="example">
    </form>
</form>

input要素が<form>タグに囲われている
input要素が二重に囲われていない

動作確認

作成したフォームマッピングが動作しているかどうかは、Chrome拡張機能によって確認することができます。

詳しくはこちらを参照してください。

社内規制などによってChrome拡張機能で動作確認ができない場合、実際の動かすことでの動作確認となります。こちらはスキップしてください。

確認

Chrome拡張機能を使って、想定しているinput要素の値が取得できることを確認した

前へメンバー設定

次へフローチャートルーターを設定する

最終更新 1 年前

役に立ちましたか？