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

解決
Motoya
参加者

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

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

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

 

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

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

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

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

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

 

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

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

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

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

 

 

 

0 いいね!
1件の承認済みベストアンサー

受理された解決策
marykashima
解決策
トップ投稿者 | Platinum Partner

@Motoya さんこんにちは。

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

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

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

 

HubSpot CMSページ

B 外部ページ

 

Aの場合

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

 

Bの場合

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

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

 

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

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

(あまりおすすめしません)

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

Forms-HubSpot.png

参考になれば幸いです。


Mary Kashima
HubSpot Community Champion
株式会社クリエイティブホープ
HubSpotプラチナパートナー

元の投稿で解決策を見る

3件の返信
marykashima
解決策
トップ投稿者 | Platinum Partner

@Motoya さんこんにちは。

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

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

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

 

HubSpot CMSページ

B 外部ページ

 

Aの場合

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

 

Bの場合

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

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

 

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

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

(あまりおすすめしません)

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

Forms-HubSpot.png

参考になれば幸いです。


Mary Kashima
HubSpot Community Champion
株式会社クリエイティブホープ
HubSpotプラチナパートナー

元の投稿で解決策を見る

Motoya
参加者

@marykashima 様

 

ありがとうございます!

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

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

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

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

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

 

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

marykashima
トップ投稿者 | Platinum Partner

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

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


Mary Kashima
HubSpot Community Champion
株式会社クリエイティブホープ
HubSpotプラチナパートナー
0 いいね!