サインアップフォームでカスタム HTML ブロックを使用する方法
カスタム HTML ブロックは、HTML の記述に慣れているユーザー向けの高度な機能です。HTML に慣れていない場合でも、フォームエディタの標準ブロックとスタイル設定オプションで、必要なカスタマイズはすべて行えます。
このページで学べること
カスタム HTML ブロックを使用して、フォーム エディタで利用可能なブロック以外にも、Klaviyo のサインアップフォームに独自のマークアップを追加する方法を学びましょう。HTML ブロックを使用すると、コンテンツとレイアウト（カスタム見出し、書式設定済みテキスト、リスト、表、画像、リンク）を細かく制御でき、フォームをブランドやメッセージに正確に一致させることができます。
セキュリティ上の理由により、HTML ブロックでサポートされるのは特定のタグと属性のみです。そのセット以外の内容はフォームのレンダリング時に自動的に削除されるため、作成したすべての HTML がサイト上に表示されるとは限りません。以下のセクションでは、サポートされているタグと属性、および常に削除されるものを一覧で示します。
始める前に
カスタム HTML を使用する前に、以下をご確認ください。
- カスタム HTML ブロックは有料の Klaviyo プランでのみ利用できます。この機能は段階的に展開されているため、まだアカウントに表示されない場合があります。
- セキュリティのため、HTML は自動的にサニタイズされます。HTML ブロックは、サポートされているタグと属性のみを保持し、フォームがレンダリングされる際にそれ以外（スクリプトやイベント ハンドラを含む）をすべて削除します。これにより、サイト訪問者が悪意のあるコードから保護されます。その結果、サポートされていない場合、作成した HTML の一部がサイト上に表示されないことがあります。以下のサポート対象タグのリストをご覧ください。
- カスタム HTML ブロックは新しいコンテンツのみを追加します。HTML ブロックでは、フォームに独自の要素を追加できます。フォームの既存ブロックの HTML を編集する目的では使用できません。
- Klaviyo サポートでは、カスタムコードのトラブルシューティングは行えません。カスタム HTML（例：レイアウトの崩れ、コンテンツがレンダリングされない、スタイル設定の問題）によって発生した問題は、ご自身でデバッグして修正する必要があります。カスタム HTML を含むフォームが正しく表示されない、または正しく動作しない場合は、まず HTML ブロックを削除して、原因がコードにあるかどうかを確認してください。
- 公開する前にテストしてください。カスタム HTML はフォームのレイアウトと使いやすさに影響する可能性があります。公開する前に、デスクトップとモバイルの両方で必ずフォームをプレビューしてテストしてください。
フォームに HTML ブロックを追加
フォームにカスタム HTML を追加するには：
- サインアップフォーム に移動し、エディターでフォームを開きます。
- ブロックパネルで HTML ブロックを見つけ、カスタムコンテンツを表示したいフォーム上の場所にドラッグします。
- HTML ブロックを選択して、設定を開きます。ブロックのサイドバーにコード エディタが表示されます。
HTML ブロックはフォーム エディター内の他のブロックと同様に動作します。複数追加したり、位置を変更したり、削除したりできます。カスタム HTML はそのブロック内に含まれるため、フォームの残りの構造には影響しません。
HTML を作成
コードエディタは空の状態で開始します。サポートされているタグと属性のみを使用して、HTML を直接入力してください。サポートされていないタグと属性は、フォームがレンダリングされる際に自動的に削除されます。
例
<h2 class="promo-heading">Join our list</h2>
<p>Sign up for <strong>15% off</strong> your first order, plus:</p>
<ul>
<li>Early access to new drops</li>
<li>Members-only offers</li>
</ul>
<p><a href="https://www.example.com/terms" target="_blank">See terms and conditions</a></p>
HTML にスタイルを適用するには、要素に独自の class 名を追加し、カスタム CSS でそれらをターゲットにします。たとえば、見出しに class="promo-heading" を設定し、カスタム CSS エディタで .promo-heading をスタイル設定します。サインアップフォームでカスタム CSS を使用する方法を参照して、カスタム CSS を有効にして記述する方法をご確認ください。
サポートされている HTML タグと属性
セキュリティ上の理由から、HTML ブロックでは次のタグと属性がサポートされています。このリストにないタグまたは属性はすべて削除されます（フォームがレンダリングされる際）。
グローバル属性— これらは、サポートされているすべてのタグで使用できます：id、class、dir、lang、role、aria-*（アクセシビリティ属性）。
以下の表では、上記のグローバル属性に加えて、特定のタグで許可される追加属性を一覧で示しています。
テキストと書式設定
タグ | 用途 | 追加で許可される属性 |
|---|---|---|
| 段落 | — |
| 汎用コンテナ | — |
| インライン コンテナ | — |
| 改行 | — |
| 水平ルール | — |
| 太字（重要度） | — |
| 強調 | — |
| 太字 | — |
| イタリック | — |
| 下線 | — |
| 取り消し線 | — |
| 小さいテキスト | — |
| 下付き文字 | — |
| 上付き文字 | — |
| ハイライト | — |
| 略語 |
|
| 引用 | — |
| インラインコード | — |
| 事前に書式設定されたテキスト | — |
| ブロック引用 |
|
| インライン引用 |
|
| 時間値 |
|
| ワード ブレークの機会 | — |
見出し
タグ | 用途 | 追加で許可される属性 |
|---|---|---|
| 見出し（レベル 1～6） | — |
リスト
タグ | 用途 | 追加で許可される属性 |
|---|---|---|
| 順序なしリスト | — |
| 注文リスト |
|
| リスト項目 |
|
| 説明リスト | — |
| 説明用語 | — |
| 説明の詳細 | — |
テーブル
タグ | 用途 | 追加で許可される属性 |
|---|---|---|
| テーブル | — |
| テーブル ヘッダー | — |
| テーブル本文 | — |
| テーブル フッター | — |
| テーブル行 | — |
| 表のセル |
|
| テーブルヘッダーセル |
|
| テーブル キャプション | — |
| 列グループ |
|
| 列 |
|
メディアとリンク
タグ | 用途 | 追加で許可される属性 |
|---|---|---|
| リンク |
|
| 画像 |
|
| レスポンシブ画像ラッパー | — |
| メディア ソース |
|
| 図のラッパー | — |
| 図のキャプション | — |
許可される URL スキーム
リンク（href）と画像ソース（src）では、次の URL スキーム（http、https、mailto、tel）、および相対パスまたは #fragment アンカーのみを使用できます。その他のスキーム（javascript: や data: など）を使用する URL は削除されます。リンクで target="_blank" を使用している場合、リンクの安全性を保つために rel="noopener noreferrer" が自動的に適用されます。
セキュリティ上の理由により、タグと属性が削除されました。
サイトと訪問者を保護するために、HTML ブロックはコードを実行したりフォームを乗っ取ったりする可能性があるものを自動的に削除します。これは、クロスサイト スクリプティング（XSS）として知られる攻撃の一種です。以下は HTML では一般的ですが、常に削除されます：
- スクリプト：
<script>および<noscript> - イベントハンドラー属性：名前が
onで始まる属性（例：onclick、onload、onerror、onmouseover） - フレームと埋め込み：
<iframe>,<frame>,<frameset>,<object>,<embed>,<applet>,<portal> - ベクターおよびマークアップ言語のタグ：
<svg>,<math> - ドキュメントとリソースのタグ：
<base>、<meta>、<link>、および<style>タグ - リンクまたはソース内の危険な URL スキーム：
javascript:、vbscript:、data:、filesystem: - フォーム送信のオーバーライド属性：
formaction、formmethod、formtarget、formenctype - レガシーまたは非推奨のタグ:
<marquee>、<bgsound>、<keygen>、<isindex>、<xmp>、<listing>、<plaintext>、<template>、<noembed>
フォームがレンダリングされる際にコードの一部が消える場合は、上記のサポート対象リストにないタグまたは属性が使用されている可能性が高いです。
プレビューして公開する
HTML を作成した後：
- エディターのプレビューを使用して、フォームの外観を確認してください。
- カスタム HTML はデスクトップとモバイルのそれぞれに異なる影響を与える可能性があるため、両方でフォームを確認してください。
- サイト上での表示を検証するために、フォームを一般公開されていないページに公開してください。
- 公開済みフォームでテスト登録を送信し、すべての入力項目とボタンが引き続き動作することを確認してください。
- フォームを公開してください。
カスタム HTML を編集または削除する
HTML を編集するには、HTML ブロックを選択し、設定でコードを更新します。
カスタム HTML を削除するには、HTML ブロックを選択して削除します。これにより、フォームからブロックとそのコンテンツが削除されます。フォームの他の部分には影響しません。ブロックを削除することは、表示の問題がカスタムコードによって引き起こされているかどうかを確認する最も速い方法でもあります。
トラブルシューティング
Klaviyo サポートでは、カスタムコードのトラブルシューティングは行えません。カスタム HTML（例：レイアウトの崩れ、コンテンツがレンダリングされない、スタイル設定の問題）によって発生した問題は、ご自身でデバッグして修正する必要があります。カスタム HTML を含むフォームが正しく表示されない、または正しく動作しない場合は、まず HTML ブロックを削除して、原因がコードにあるかどうかを確認してください。
一部の HTML が表示されません。
フォームがレンダリングされる際、HTML ブロックはサポートされていないタグまたは属性を削除します。上記のサポートされているタグと属性に照らしてコードを確認し、セキュリティのために削除されるタグまたは属性を使用していないことを確認してください。
フォームの表示が崩れています。
未閉じのタグや不一致のタグ、他のブロックを再配置したり重ねたりするレイアウト ルールがないか、HTML を確認してください。コードは独自のブロック内にあるため、HTML ブロックを削除して原因かどうかを確認し、再度追加して小さな変更でテストできます。
HTML にスタイルが適用されません。
HTML 内の class 名がカスタム CSS 内のセレクターと一致していること、カスタム CSS がオンになっていること、フォームの最新バージョンを公開済みであることを確認してください。サインアップフォームにカスタム CSS を使う方法 を参照してください。
HTML ブロックが表示されません。
カスタム HTML は有料プランでのみ利用でき、段階的に提供を開始しています。有料プランをご利用でまだ表示されない場合は、しばらくしてからもう一度ご確認ください。
よくある質問
フォームの既存ブロックの HTML を編集できますか？
いいえ。HTML ブロックを使用すると、フォームに新しいカスタム コンテンツを追加できます。フォームの既存ブロックの HTML は変更されません。
コードの一部が削除されたのはなぜですか？
セキュリティのため、HTML ブロックではサポートされているタグと属性のみを保持し、それ以外（スクリプトやイベント ハンドラーなど）はすべて削除して、悪意のあるコードがウェブサイト上で実行されないようにします。セキュリティのために削除されたタグと属性のリストは上記をご覧ください。
フォームに <script> やその他の JavaScript を追加できますか？
いいえ。サイト訪問者を保護するため、スクリプトとイベントハンドラー属性は常に削除されます。これは無効にできません。
HTML ブロックのスタイルを設定できますか？
はい。HTML 要素に独自の class 名を追加し、カスタム CSS でそれらをターゲットにします。サインアップフォームでカスタム CSS を使用する方法をご覧ください。
Klaviyo サポートは HTML の作成や修正を手伝ってくれますか？
いいえ。Klaviyo サポートは、カスタム コードの作成、レビュー、またはトラブルシューティングはできません。カスタム HTML を含むフォームに問題がある場合、サポートがさらに調査する前に、切り分けのために HTML ブロックの削除を求められます。