# フォームマッピング
### フォームマッピングを設定する
immedioのタグを設置した後は、フォームマッピングを設定する必要があります。フォームマッピングは、immedioがどのようにフォームデータを処理するかを定義します。
#### 自動マッピング
immedioでは、フォームのフィールドを自動的にマッピングする機能があります。これにより、手動でフィールドを設定する手間が省けます。
1. 管理画面の「企業設定」>「マッピング・ルーター」>「フォームマッピング」を開きます。
2. 「新規作成」ボタンをクリックします。
3. フォームのURLを入力し、マッピング自動生成ボタンをクリックし、自動生成されるのを待ちます。
4. 自動検出されたフィールドを確認します。この段階では、明らかに不要と思われるフィールドだけ削除しておきます。
5. 「保存」ボタンをクリックして、マッピングを保存します。
自動でうまくマッピングできなかった場合、手動でマッピングをすることになります。下記を参照ください。
#### 手動マッピング
**取得したいinput要素を特定する**
通常、フォームの中には、inputと呼ばれる要素があり、これらの要素にユーザーが入力した情報が格納されます。immedioでは、これらのinput要素を特定し、マッピングする必要があります。
まず、inputに対して紐づいているlabel要素を特定します。
1. 入力欄の側にある文字をクリックすると、対応するinput要素が選択されるかどうかを確認します
2. 選択される場合、文字がlabelとしてinputに紐づいています。紐づいている場合は、***label要素がある場合***に進みます
3. 選択されない場合は下記に進みます
4. ブラウザの開発者ツールを開きます（通常はF12キー）。
5. 「要素」タブを選択します。
6. フォームページを開きます。
7. フォームの中のinput要素を探します。input要素は通常、``タグで表されます。
8. 取得したいinput要素の`name`属性がある場合は、***name属性がある場合***に進みます
9. 取得したいinput要素の`id`属性がある場合は、***id属性がある場合***に進みます
10. name属性もid属性もない場合は、***何も取れない場合***に進みます
**label要素がある場合**
label要素がある場合は、フォームマッピングを下記のように設定します。
| マッピング先プロパティ | マッピング元フォーム項目 タイプ | マッピング元 フォーム項目 値 | 取得形式 |
| ----------- | ---------------- | --------------- | ----- |
| 任意の名前 | label | 取得したいlabelのテキスト | value |
例えば、以下のようなHTMLがある場合
```html
```
上記のHTMLに対して、フォームマッピングは以下のように設定します。
| マッピング先プロパティ | マッピング元フォーム項目 タイプ | マッピング元 フォーム項目 値 | 取得形式 |
| ----------- | ---------------- | --------------- | ----- |
| テスト項目 | label | Example | value |
**name属性がある場合**
name属性がある場合は、フォームマッピングを下記のように設定します。
| マッピング先プロパティ | マッピング元フォーム項目 タイプ | マッピング元 フォーム項目 値 | 取得形式 |
| ----------- | ---------------- | --------------- | ----- |
| 任意の名前 | name | 取得したいname属性の値 | value |
例えば、以下のようなHTMLがある場合
```html
```
上記のHTMLに対して、フォームマッピングは以下のように設定します。
| マッピング先プロパティ | マッピング元フォーム項目 タイプ | マッピング元 フォーム項目 値 | 取得形式 |
| ----------- | ---------------- | --------------- | ----- |
| テスト項目 | name | example | value |
**id属性がある場合**
id属性がある場合は、フォームマッピングを下記のように設定します。
| マッピング先プロパティ | マッピング元フォーム項目 タイプ | マッピング元 フォーム項目 値 | 取得形式 |
| ----------- | ---------------- | --------------- | ----- |
| 任意の名前 | query | # + 取得したいid属性の値 | value |
例えば、以下のようなHTMLがある場合
```html
```
上記のHTMLに対して、フォームマッピングは以下のように設定します。
| マッピング先プロパティ | マッピング元フォーム項目 タイプ | マッピング元 フォーム項目 値 | 取得形式 |
| ----------- | ---------------- | --------------- | ----- |
| テスト項目 | query | #example | value |
**何も取れない場合**
input要素に対して紐づくものが何もない場合、何かしらの属性を付与していただくようにHTMLを変更していただく必要があります。お手数ですが、以下のいずれかの方法で対応をお願いします。
1. input要素にlabel要素を追加する
2. input要素に`name`属性を追加する
3. input要素に`id`属性を追加する
**inputに対してマッピングができたら**
取得したい全てのinput要素に対して、上記の手順でマッピングを設定します。\
全てが完了したら、次へ進みます。
#### formIndexを設定する
フォームマッピングを設定した後は、formIndexを設定する必要があります。formIndexは、immedioがどのフォームを対象にするかを指定するためのものです。\
formIndexは、HTMLの中でのform要素の順番を指定します。通常は、0を指定します。\
一つのページに複数のform要素がある場合、取得したいform要素を、formIndexで指定します。1番目が0で、2番目が1の要領で設定する必要があります。
例
```html
```
この場合、1番目のform要素はformIndexは「0」、2番目のform要素はformIndexは「1」です。
#### HubSpotで作成されたフォームの場合
HubSpot作成されたフォームがiframeタグの中に設置されている場合、immedioのフォームマッピングにて、iframe要素を指定する必要があります。
1. immedioのフォームマッピング画面にて、利用するフォームマッピングを選択します
2. 「iframeSelector」に`iframe.hs-form-iframe`を入力します
### 注意事項
inputが`
```
* [ ] input要素が`