このページで学べること

フォームエディターのさまざまなコンテンツブロック(つまり、要素と入力フィールド)をサインアップフォームで使用して、外観や購読者から収集する情報の種類をカスタマイズする方法をご確認ください。

ブロックの追加タブについて

サインアップフォームエディタで、フォームに追加できるさまざまなコンテンツブロックを確認するには、ブロックを追加タブをクリックしてください。

ブロックカテゴリは5種類あります:

  1. 外部連携
  2. 要素
  3. 入力フィールド
  4. 電話番号
  5. マーケティングの同意

フォームプレビューにブロックをドラッグ&ドロップすると、左側のサイドバーに編集オプションが表示されます。ここから、テキストやスタイル設定など、ブロックの詳細を調整できます。この編集メニューの下部では、ブロックの表示設定も構成でき、すべてのデバイスに表示するか、デスクトップのみに表示するか、モバイルのみに表示するかを制御できます。フォームの動的ブロックについて詳しくはこちら。

The editing menu for a text field in a form showing the Visibility setting configured to show on all devices.
The editing menu for a text field in a form showing the Visibility setting configured to show on all devices.

モバイル専用のサインアップフォームを作成している場合は、基本:モバイルフォームのデザインをご覧ください。

フォームにコンテンツブロックを追加する際のベストプラクティス

フォームでサイト訪問者に複数の情報(例:誕生日、メールアドレス、電話番号など)を尋ねるために複数のブロックとフィールドを含める予定の場合は、複数ステップフォームを使用します。複数ステップフォームを使用すると、訪問者に一度に多くのフィールドを提示して負担をかけることなく、訪問者についてより詳しく把握し、複数チャネルにわたって同意を収集できます。

フォームでメールアドレスと電話番号の両方を求める場合、リストの増加とコンプライアンスの観点から、これらのフィールドを 2 つの異なるステップに含めるのがベストプラクティスです。

フォーム要素

サインアップフォームの要素は、テキスト、ボタン、画像、クーポンなどのコンテンツをフォームに追加します。これらのブロックは、サインアップフォームの目的を訪問者に伝え、フォームを操作できるようにします。

The Elements menu of options within the Add blocks tab in the form editor.
The Elements menu of options within the Add blocks tab in the form editor.

テキストブロック

テキストブロックでは、見出し、手順、その他の表示用テキストなど、フォームにテキストコンテンツを挿入できます。Klaviyo のフォームエディターは UTF エンコーディング標準を使用しており、ラテン文字、絵文字、2 バイト文字などに対応しています。また、画像 URL の入力オプションを使用してインライン画像を追加できます。

ボタンブロック

ボタンブロックを使用すると、フォームを送信したユーザーに関する情報を Klaviyo で収集して保存できます。ボタンでは、閲覧者がフォームを閉じたり送信したりできるほか、ウェブサイト上の別ページに誘導したり、SMS メッセージングの購読を促したりできます。

ボタンに対して、次のアクションのいずれか 1 つを選択します。

The Button Click Action dropdown on the button menu showing on the action options, including Close form, Submit form, Go to URL, and Subscribe via SMS.
The Button Click Action dropdown on the button menu showing on the action options, including Close form, Submit form, Go to URL, and Subscribe via SMS.
  • フォームを閉じる
    フォームが閉じ、データはKlaviyoに送信されません。
  • フォームを送信
    訪問者が入力したフォームフィールドはすべてKlaviyoに送信され、フォームは送信後フィールドで選択したオプション(次のステップを表示、URLに移動、またはフォームを閉じる)に基づいて進行します。
  • [URL に移動](別のページにリダイレクト)
    訪問者は指定した URL にリダイレクトされ、フォーム フィールドのデータは Klaviyo に送信されません。宛先 URL を入力する際は、https:// を含む完全な URL を使用してください(例: https://help.klaviyo.com/hc/en-ushelp.klaviyo.com/hc/en-us ではなく)。

Go to URL アクションは、不完全な URL では機能しません。

  • テキストメッセージで購読
    このオプションは、モバイル専用フォーム、またはすべてのデバイスを対象とするフォームのSMSオプトインステップのモバイル表示で設定できます。これにより、訪問者は数回タップするだけでSMSを購読できます(タップ・トゥ・テキスト)。訪問者がテキストメッセージで購読ボタンをクリックすると、テキストメッセージアプリが開き、購読するために送信できる事前入力済みのメッセージが表示されます。
    • テキストメッセージキーワードのドロップダウンからキーワードを選択してください。これは、購読するために送信元番号へテキスト送信する必要がある単語です。キーワードはアカウントレベルで設定され、購読者がどのリストに参加するかを決定します。
    • オプトインメッセージをカスタマイズします。これは訪問者のメッセージングアプリに表示されます。このフィールドでは、GSM-7文字を最大160文字(1通)まで入力できます。絵文字を含む特殊文字は無効です。
    • 複数の地域で運用していて送信元番号が 1 つ以上ある場合は、Sending Region の下で適切な番号を選択します。
The SMS Settings menu that appears when a button click action is set to Subscribe via SMS.
The SMS Settings menu that appears when a button click action is set to Subscribe via SMS.

サインアップフォームが送信するリストを変更する

アクションがフォームを送信に設定されているボタンの場合、ボタンの設定で、新規購読者が登録されるリストを変更できます。テキストメッセージで購読の場合は、代わりに選択したキーワードによってリストが決まります。フォームの送信リストを変更するには:

  1. フォームエディター内で、アクションがフォームを送信に設定されているボタンをクリックしてください。
  2. 左側に表示されるメニューで、List to Submit.

    の下にある新しいリストを選択します。
The list to submit dropdown on the button menu where you can select which list your form submits to.
The list to submit dropdown on the button menu where you can select which list your form submits to.
  1. 編集サイドバーで [戻る] をクリックします。
  2. フォームのコンテンツに問題がなければ、[公開またはスケジュール]をクリックし、[今すぐ公開]を選択します。すべてのブロッキングアラートを解決してから、確認のために[今すぐ公開]をクリックします。フォームがすでに公開されている場合でも、新しい購読者が新たに選択したリストに登録されるように、変更内容を公開する必要があります。

隠しフィールドの送信

非表示フィールドは、Klaviyo の購読者プロファイルに追加される追加プロパティです。これにより、フォームを操作した訪問者を追跡できます。デフォルトでは、すべてのフォームに、リストに追加された方法を識別する非表示フィールドとして $source プロパティがあります。

このオプションは、アクションがフォームを送信に設定されているボタンでのみ利用できます。

$source プロパティやその他のプロパティ名をカスタマイズできます。フォーム上の他の入力と同様に、既に誰かのプロファイルに存在するプロパティ用の隠しフィールドを追加した場合、フォームが送信されるとそのプロパティは新しい値に上書きされます。たとえばフォームでコレクションの好みを収集し、以前にお客様がメンズコレクションに関心があると選択していたとします。このフォームに女性向けコレクションへの関心を示す隠しフィールドがある場合、ボタンがクリックされると preferences プロパティは上書きされます(つまり、男性向けから女性向けに変更されます)。

新しい非表示プロパティを追加するには、プロパティを追加を選択し、プロパティを選んで値を入力してください。

The Submit Hidden Fields option which appears when a button click action is set to Submit Form.
The Submit Hidden Fields option which appears when a button click action is set to Submit Form.

画像ブロック

画像ブロックを使用すると、フォームに画像(例:ロゴ)を追加できます。このブロックを使用して画像を追加し、ブランドのルック&フィールに合わせることができます。

JPEG、PNG、GIF ファイルはすべて使用できます。ウェブ上で表示されるすべての画像と同様に、ファイルサイズが大きいほど読み込み時間が遅くなります。最適なパフォーマンスのため、ファイルサイズは 50~100 KB を目安にしてください。

フォームエディターの [スタイル] タブで、背景画像や サイド画像 を追加することもできます。

クーポンブロック

クーポンブロックを追加してサイト訪問者がサインアップフォームを送信するよう促し、含まれているクーポンを使用してサイトで購入できるようにします。

フォームに静的またはユニーククーポンのクーポンコードを追加できます。ユニークコードを使用するには、成功ステップにクーポンブロックを追加してください。これは静的コードの推奨配置場所でもあるため、買い物客はコードを取得するためにウェブサイトから離れる必要がありません。設定の詳細については、クーポンコードをサインアップフォームに追加するガイドをご覧ください。

SMS 開示ブロック

SMS のコンプライアンスを維持できるように、SMS のオプトイン ボタンの上に SMS 開示文言を配置する必要があります。SMS 開示文言について詳細はこちら。

カウントダウンタイマー

カウントダウンタイマーはサインアップフォームに緊急性を持たせることができ、特別プロモーションやホリデー向けメッセージと組み合わせて使用されることがよくあります。フォームにカウントダウンタイマーを追加する方法について詳細はこちら。

サインアップカウンター ブロック

最近のフォームアクティビティを表示するために、登録数カウンターブロックを追加します(例:"過去1時間で登録数500件!")。このブロックはソーシャルプルーフを使用して、サイト訪問者の購読を促します。

A sign-up form with a sign-up counter block displaying real-time sign-up count on an example website.
A sign-up form with a sign-up counter block displaying real-time sign-up count on an example website.

登録カウンターブロックをフォームに追加すると、次の設定を構成できます:

  • 表示
    訪問者は、成功ステップに到達する前(たとえば、前のステップでメールアドレスを送信した時点)にカウントできます。URLに移動とタップしてテキスト送信ボタンのクリックは、購読が完了していなくてもカウントされる場合があります。期間を選択してください:
    • 過去30日間の登録者数
    • 過去7日間の登録者数
    • 過去24時間の登録者数
    • 過去1時間の登録者数
  • __ 回送信後に表示
    ブロックを表示するために必要な最小送信回数を指定します。
The Sign-up counter block menu within the form editor showing an example form set to show Sign-ups from the past 30 days after 20 submits.
The Sign-up counter block menu within the form editor showing an example form set to show Sign-ups from the past 30 days after 20 submits.

最小送信回数に達するまで、このブロックはサイト訪問者に表示されません。最小送信回数を満たすと(例:200回の送信)、このブロックがフォームに表示されます。

デフォルトのテキストには、選択した表示設定が反映されます。このテキストは設定可能ですが、登録数が表示されるため、{{ form_submit_count }}タグは削除しないでください。

入力フィールド

入力フィールドを使用すると、メールアドレス、名前、誕生日など、サイト訪問者の情報を収集できます。

The input fields options that can be added into a sign-up form from the Add Blocks tab of the form editor.
The input fields options that can be added into a sign-up form from the Add Blocks tab of the form editor.

すべての入力フィールドはプロファイルプロパティに接続する必要があります。プロファイルプロパティは、各購読者が送信したデータを保存するために使用されます。フォームに入力フィールドを追加する場合は、プロファイルプロパティドロップダウンから既存のプロパティを選択するか、新しいプロパティ名を入力してから作成を選択し、その名前を選択します。

The Profile Property dropdown where you can select or create a property to go with an added input field.
The Profile Property dropdown where you can select or create a property to go with an added input field.

特に指定がない限り、これらのフィールドからの入力は各個人のプロファイルページ内に保存されます。

外部連携(例:Shopify タグ)で同期された Klaviyo のカスタムプロファイルプロパティを更新することはお勧めしません。これは、次回外部連携が同期する際に、これらが上書きされるためです。

メール入力フィールド

メール入力フィールドを使用すると、訪問者がメールアドレスを入力して、フォームに接続されているリストを購読できます。各ステップには、デバイスビューごとにメール入力フィールドを1つ設定できます。メール入力フィールドは完了ステップに表示できません。

電話番号フィールド

電話番号フィールドを追加すると、デフォルトでプロモーション SMS 同意が収集され、任意の SMS メッセージを送信できるようになります。このブロックは、送信された電話番号を検証し、許容される番号形式で保存されるようにします。まだの場合は、SMS 同意を収集する場合に SMS を有効にし、SMS 同意を収集するあらゆる場所に含めるために 開示文言を設定してください。

必要に応じて、フォームが収集する SMS 同意の種類を調整できます。ただし、開示文言が同意の種類と一致し、送信するメッセージの種類の例を含めて、購読者が同意する内容を理解できるようにしてください。

また、購入者に最適な登録方法が表示されるように、SMS 同意を収集する際に 動的ブロックを使用することもできます。

テキスト入力フィールド

テキスト入力フィールドは、(日付やメールアドレスなどのように)特定の形式に従う必要がない情報を収集する場合や、あらかじめ用意した選択肢のリストを提示するのが適切でない場合に使用します。セグメンテーションとフローフィルターでは、大文字/小文字とスペルが区別される点にご注意ください。このデータをセグメンテーションやフィルタリングに使用する予定がある場合は、他のフィールドタイプを検討してください。

テキスト入力フィールドの一般的な使用例は、購読者の名前を収集することです。名フィールドを追加するには、ラベルまたはプレースホルダー テキストに “名” を使用し、プロファイルプロパティとして 名 を選択してください。

The Text input menu that appears when you add a text input field into a sign-up form in the form editor.
The Text input menu that appears when you add a text input field into a sign-up form in the form editor.

ラジオボタン

ラジオボタンでは、事前設定された選択肢のリストが提示され、購読者はそのうち 1 つのみ選択できます。これらは、性別や年齢層などの情報を収集する際に役立ちます。

The radio button menu in the form editor showing an example radio button collecting a beverage choice profile property.
The radio button menu in the form editor showing an example radio button collecting a beverage choice profile property.

プロファイルプロパティ フィールドには、このプロパティに使用したい名前を入力してください。例えば、フォームで訪問者にコーヒーと紅茶のどちらが好みかを尋ねる場合、「Beverage Choice」のようなカスタム プロファイルプロパティを使用してください。

プロパティ オプション セクションの ラベル 列を使用して、購読者が選択できるオプションを追加します。次に、Values 列に対応する値を追加します。これらの値はフォームに入力した人のプロファイルに保存されるため、参照しやすい回答の省略版を使用することをご検討ください。

オプションラベルが「Tea drinker」と「Coffee drinker」の場合、値はそれぞれ「tea」と「coffee」にできます。

購読者がラジオボタンの質問に回答すると、その回答は文字列の データ型として保存されます。

マルチチェックボックス

複数チェックボックスではオプションの一覧が表示され、購読者は希望する数だけオプションを選択できます。複数チェックボックスは、好みの情報、関心領域、デモグラフィック情報、また購読者が 1 つ以上のオプションを選択できる必要があるあらゆる質問を収集するのに便利です。

The multi checkbox menu in the form editor showing an example multi checkbox collecting baking preference profile property.
The multi checkbox menu in the form editor showing an example multi checkbox collecting baking preference profile property.

ラジオボタンフィールドと同様に、複数チェックボックスフィールドには、プロファイルプロパティ、ラベルのセット、値のセットが必要です。

購読者が複数チェックボックスの質問に回答すると、選択したオプション数に関係なく、その回答はリストの データ タイプとして保存されます。

日付フィールド

日付フィールドは、購読者が日付の値を入力するための最適な方法です。入力された値は、セクメンテーションに使用したり、日付ベースのフローをトリガーしたりできます。

The Date menu that appears when you add a date input field to a sign-up form.
The Date menu that appears when you add a date input field to a sign-up form.

たとえば、誕生日にフローでクーポンコードを送信できるよう、購読者の誕生日を収集したい場合があります。この場合は日付フィールドを追加し、対応するプロファイルプロパティを birthday に設定します。顧客に関する日付情報を収集したい場合は、日付が正しくフォーマットされるように日付ブロックを使用します。

フォームで訪問者が日付を入力する方法(例:DD/MM/YYYY)をカスタマイズできます。日付フィールドから送信された日付は、選択した入力形式に関係なく、日付データ型を使用して保存されます。年を含まない(例:MM DD)日付形式メニューのオプションを選択すると、現在の年が自動的に含まれます。

ドロップダウンフィールド

ドロップダウンはラジオボタンと同様に、購読者が事前設定されたリストから 1 つのオプションを選択できます。このオプションは、フォームのスペースを節約するのにも役立ちます。選択肢が 4 つを超える場合は、ラジオボタンではなくドロップダウンの使用を検討してください。ラジオボタンや複数チェックボックスと同様に、ドロップダウンフィールドにはプロファイルプロパティ、ラベルのセット、および値のセットが必要です。

The dropdown input field menu showing an example dropdown collecting a pet type profile property.
The dropdown input field menu showing an example dropdown collecting a pet type profile property.

マーケティングの同意

トラッキングへの同意

必要に応じて、トラッキング同意ブロックを使用し、訪問者が登録する際にメールマーケティングおよびメールのトラッキングへの同意を求めてください。

フォームエディタでブロックを追加を開き、マーケティング同意の下にあるトラッキング同意を見つけてください。メール入力があるステップにドラッグ&ドロップしてください。トラッキング同意ブロックが表示されるすべてのデバイスで、メールの入力欄が表示されていることを確認してください。フォームにはトラッキング同意ブロックを1つ配置できます。成功ステップ、または「Shopで続行」を含むステップには配置できません。

同意の収集方法を選択してください

同意を個別またはまとめて取得で、次を選択してください:

  • 個別のチェックボックス:訪問者に、マーケティングとトラッキングの同意について別々に選択肢を提示します。
  • 統合チェックボックス:チェックボックス1つで、マーケティングとトラッキングへの同意を訪問者に求めます。統合同意は、EUのすべての国で受け入れられているわけではありません。このオプションを選択する前に、法務またはプライバシーチームに相談してください。

メールトラッキングタイプで、同意を収集するアクティビティを選択してください:

  • メール開封数
  • メールのクリック数

少なくとも1つのトラッキングタイプを選択してください。マーケティング同意は常にブロックに含まれます。

開封とクリックの両方に別々のチェックボックスを使用している場合は、必要に応じて、マーケティング同意を個別に保ったまま2つのトラッキングの選択肢をまとめるために開封とクリックに1つのチェックボックスを使用を有効にしてください。

チェックボックスを個別に設定の場合は、マーケティングへの同意を必須にするを使用して、マーケティングへの同意を必須にします。この設定は、チェックボックスを統合では使用できません。トラッキングへの同意は任意です。

同意テキストをカスタマイズ

同意文言で、収集する同意タイプの開示文を編集してください。提案されたテキストを、法務チームまたはプライバシーチームが承認した文言に置き換えてください。

開示と撤回で、チェックボックスの下に表示されるテキストを編集してください。受信者が同意を撤回する方法に沿った手順を記載し、プライバシーに関する通知へのリンクを追加してください。

[同意セクションのタイトル]の下で、同意の選択肢の導入文をカスタマイズします。[同意セクションのタイトルを表示]を使用して、フォームに表示するかどうかを制御します。スクリーンリーダーは、タイトルが非表示になっている場合でも読み上げることができます。

公開前に、プレースホルダーテキストをブランド名、送信ボタンのラベル、関連リンクに置き換えてください。「上」や「下」などの参照がフォームのレイアウトと一致していることを確認してください。

ブロックのスタイルを設定する

ブロックの背景色、余白、アニメーションをカスタマイズします。[このブロックの共有入力フィールドスタイルを上書き]を有効にしない限り、入力フィールドには共有フォームスタイルが適用されます。

トラッキングへの同意を把握

メールマーケティング同意とトラッキング同意は、別々の許可です。受信者のトラッキング同意を変更しても、メールマーケティングの購読は変更されません。

受信者がそのトラッキングタイプを購読解除すると、Klaviyoは対応する開封またはクリックイベントの記録を停止します。明示的なトラッキング同意が記録されていない場合、別の適用可能なトラッキング制御によって無効化されない限り、トラッキングはデフォルトで有効です。

開封トラッキングの管理とクリックトラッキングの管理についての詳細はこちらをご覧ください。

年齢認証

年齢認証ブロックは、対応国の対象事業者で利用できます。サインアップフォームに年齢認証ブロックを追加するには、事前にアカウントで年齢認証を有効にしておく必要があります。Klaviyoでの年齢認証の詳細をご覧ください。

要素または入力フィールドを削除

サインアップフォームから任意の要素または入力フィールドを削除するには:

  1. エディタ内のフォームプレビューで、削除したいブロックにカーソルを合わせます。
  2. 表示されるゴミ箱アイコンを選択します。
A mouse hovering over a text block in an example form preview showing the trash can icon visible.
A mouse hovering over a text block in an example form preview showing the trash can icon visible.
  1. ブロックを削除ダイアログで、ブロックを削除をクリックしてください。誤ってブロックを削除した場合は、削除が編集履歴に残っている間に、エディタで元に戻すをクリックしてください。

次の手順

1つのフォームでデスクトップビューとモバイルビューを別々に設定したい場合は、フォームで動的ブロックを使用するに関するガイドをご覧ください。

サインアップフォームにブロックとフィールドを追加したら、ブランドに合わせてスタイルを設定する方法をご覧ください。公開する準備ができたら、公開またはスケジュールをクリックし、今すぐ公開を選択してください。ブロッキングアラートをすべて解決したら、今すぐ公開をクリックして確定してください。埋め込みフォームを作成する場合は、フォームの埋め込みコードもサイトに追加する必要があります。

その他のリソース

  • サインアップフォームのスタートガイド

    Klaviyo でサインアップフォームの作成とカスタマイズを行い、ウェブサイトに公開する方法を学びましょう。より多くの顧客からメールアドレスや電話番号を収集できるようになり、長期的な顧客関係を構築できます。

  • フォームで動的ブロックを使用する方法

    動的ブロックについて、またサインアップフォームでそれらを使用して、デスクトップとモバイルデバイスの買い物客に向けて異なる表示と体験を作成する方法をご確認ください。フォーム内の任意のブロックは、表示設定を調整することで動的にできます。

この記事は役に立ちましたか?
この記事へのフィードバックは、上記のボタン・記入欄よりご提供ください。 サポートへの連絡方法.

Klaviyo の詳細を見る

コミュニティ
同業者、パートナー、Klaviyo のエキスパートとつながり、インスピレーションを得たり、インサイトを共有したり、あらゆる質問への回答を得たりできます。
パートナー
特定のタスクや継続的なマーケティング管理のためのサポートを、Klaviyo 認定エキスパートに依頼しましょう。
サポート

アカウントからサポートにアクセスしてください。

メールサポート (無料トライアルと有料アカウント) 24 時間 365 日利用可能

チャット/バーチャル アシスタント
利用可否は地域およびプランタイプによって異なります