質問&ディスカッション

Motoya
Participante

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

resolver

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

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

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

 

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

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

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

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

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

 

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

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

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

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

 

 

 

0 Me gusta
1 Soluciones aceptada
marykashima
Solución
Asesor destacado | Partner nivel Gold
Asesor destacado | Partner nivel Gold

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

resolver

@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
Grow Better at Community 2021
著書「HubSpotワンストップマーケティング」発売中

株式会社クリエイティブホープ HubSpot Platinum Partner

Ver la solución en mensaje original publicado

3 Respuestas 3
marykashima
Asesor destacado | Partner nivel Gold
Asesor destacado | Partner nivel Gold

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

resolver

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

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


Mary Kashima
HubSpot Community Champion
Grow Better at Community 2021
著書「HubSpotワンストップマーケティング」発売中

株式会社クリエイティブホープ HubSpot Platinum Partner
0 Me gusta
marykashima
Solución
Asesor destacado | Partner nivel Gold
Asesor destacado | Partner nivel Gold

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

resolver

@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
Grow Better at Community 2021
著書「HubSpotワンストップマーケティング」発売中

株式会社クリエイティブホープ HubSpot Platinum Partner
Motoya
Participante

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

resolver

@marykashima 様

 

ありがとうございます!

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

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

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

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

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

 

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