サインアップフォームでカスタム CSS を使用する方法
カスタム CSS は、CSS の作成に慣れているユーザー向けの高度な機能です。CSS に慣れていない場合でも、フォーム エディタの標準のスタイル設定オプションで必要なカスタマイズはすべて対応できます。
フォームエディタで利用できる範囲を超えて、カスタム CSS を使用して Klaviyo のサインアップフォームにスタイルを適用する方法をご紹介します。カスタム CSS を使用すると、行の高さ、文字間隔、要素間隔などのプロパティを細かく制御できるため、フォームをブランドに正確に合わせられます。
始める前に
カスタム CSS を使用する前に、次の点に注意してください。
- カスタム CSS は、有料の Klaviyo プランでのみ利用できます。この機能は段階的に展開されているため、まだアカウントに表示されない場合があります。
- Klaviyo サポートでは、カスタムコードのトラブルシューティングは行えません。カスタム CSS が原因の問題（例：レイアウトの崩れ、フィールドの非表示、レンダリングの問題）は、ご自身でデバッグと修正を行う必要があります。カスタム CSS を適用したフォームが正しく表示されない、または正しく動作しない場合は、まずカスタム CSS を無効にして、コードが原因かどうかをご確認ください。
- カスタム CSS はスタイル設定のみに適用されます。この機能では、フォームまたはそのブロックの HTML を追加または編集することはできません。
- 公開前にテストしてください。カスタム CSS はフォームの使いやすさに影響する可能性があります（例：必須フィールドを誤って非表示にすると、登録を妨げる場合があります）。公開前に、必ずフォームをプレビューしてテストしてください。
カスタム CSS を有効にする
フォームでカスタム CSS を有効にするには:
- サインアップフォーム に移動し、エディターでフォームを開きます。
- [スタイル] タブを選択してください。
- パネル下部の Custom CSS セクションまでスクロールします。
- カスタム CSS をオンに切り替えます。
- 警告メッセージを確認してください。カスタム CSS を有効にすると、カスタムコードが原因で発生した問題については Klaviyo サポートが支援できないことを了承したものとみなされます。
有効にすると、フォーム用のカスタム CSS を記述できる CSS エディターが表示されます。カスタム CSS はフォームごとに有効化されます。あるフォームでオンに切り替えても、他のフォームには影響しません。
フォームコンポーネントにクラス名を設定します。
カスタム CSS が有効になっている場合、フォーム内の各コンポーネントに CSS class フィールドが追加されます。これは、コンポーネントを選択したときに、コンポーネントのサイドバーの下部に表示されます。クラス名のデフォルトはコンポーネント名ですが、アクセスしやすいように任意の名前で上書きできます。
CSS のセレクターとして、これらのクラス名を使用してください。独自のクラス名を設定することは、安定して読みやすい状態を保てるため、フォーム要素をターゲットにする最も信頼性の高い方法です。
後でカスタム CSS を無効にした場合でも、クラス名は保持され、再度有効にすると再表示されます。
CSS を作成してください
CSS エディターは空の状態で開始されます。これは、フォームがサイト上でレンダリングされる際に生成されるため、フォームの現在のスタイルは表示されません。要素をターゲットにするには、次のいずれかの方法を使用します。
- クラス名を使用してください。フォーム コンポーネントに設定したクラス名を参照します（推奨）。
- 公開中のフォームを検査します。ウェブサイトで公開済みのフォームを開き、ブラウザの開発者ツール（右クリック > [検証]）を使用して、ターゲットにするセレクタを特定します。
Klaviyo の自動生成されたクラス名をターゲットにすることは避けてください。これらは内部用で、ハッシュ化された値が含まれる場合があり、予告なく変更されることがあります — その場合、CSS が気付かれないまま機能しなくなります。代わりに独自のクラス名を使用してください。
例
見出しブロックにクラス名 form-headline を設定し、メール入力ブロックに email-input を設定したとします：
.form-headline {
line-height: 1.2;
letter-spacing: 0.5px;
}
.email-input {
margin-bottom: 12px;
}カスタム CSS を使用すると、右から左に読むテキストなど、エディタでは利用できないスタイル設定も可能になります：
.form-headline {
direction: rtl;
text-align: right;
}
プレビューして公開する
CSS を作成した後：
- エディターのプレビューを使用して、フォームの外観を確認してください。
- カスタム CSS はそれぞれに異なる影響を与える可能性があるため、デスクトップとモバイルの両方でフォームを確認してください。
- フォームを非公開ページに公開して、サイト上でどのように表示されるかを検証してください。
- 公開済みフォームでテスト登録を送信し、すべての入力項目とボタンが引き続き動作することを確認してください。
- フォームを公開してください。
カスタム CSS を無効にする
カスタムスタイルを削除するには、[スタイル] タブでカスタム CSS を オフ に切り替えます。フォームはすぐに標準のエディターのスタイルに戻ります。これは、表示の問題がカスタムコードによって引き起こされているかどうかを確認するための最速の方法でもあります。以前の CSS コードは、カスタム CSS を再びオンにすることを選択した場合に備えて保存されます。
トラブルシューティング
- Klaviyo サポートでは、カスタムコードのトラブルシューティングは行えません。カスタム CSS が原因の問題（例：レイアウトの崩れ、フィールドの非表示、レンダリングの問題）は、ご自身でデバッグと修正を行う必要があります。カスタム CSS を適用したフォームが正しく表示されない、または正しく動作しない場合は、まずカスタム CSS を無効にして、コードが原因かどうかをご確認ください。
CSS が適用されません。
カスタム CSS がオンに切り替えられていること、セレクタがコンポーネントに設定されているクラス名と一致していること、最新バージョンのフォームを公開したことを確認してください。ウェブサイトのスタイルがフォームのスタイルと競合したり上書きしたりすることもあります。どのルールが優先されているかを確認するには、ブラウザのデベロッパーツールを使用してください。
フォームの表示が崩れた、または登録の収集が停止しました。
原因を確認するためにカスタム CSS を無効にし、その後コードを確認してください。特に、入力欄やボタンを非表示にしたり再配置したりするルールがないか確認してください。
Custom CSS セクションが表示されません。
Custom CSS は有料プランでのみ利用でき、段階的に展開されています。有料プランをご利用でまだ表示されない場合は、しばらくしてからもう一度ご確認ください。
カスタム クラスのタイポグラフィ スタイルが適用されません。
margin のようなレイアウトスタイルは機能する一方で、letter-spacing や line-height のようなテキストスタイルが機能しない場合、カスタムクラスが外側のラッパーに付いており、表示されるテキストがネストされた子要素でレンダリングされている可能性があります。その場合は、.form-headline, .form-headline * { ... } などのように子要素もターゲットにします。
よくある質問
フォームにカスタム HTML を追加できますか？
いいえ。フォームに HTML 要素を追加したり、既存ブロックの HTML を編集したりすることはできません。カスタム CSS で変更できるのは、フォームの既存コンポーネントのスタイルのみです。
カスタム CSS はすべてのフォームで機能しますか？
カスタム CSS は、ウェブサイトに表示されるフォームについて、フォームごとに有効化されます。カスタマイズしたい各フォームで個別に有効化してください。
Klaviyo サポートは CSS の作成や修正を手伝ってくれますか？
いいえ。Klaviyo サポートでは、カスタム コードの作成、レビュー、またはトラブルシューティングは行えません。カスタム CSS を使用しているフォームに問題がある場合、サポートがさらに調査する前に、切り分けのためにカスタム CSS を無効にするよう求められます。
機能を無効にすると CSS はどうなりますか？
フォームは標準のスタイルに戻ります。カスタム CSS を再度有効にすると、コンポーネントのクラス名が保存され、復元されます。