Forms

埋め込みフォームのスタイルを設定する方法

更新日時 February 13, 2017

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Basic, Pro, & Enterprise

最初に、フォームからHubSpotの既定のスタイル設定を削除します。そのためには、[コンタクト数]>[フォーム]を選択し、スタイルを削除するフォームの名前をクリックします。[エンベッド]タブを選択し、[HubSpotのデフォルトスタイルを削除]チェックボックスをオンにします。そして、[エンベッドコードをコピー ]ボタンをクリックし、コピーしたコードを外部サイトに貼り付けます。

User-added image
User-added image

コピーしたコードを外部サイトに埋め込んでHubSpotフォームの既定のスタイル設定を削除したら、外部サイトのCSSファイルでフォームのスタイルを設定します。HubSpotフォームで利用可能なセレクターについては、こちらの記事(英語)を参照してください

また、埋め込みコードを直接編集することでフォームを高度にカスタマイズできます(英語の参考記事はこちら)。ただし、HubSpotフォームの埋め込みコードは最終的なHTMLマークアップのレンダリングにJavaScriptを使用しているので、埋め込みコードの編集にはJavaScriptの知識が必要になります。(英語の参考記事はこちら)。