HubSpotフォームのスタイル設定について

[Motoya]

HubSpotフォームを利用して下記のことを実装しようと検討しております。

・コンタクトプロパティのフォーム項目の挿入(電話番号や氏名など)

・フォーム送信時の注意点(利用規約に関しての確認)を記載したリッチテキストフィールドを挿入

上記2点でスタイルのことで困っていることがあります。

1:プロパティの入力フィールドの大きさをフォームエディターで変更はできないか？

例えば「電話番号」と「住所」では入力数と長さがまったく異なりますが、

デフォルトではフォームのフィールドの幅いっぱいに両方ともなります。

プロパティごとに入力フィールドの大きさを変更できればイメージ通り

2:リッチテキストは最大のフィールドサイズを決めて、最大の大きさよりも超えた範囲は

スクロールで見れるような仕様にはできないか？

例えば利用規約などは別ページに遷移させるよりも、確認と確認をしたことのチェックを

1ページに完結させたいため、スクロールで閲覧ができるようにしたいです。

[marykashima · Accepted solution]

@Motoya さんこんにちは。

HubSpotフォームは1、2ともCSSで装飾する場合がほとんどです。

もちろん、HubSpotフォームのスタイルもある程度は使えますが、条件によります。

フォームはどちらのページで利用されますか？

A HubSpot CMSページ

B 外部ページ

Aの場合

HubSpotフォームのスタイルは適用されませんのでCMS内のCSSで指定する必要があります。

Bの場合

1、2どちらもHubSpotフォームのスタイルでは適用されていないものです。

フォーム内設定「未加工のHTMLフォームとして設定」にチェックをいれて外部CSSで指定する必要があります。

なお、1に関してはフォームを作成する画面で「2カラム」「3カラム」にする方法はありますので、

それを使い、擬似的に長さを指定することはできます。

（あまりおすすめしません）

やり方は、わざと2カラムにして、右側の適当な単行テキストを非表示要素にすることです。

 

参考になれば幸いです。

[Motoya]

@marykashima 様

ありがとうございます！

AのHubSpotCMSページに埋め込みで検討しております。

CSSで修飾して回避する手段を選択するようにいたします。

頂いた2カラムで修正する方法は目からうろこでした。。

PC版では問題ありませんが、スマフォのことを考えた挙動を設計すると

CSSで設計したほうが確実そうなのでそうしてみます！

ありがとうございました！

[marykashima]

@Motoya よかったです。レスポンシブ大事ですしね。

なお、ABと書いておきながら逆の方針を記載していました。最初の投稿は編集済みです。