サインアップフォームでカスタム HTML ブロックを使用する方法

このページで学べること

カスタム HTML ブロックを使用して、フォーム エディタで利用可能なブロック以外にも、Klaviyo のサインアップフォームに独自のマークアップを追加する方法を学びましょう。HTML ブロックを使用すると、コンテンツとレイアウト（カスタム見出し、書式設定済みテキスト、リスト、表、画像、リンク）を細かく制御でき、フォームをブランドやメッセージに正確に一致させることができます。

セキュリティ上の理由により、HTMLブロックでサポートされるのは特定のタグと属性のみです。サポートされていないHTMLが含まれていると変更内容を保存できず、エディタに修正内容を説明するエラーが表示されます。以下のセクションでは、サポートされているタグと属性、および許可されていない一般的な例を一覧で示します。

始める前に

カスタム HTML を使用する前に、以下をご確認ください。

• カスタムHTMLブロックは、Klaviyoの有料プランでのみご利用いただけます。
• HTMLは保存前にセキュリティチェックされます。スクリプトやイベントハンドラを含むサポートされていないタグと属性があると、変更内容を保存できません。これらの制限により、サイト訪問者を悪意のあるコードから保護できます。以下のサポート対象のタグと属性を確認し、エディタに表示されたエラーを修正してください。
• カスタム HTML ブロックは新しいコンテンツのみを追加します。HTML ブロックでは、フォームに独自の要素を追加できます。フォームの既存ブロックの HTML を編集する目的では使用できません。
• Klaviyo サポートでは、カスタムコードのトラブルシューティングは行えません。カスタム HTML（例：レイアウトの崩れ、コンテンツがレンダリングされない、スタイル設定の問題）によって発生した問題は、ご自身でデバッグして修正する必要があります。カスタム HTML を含むフォームが正しく表示されない、または正しく動作しない場合は、まず HTML ブロックを削除して、原因がコードにあるかどうかを確認してください。
• 公開する前にテストしてください。カスタム HTML はフォームのレイアウトと使いやすさに影響する可能性があります。公開する前に、デスクトップとモバイルの両方で必ずフォームをプレビューしてテストしてください。

フォームに HTML ブロックを追加

フォームにカスタム HTML を追加するには：

1. サインアップフォーム に移動し、エディターでフォームを開きます。
2. ブロックを追加を選択し、HTMLブロックを見つけて、カスタムコンテンツを表示したいフォーム上の場所にドラッグしてください。

3. 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" rel="noopener noreferrer">See terms and conditions</a></p>

インラインstyle属性および<style>タグはサポートされていません。HTMLのスタイルを設定するには、要素に独自のclass名を追加し、カスタムCSSでそれらをターゲットにします。たとえば、見出しにclass="promo-heading"を設定し、カスタムCSSエディタで.promo-headingのスタイルを設定します。カスタムCSSを有効にして記述する方法については、サインアップフォームでカスタムCSSを使用する方法をご覧ください。

サポートされている HTML タグと属性

セキュリティのため、HTMLブロックは次のタグと属性をサポートしています。このリストにないタグまたは属性が含まれていると、変更を保存できません。

グローバル属性— これらは、サポートされているすべてのタグで使用できます：id、class、dir、lang、role、aria-*（アクセシビリティ属性）。

以下の表では、上記のグローバル属性に加えて、特定のタグで許可される追加属性を一覧で示しています。

テキストと書式設定

見出し

リスト

テーブル

メディアとリンク

許可される URL スキーム

リンク（href）と画像ソース（src）で使用できるURLスキームは、http、https、mailto、tel、および相対パスまたは#fragmentアンカーのみです。これ以外のスキーム（javascript:やdata:など）を使用するURLでは、変更を保存できません。リンクでtarget="_blank"を使用する場合は、リンクを安全に保つためにrel="noopener noreferrer"を追加してください。

サポートされていないHTMLタグと属性

悪意のあるコードからサイト訪問者を保護するため、HTMLブロックでは保存時にサポートされていないタグ、属性、URLが拒否されます。次の項目はHTMLで一般的ですが、許可されていません：

• スクリプト： <script> および <noscript>
• フォームコントロール： <form>、<input>、<button>、<select>、および<textarea>。エディターの標準入力ブロックとボタンブロックを使用して、登録を収集します。
• イベントハンドラー属性：名前が 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>

変更を保存できない場合は、エラーメッセージを使用して、サポートされていないタグ、属性、またはURLを見つけ、削除するか置き換えてください。続行する前に、上記のサポート対象リストと照合してコードを確認してください。

プレビューして公開する

HTML を作成した後：

1. エディターのプレビューを使用して、フォームの外観を確認してください。
2. カスタム HTML はデスクトップとモバイルのそれぞれに異なる影響を与える可能性があるため、両方でフォームを確認してください。
3. URLターゲティングが設定されたフォームは、公開する前にテストページに限定してください。ターゲティングと表示動作 > ターゲティングを開きます。URLの下で、特定のURLでのみ表示をオンにし、完全一致を選択して、既存の許可URLをすべてテストページの完全なURLに置き換えます。
4. 非公開ページでフォームを公開し、ウェブサイト上での表示を検証してください。[公開またはスケジュール]をクリックし、[今すぐ公開]を選択してから、[今すぐ公開]をクリックします。公開する前に、ブロッキングアラートをすべて解決してください。
5. 公開済みフォームでテスト登録を送信し、すべての入力項目とボタンが引き続き動作することを確認してください。
6. 意図したターゲティング設定を復元したら、公開またはスケジュールと今すぐ公開を使用して、対象オーディエンスにフォームを公開してください。

カスタム HTML を編集または削除する

HTMLを編集するには、HTMLブロックを選択し、設定でコードを更新してください。変更内容をプレビューしてから公開し、公開中のフォームを更新してください。

カスタムHTMLを削除するには、HTMLブロックを選択して削除してください。これにより、フォームからブロックとそのコンテンツが削除されます；フォームの残りの部分には影響しません。ブロックを削除することは、表示の問題がカスタムコードによって発生しているかどうかを確認する最も速い方法でもあります。公開中のフォームからブロックを削除するには、変更を公開してください。

トラブルシューティング

HTMLの変更が保存されません。
HTMLブロックの設定でエラーを確認してください。サポートされていないタグ、属性、またはURLを削除または置き換え、エラーが解消されることを確認してください。サポートされているリストを確認するには、エラーメッセージで許可されているタグの詳細を選択してください。

フォームの表示が崩れています。
未閉じのタグや不一致のタグ、他のブロックを再配置したり重ねたりするレイアウト ルールがないか、HTML を確認してください。コードは独自のブロック内にあるため、HTML ブロックを削除して原因かどうかを確認し、再度追加して小さな変更でテストできます。

HTML にスタイルが適用されません。
HTML 内の class 名がカスタム CSS 内のセレクターと一致していること、カスタム CSS がオンになっていること、フォームの最新バージョンを公開済みであることを確認してください。サインアップフォームにカスタム CSS を使う方法 を参照してください。

HTMLブロックが見当たりません。
カスタムHTMLは有料のKlaviyoプランで利用できます。アカウントが有料プランであることを確認し、フォームエディタのブロックを追加の下にあるHTMLを探してください。

よくある質問

フォームの既存ブロックの HTML を編集できますか？
いいえ。HTML ブロックを使用すると、フォームに新しいカスタム コンテンツを追加できます。フォームの既存ブロックの HTML は変更されません。

サポートされていないHTMLを保存できないのはなぜですか？
Klaviyoは、悪意のあるコードからサイト訪問者を保護するため、サポートされていないHTMLを拒否します。続行する前に、スクリプトやイベントハンドラーなどのサポートされていないタグと属性を削除し、安全でないURLを置き換えてください。上記のサポートされていないHTMLの例をご確認ください。

フォームに<script>やその他のJavaScriptを追加できますか？
いいえ。スクリプトとイベントハンドラー属性は許可されておらず、それらを含むHTMLは保存できません。この制限はサイト訪問者を保護するためのもので、無効にすることはできません。

HTML ブロックのスタイルを設定できますか？
はい。HTML 要素に独自の class 名を追加し、カスタム CSS でそれらをターゲットにします。サインアップフォームでカスタム CSS を使用する方法をご覧ください。

Klaviyo サポートは HTML の作成や修正を手伝ってくれますか？
いいえ。Klaviyo サポートは、カスタム コードの作成、レビュー、またはトラブルシューティングはできません。カスタム HTML を含むフォームに問題がある場合、サポートがさらに調査する前に、切り分けのために HTML ブロックの削除を求められます。