お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Forms

外部ページの埋め込みフォームをスタイル設定する

更新日時 12月 19, 2018

フォームエディターで、プリセットテーマを使用するか、外部スタイルシートのカスタム CSS を使用して、埋め込み HubSpotフォームにスタイルを設定することができます。

テーマを使用してフォームをスタイル設定する

カスタムコードを書くことなくフォームにスタイルを設定するには、埋め込みフォームまたはスタンドアロン URL で使用されているフォームのプリセットテーマを使用できます。テーマは、すでに適用されている フォントや色 に加えて、さらに多くのカスタマイズオプションをフォームに追加します。  

  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。
  • フォームの名前をクリックします。
  • フォームエディターで [スタイルとプレビュー] タブをクリックします。 
  • [スタイル] ペインで  [以前のテーマをそのまま使用]  チェックボックスをオフにします。 

注: [以前のテーマをそのまま使用] チェックボックスをクリアすると、このフォームに適用された以前の既定の HubSpot スタイルは削除されます。フォームに追加したカスタム CSS または JavaScript は機能しなくなります。 

  • 4 つの選択可能なテーマを選択します。themes-in-forms

これらのテーマは各フォームに固有で、外部的に埋め込まれたフォームまたはスタンドアロン URL で使用されているフォームにのみ影響します。

CSS を使用してフォームをスタイル設定する

注: 埋め込みフォームと埋め込みコードの CSS をカスタマイズできるのは、Marketing Hub BasicProfessional Enterprise  アカウントのみです。

  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。
  • リストの名前をクリックします。
  • フォームエディターで [オプション] タブをクリックします。 
  • クリックして、[スタイル設定なしのフォーム] スイッチをオンにします。フォームは、iFrame 内ではなく、ウェブサイト上の raw HTML 要素として表示され、フォームに適用された既定の HubSpot スタイルはすべて削除されます。
  • この設定を有効にしたら、エディターの右上にある [共有] をクリックします。 
  • ダイアログボックスで、[コピー] をクリックします。
  • フォーム埋め込みコードを外部サイトに追加します。外部ページにすでにフォームが埋め込まれている場合は、既存のコードを、既定のフォームスタイル設定が適用されていないこの新しいバージョンに置き換える必要があります。