Instagramのフォームに自動入力させる方法

とりとん

自動入力あると手間省けて楽やのにな～

インスタのアプリにショップのアイコンが搭載されるなど、最近インスタのショッピング機能がどんどん発展しています。

インスタでは、商品の宣伝から購入まで簡単に導線を作ることができるので、商品の広告もよく見かけるようになってきました。

目に入った広告をクリックするユーザーは多くいますが、そこから商品購入までが長く途中で離脱してしまうユーザーも少なくありません・・

そこで今回は、商品購入やお問い合わせのフォームに、自動で情報が入力されるように設定する方法を紹介します！

この記事の内容は・・

ユーザー側の設定
フォームのコーディング
自動入力について
まとめ

ユーザー側の設定

インスタのフォーム自動入力機能は、ユーザーが設定している「連絡先情報」が自動入力される仕様になっています。

連絡先情報の設定

1.インスタ内でブラウザを開く。

※インスタのプロフィールにブログのURLを貼ってやってみました。

2.右上の「・・・」から「ブラウザー設定」を開く。

3.「お問い合わせフォームを自動入力」をONにして、「連絡先情報」を開く。

4.自動入力されたい内容を入力して「保存」をタップ。

※今回は全てテストで入力してみました。

5.該当の入力フォームをタップすると「Instagramで自動入力を使用しますか？」というポップアップが出てくるので「自動入力」をタップする。

6.先程入力しておいた情報が自動入力される。

※今回はメールアドレスのみですが、その他の入力フォームにも自動入力に該当する項目があった場合、全て一気に自動入力されます。

一度連絡先情報を登録しておけば、そのアカウントでログインしている状態でインスタのブラウザを使用している間は、自動入力することができます！

フォームのコーディング

連絡先情報に設定された情報を任意の場所に自動入力させるには、

フォーム部分のコーディングで表示したい情報をautocomplete属性で指定します。

氏名：autocomplete=”name”

住所：autocomplete=”address-line1″

部屋番号(任意)：autocomplete=”address-line2″

市区町村：autocomplete=”address-level2″

都道府県・州：autocomplete=”address-level1″

郵便番号：autocomplete=”postal-code”

電話番号：autocomplete=”tel”

メールアドレス：autocomplete=”email”

※メールアドレスは、type=”email”でも自動入力できました！

実際のコードは以下のようになります⬇️

HTML

<form>
  <label>氏名</label>
    <p><input type="text" name="name" autocomplete="name"></p>
  <label>住所</label>
    <p><input type="text" name="address-line1" autocomplete="address-line1"></p>
  <label>部屋番号</label>
    <p><input type="text" name="address-line2" autocomplete="address-line2"></p>
  <label>市区町村</label>
    <p><input type="text" name="address-level2" autocomplete="address-level2"></p>
  <label>都道府県</label>
    <p><input type="text" name="address-level1" autocomplete="address-level1"></p>
  <label>郵便番号</label>
    <p><input type="text" name="postal-code" autocomplete="postal-code"></p>
  <label>電話番号</label>
    <p><input type="text" name="tel" autocomplete="tel"></p>
  <label>メール</label>
    <p><input type="text" name="email" autocomplete="email"></p>
    <!--↑type="email"でもOK-->
</form>