「フォーム」について

最終更新日:

2021/11/11のUI刷新 第一弾リリースにてカラースキーム(配色設計)とタイポグラフィ(文字の書体、大きさ、配列のしかたなど)を変更しております。オンラインマニュアルに掲載している画面キャプチャと実際の管理画面の配色や文字の状態が異なる場合がございますがご了承いただけますと幸いでございます。

フォームはSATORIに自動連携されるフォームを簡単に作成できる機能です。

目次

 

フォームで可能になること

フォームには以下の2種類があり、SATORIのカスタマー情報に連携する項目を自由に選択できます。

  • エンベッドフォーム
  • ポップアップフォーム

また、フォーム自動返信用メールテンプレートおよびフォーム通知用のメールテンプレートに使用できる任意の項目を自由に追加できるフォームを作成できます。

 

フォーム作成の流れ

フォーム作成のフローは、以下ステップの通りです。エンベッド・ポップアップどちらのフォームも同じ順序で作成できます。

  1. 事前準備(フォーム設計)
  2. 事前準備(ウェブページ機能を使って完了ページを作成)(任意)
  3. 事前準備(カスタマ―カスタム項目を作成)(任意)
  4. 事前準備(付与するタグを登録)(任意)
  5. 事前準備(自動返信メール用のメールテンプレート登録)(任意)
  6. 事前準備(社内通知用のメールテンプレート登録)(任意)
  7. 事前準備(社内通知メールの通知ユーザーの決定・登録)(任意)
  8. 事前準備(Webhook設定)(任意)
  9. 事前準備(フォームを表示するセグメントを登録する)(任意)
  10. ポップアップかエンベッドを選択する
  11. フォームの各種項目を設定する
  12. CSSを設定する(任意)
  13. プレビューを確認する
  14. フォームを表示するセグメントを選択する(任意)
  15. ポップアップを登録する
  16. エンベッドを登録する
  17. フォームを設置する

 

操作方法

 

1. 事前準備(フォーム設計)

フォーム作成の前に以下について事前に考えておくとスムーズに作成いただけます。

  • フォーム送信完了時の動作を「完了メッセージ」と「完了画面遷移」どちらにするのか
    完了メッセージの場合、完了メッセージに記載する内容の用意
    完了画面遷移の場合、遷移させる完了ページの用意
  • フォームにはどのような項目を設定するのか
  • フォーム送信完了時にタグを付与させるのか
  • フォーム送信完了時にカスタマーへ自動返信メールを送信するのか
  • フォーム送信完了時に社内通知メールを送信するのか
  • フォーム送信完了時に他アプリケーションへ連携をするのか(Webhook連携)
  • フォームを表示させるターゲット(セグメント)を指定するのか

 

2. 事前準備(完了ページの作成)(任意)

フォーム送信完了時に遷移させる完了ページの作成をします。ウェブページ機能を利用して作成することも可能です。詳細はこちらのオンラインマニュアルをご参照ください。

 

3. 事前準備(カスタマ―カスタム項目を作成)(任意)

フォーム項目の「入力された値を格納するカスタマーカスタム項目」を設定することで、フォームで入力/選択された内容をカスタマーカスタム項目に反映させることができます。

独自で作成されたフォーム項目に入力された情報をカスタマー情報に登録/反映させる場合は、その格納先としてカスタマーカスタム項目を登録します。 詳細はこちらのオンラインマニュアルをご参照ください。

 

4. 事前準備(付与するタグを登録)(任意)

フォーム送信完了時にカスタマーへ付与するタグを登録します。 詳細はこちらのオンラインマニュアルをご参照ください。

 

5. 事前準備(自動返信メール用のメールテンプレート登録)(任意)

フォーム送信完了時にカスタマーへ送信する自動返信メールのメールテンプレートを作成します。詳細はこちらのオンラインマニュアルをご参照ください。

 

6. 事前準備(社内通知用のメールテンプレート登録)(任意)

フォーム送信完了時にSATORIに登録しているユーザー宛へ送信する通知メールのメールテンプレートを作成します。詳細はこちらのオンラインマニュアルをご参照ください。

 

7. 事前準備(社内通知メールの通知ユーザーの決定・登録)(任意)

フォーム送信完了時の通知メールをどのユーザー宛に送信するのかを決めておきます。 通知するユーザーを新たに登録する場合は、こちらのオンラインマニュアルをご参照ください。

 

8. 事前準備(Webhook設定)(任意)

Webhook機能を使って、フォームに入力した内容をあらかじめ指定した任意のWebアプリケーションに対して登録や通知を行うことができます。 詳細はこちらのオンラインマニュアルをご参照ください。

 

9. 事前準備(フォームを表示するセグメントを登録する)(任意)

フォームを表示するターゲットにセグメントを指定することができます。セグメントは特定のページへアクセスしたカスタマ―をグループ化できる機能です。 詳細はこちらのオンラインマニュアルをご参照ください。

 

10. ポップアップかエンベッドを選択する

[フォーム]>[+]ボタンよりフォームの新規登録を行います。 [ポップアップ]と[エンベッド]のいずれかを選択してください。

ポップアップ:フォームをポップアップで表示させたい場合に選択します
エンベッド:フォームを任意の箇所に埋め込みで表示させたい場合に選択します

 

_____20220315_1.png

11. フォームの各種項目を設定する

11-1. フォーム項目の設定
11-2. カスタマーカスタム項目への連携
11-3. 自動返信メールおよび通知設定

11-1.フォーム項目の設定

既存のフォームを雛形で利用する場合には「雛型の読み込み」から、フォームリストをご確認ください。

_____20220315_2.png

入力が必要な項目は以下の通りです。

  • 「フォームパーツ名」
  • 「情報獲得経路」には作成するフォームから入力があった場合に、そのカスタマーに付与したい「情報獲得経路」を入力してください。初期値は自動的に「フォームパーツ名」が挿入されるようになっています。
  • 「確認画面」を有りにすると、入力内容の確認画面が表示されるようになります。
  • 「登録済みカスタマーの場合の動作」では、メールアドレスが既に登録されているカスタマーに対して、カスタマー項目をフォームの入力内容で上書きするかしないかを設定します。
    「登録済みカスタマーの場合の動作」の選択肢 値が登録済みのカスタマー項目 値が未登録のカスタマー項目
    既存データを上書きしない 上書きされない 登録される
    既存データを上書き 上書きされる(※) 登録される
    ※「既存データを上書き」の場合でも、フォームで項目が未入力またはスペースのみの場合、既存のカスタマー項目が保持されます。
  • 「フォーム上部タイトル」にはポップアップされたフォームの上部に表示させたい文字列を指定してください。エンベッドにはこの項目はありません。

_____20220315_3.png

  • 「表示タイプ」は、「リンクを表示」または「メッセージを表示」を選択してください。
  • 「プライバシーポリシーURL」には、フォームを設置する予定のウェブサイトのプライバシーポリシーのURLを記入してください。この項目を入力するとフォーム表示に出力される「当社のプライバシーポリシーに同意の上、送信してください。」という文言にリンクが挿入されます。
    ※「当社のプライバシーポリシーに同意の上、送信してください。」を任意の文言に変更することも可能です。変更方法はこちらをご参照ください。
  • 「プライバシーポリシーメッセージ」には、任意のメッセージを入れることが可能です。また記述の仕方によっては、プライバシーポリシーではなく利用規約や約款という任意の言葉に変更してリンクすることも可能です。下記のサンプルは、『http://example.com』を適切なリンク先に変更していただきまして、プライバシーポリシーメッセージに入れていただくと、利用規約に変更してリンクを別ウィンドウで表示できるようになります。
<a href="https://example.com" target="_blank" rel="noopener noreferrer">利用規約はこちら</a>

※セキュリティの観点から、rel属性にnoreferrerを記述することを推奨しています。 ただし、noreferrerは、リンク先に対して参照元のリンクを渡さないようにする設定となります。 そのため、貴社のマーケティング施策等において、参照元のリンク情報の取得が必要な場合は、noreferrerの記述を外すようお願いします。

  • 「プライバシーポリシー同意チェックボックス」には任意の文言を設定することが可能です。ここに記入した文言がチェックボックスの横に表示されます。
  • 「プライバシーポリシー同意チェックエラー」にはチェックが漏れていた際に表示する文言を設定することができます。
  • 完了時の動作」で、完了時に同じページ内で完了メッセージを表示させるか、完了ページに遷移させるかを選択してください。
    ※外部のCVタグを読み込みさせたい場合は「完了画面遷移」を選択し、そのページに外部CVタグとSATORI計測タグを設置いただくようお願いいたします。
    ※完了画面ページは貴社にて作成いただく必要がございます。

_____20220315_4.png

_____20220315_14.png

  • フォーム送信完了時に付与するタグ」にはフォームに入力をしたカスタマーに付与したいタグを指定してください。複数のタグを付与することが可能です。

※設定後に「タグの編集画面」にて当該タグ名称を変更してもフォーム送信完了時に付与するタグには反映されません。フォーム送信完了時に付与するタグ名称を変更する場合には、当画面にてタグを指定しなおしてください。

_____20220315_5.png

  • 「フォーム項目」では、フォームに表示させる項目の設定が可能です。

※「設定済み項目」には「氏名」「メールアドレス」が初期値としてセットされています。
※「メールアドレス」はSATORIのシステム上必須項目です。

_____20220315_6.png

項目 入力制限
カスタマー メールアドレス 255文字まで、適正なメールアドレス
カスタマー 氏名 氏・名それぞれ255文字まで、半角、全角、英数字が入力可能
カスタマー 氏名(ふりがな) 氏・名それぞれ255文字まで、半角、全角、英数字が入力可能
カスタマー 企業名 255文字まで
カスタマー 部署名 255文字まで
カスタマー 役職 255文字まで
カスタマー 電話番号 255文字まで
カスタマー 携帯電話番号 255文字まで
カスタマー ウェブサイト 255文字まで、適正なURL
カスタマー 住所 255文字まで
カスタマー メモ 500文字まで
カスタマー タグ付与(単一選択) タグ名
カスタマー タグ付与(複数選択) タグ名
テキスト 255文字まで、改行不可
テキストエリア 500文字まで(※)、改行可
数値  
日付  
都道府県  
単一選択  
複数選択  

 ※「テキストエリア」をご利用の場合はフォーム表示時に複数行の入力エリアとして表示されます。

※「設定済み項目」は各項目の左側のハンバーガーアイコン(三本線のアイコン)のドラッグ&ドロップにより、表示順を変更することが可能です。

forms_240523_1.png

  • 「メールアドレス」〜「カスタマータグ付与(複数選択)」までの項目

フォームに入力された内容が、カスタマー詳細のカスタマー項目に登録されます。
ただし、メールアドレスが既に登録されているカスタマーに対する更新動作は、「登録済みカスタマーの場合の動作」の設定に従います。

  • 「テキスト」~「複数選択」までのフォームのカスタム項目

「入力された値を格納するカスタマーカスタム項目」を指定した場合(※)、フォームに入力された内容が、カスタマー詳細の指定のカスタマーカスタム項目に登録されます。ただし、メールアドレスが既に登録されているカスタマーに対する更新動作は、「登録済みカスタマーの場合の動作」の設定に従います。
※「入力された値を格納するカスタマーカスタム項目」の詳細は、「11-2. カスタマーカスタム項目への連携」をご参照ください。

また、これらの項目はメールテンプレートのテンプレートグループ「フォーム自動返信用」および「フォーム通知用」に特殊変数として使用できます。

 

_____20220315_7.png

 

それぞれ「ラベル」「プレースホルダー」「補助テキスト」を必要に応じて記入し、「この設定で項目を追加」をクリックしてください

一覧の中で赤字で示した「単一選択」「複数選択」については、以下のように「選択肢」が表示されます。

 

単一選択」はフォーム上でラジオボタンによる選択項目が表示されます。

複数選択」はフォーム上でチェックボックスによる選択項目が表示されます。

  • 「選択肢の表示名」に入力した値はラジオボタンおよびチェックボックスの項目名になります。
  • 「付与するタグ」に入力した値はフォーム入力時にその選択肢を選択したカスタマーに付与したいタグを指定します。

選択肢の入力が完了したら、「選択肢を追加」をクリックしてください。

すべての選択肢の入力が完了したら、「この設定で項目を追加」をクリックしてください。

_____20220315_8.png

 

11-2. カスタマーカスタム項目への連携

フォームのカスタム項目を選択して追加する際に、入力された値の格納先としてカスタマーカスタム項目で設定した項目を選択することが可能です。

_____20220315_9.png

  • 「種類」からフォームのカスタム項目(テキスト、テキストエリア、数値、日付、都道府県、単一選択、複数選択)を選択
  • 「入力された値を格納するカスタマーカスタム項目」の欄が表示
  • 既に設定している「カスタマーカスタム項目」の「カスタム項目名」から値の格納先を選択
  • 特殊変数を設定可能。設定した場合は「フォーム自動返信用」および「フォーム通知用」のみで使用可能。

フォームの項目ごとにデータタイプが設定されているため、一致するデータタイプのカスタマーカスタム項目のみが格納先の選択肢となります。

フォーム項目とカスタマーカスタム項目の連携、データタイプについては下記の表を参照ください。

フォーム項目 カスタマーカスタム項目との連携 カスタマーカスタム項目連携時のデータタイプ
メールアドレス
カスタマー 氏名
カスタマー 氏名(ふりがな)
カスタマー 企業名
カスタマー 部署名
カスタマー 役職
カスタマー 電話番号
カスタマー 携帯電話番号
カスタマー ウェブサイト
カスタマー 住所
カスタマー メモ
カスタマー タグ付与(単一選択)
カスタマー タグ付与(複数選択)
テキスト 文字列/複数行テキスト
テキストエリア 複数行テキスト
数値 実数/整数
日付 日付
都道府県 文字列/複数行テキスト
単一選択 選択肢/文字列/複数行テキスト
複数選択 文字列/複数行テキスト

 

なお、同一の項目にフォームで設定したバリデーションとカスタマーカスタム項目で設定したバリデーションがある場合、フォームへ入力があった際には、両者のバリデーションがそれぞれ確認されます。その両方をパスできなければエラーとなります。

 

11-3. 自動返信メールおよび通知設定

新規にテンプレートを作成または、既存テンプレートを編集するには、グローバルメニュー「コンテンツ - メールテンプレート」にて操作していただく必要があります。操作いただくために、現在の作成画面を離れた場合、作成途中のものは破棄されますので、一度保存されることをお勧めします。

_____20220315_10.png

「自動返信メール設定」に進むと、「送信しない」もしくは「送信する」のいずれかを選択できます。「送信する」を選択すると、メールテンプレートのテンプレートグループ「フォーム自動返信用」のテンプレートを選択することができます。

_____20220315_11.png

同様に「通知設定」に進むと、「送信しない」もしくは「送信する」のいずれかを選択できます。「送信する」を選択すると、メールテンプレートのテンプレートグループ「フォーム通知用」のテンプレートを選択することができます。また「+」マークで通知先をアカウントユーザーに対して任意に増やすことができます。

※カスタマーカスタム項目を値の格納先としない場合の例※
「フォーム自動返信用」および「フォーム通知用」メールテンプレートには、カスタマー情報には入らない任意の項目も特殊変数として使用することが可能です。「日付」の項目を利用して誕生日を入力していただく場合には下記のように特殊変数名を指定できます。

_____20220315_12.png

_____20220315_13.png

「フォーム自動返信用」および「フォーム通知用」メールテンプレートに{{params:特殊変数名}}としていただくと特殊変数として使用可能です。

 

12. CSSを設定する(任意)

[プレビュー・CSS設定] 画面の右側で、CSSを変更することが可能です。
ポップアップフォームのデザインテンプレートについては、こちらをご参照ください。
※HTML・CSSの具体的な記述につきましてはサポート範囲外とさせていただいております。

 

13. プレビューを確認する

[プレビュー・CSS設定] 画面で、フォームのプレビューを確認します。
「スマートフォンモード」をONにすると、スマートフォンでの表示プレビューに切り替わります。
※プレビューページは「管理画面上で作成したコンテンツが外部のCSS等影響を受けていない状態のプレビュー」になります。実際に設置するページによっては、CSSやJavaScriptの影響を受ける可能性もございますので、テストの上調整をお願いいたします。

例) ポップアップの場合

_____20220209_1.PNG

 

14. フォームを表示するセグメントを選択する(任意)

フォームを表示するセグメントを選択します。
すべてのカスタマー(ウェブサイトに訪問したすべてのカスタマー)にフォームを表示させる場合は、「全てのカスタマーを対象にする」を選択します。

_____20220209_3.PNG

 

15. ポップアップを登録する

「10. ポップアップかエンベッドを選択する」でポップアップを選択した場合、本ステップを実施します。

ポップアップ設定

[ポップアップ設定] 画面で、ポップアップの表示方法を指定します。項目は以下の通りです。

_____20220209_4.PNG

項目 内容
① 表示する場所

ポップアップを表示する場所を「右上」「中央」「右下」から指定します

② ポップアップさせるタイミング

ポップアップさせるタイミングを以下種類から選択します

  1. 即時
    即時にポップアップが表示されます
  2. スクロール量
    指定したピクセルだけスクロールした際にポップアップが表示されます
  3. スクロールパーセント
    指定した%だけスクロールした際にポップアップが表示されます
  4. 'satori__popup_button' class付きボタン押下時
    'satori__popup_button' というクラス名の付いたHTML要素をクリックした際にポップアップが表示されます
  5. 時間
    ポップアップが表示されるまでの秒数を指定できます
  6. 任意のタイミング
    SatoriHTMLPart.showWidget(); を実行することにより、ポップアップが表示されます

③ 閉じるボタンの動作

ポップアップの閉じるボタンを押した時の挙動を選択します

  1. 以降表示しない
    閉じるボタンを押すと、そのポップアップは表示されなくなります
  2. 再アクセス時には再度表示
    閉じるボタンを押すと最小化され、再度ポップアップを設置したページにアクセスが有った場合には、再度ポップアップが表示されます
  3. 以降最小化状態で表示
    閉じるボタンを押すと最小化され、再度ポップアップを設置したページにアクセスが有った場合には、最小化状態のまま表示されます

コンテンツの設定

コンテンツ欄の右側「+」からコンテンツを追加できます。複数のコンテンツを登録することでABテストが可能です。
※複数のコンテンツを登録した場合、ターゲット条件を満たすコンテンツが均等な割合で表示されます。順番はランダムに決まります。
_____20220209_7.PNG

目標の設定

目標欄の「歯車」マークから目標を設定できます。目標を設定することで、ポップアップのコンテンツ毎の目標到達数(目標到達率)を計測可能です。
※目標到達数(目標到達率)はコンテンツが「HTMLパーツ」の場合のみ計測可能です。

_____20220209_8.PNG

 

16. エンベッドを登録する

「10. ポップアップかエンベッドを選択する」でエンベッドを選択した場合、本ステップを実施します。

エンベッド設定

[エンベッド設定] 画面で、エンベッド名と説明(任意)を入力し、コンテンツを追加する場合は、コンテンツ欄の右側「+」から登録します。
※複数のコンテンツを登録した場合、ターゲット条件を満たすコンテンツが均等な割合で表示されます。順番はランダムに決まります。
_____20220210_1.PNG

目標の設定

目標欄の「歯車」マークから目標を設定できます。目標を設定することで、エンベッドのコンテンツ毎の目標到達数(目標到達率)を計測可能です。
※目標到達数(目標到達率)はコンテンツが「HTMLパーツ」の場合のみ計測可能です。

_____20220209_8.PNG

 

17. フォームを設置する

すべての設定を完了し、下部の「登録」ボタンをクリックすると、作成したフォームを表示させるための設置コードが表示されます。
設置コードは、「コードをコピーする」ボタンを押すとコピーできます。_____20220209_2.PNG

ポップアップとエンベッドの設置方法について、それぞれ以下にご案内します。

ポップアップの場合

表示されたポップアップ設置コードをWebページに設置する方法が2つあります。

  • Webサイトに直接設置する場合

ポップアップ設置コードを、ポップアップを表示したいウェブページのbody閉じタグ(</body>)の直前に設置します。
SATORI計測タグを設置されている場合は、SATORI計測タグを誤って削除されないようにご注意ください。

  • GTM(Googleタグマネージャー)を使用して設置する場合

【活用TIPS】 GTMを利用してポップアップ設置コードを設置する方法をご参照の上ご設定ください。
※活用支援サイトはSATORI有料ご契約者様のみご覧いただけます。閲覧方法についてはこちらをご確認ください。

エンベッドの場合

エンベッドを表示させたいページの任意の位置(<body>タグ内)に、表示された設置コードを挿入してください。

 

活用支援サイト関連コンテンツ

※活用支援サイトはSATORI有料ご契約者様のみご覧いただけます。閲覧方法についてはこちらをご確認ください。

 

よくある質問/トラブルシューティング

・フォームに関連するFAQはこちらにまとめております。

この記事は役に立ちましたか?

3人中2人がこの記事が役に立ったと言っています