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

フォーム送信ボタンを編集してスタイル設定する

更新日時 December 18, 2018

free

フォーム送信ボタンのテキストを編集する

HubSpot フォームの既定の送信ボタンのテキストは [送信] です。送信ボタンのテキストを編集するには、次の手順を実行します。

  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。
  • フォームの名前をクリックします。
  • フォームエディターで [送信] ボタンをクリックします。

  • 左のペインで、[ラベル] フィールドに新しい送信ボタンのテキストを入力します。

  • 右上の [公開] をクリックして公開中のフォームを更新します。

 

HubSpot ページのフォーム送信ボタンをスタイル設定する (Marketing Hub BasicProfessionalEnterprise のみ)

  • コンテンツエディターで、フォームモジュールの上にカーソルを置き、スタイルを編集アイコンをクリックします。

  • 左のペインでドロップダウンメニューをクリックし、[フォーム] ボタンを選択します。
  • ボタンの背景色やテキストのフォントサイズ変更するなど、オプションでフォーム送信ボタンをスタイル設定します。

  • 左下の [保存してモジュールリストに移動] をクリックします。
  • 右上の [公開] または [更新] をクリックします。
この更新により、ページごとにフォーム送信ボタンのスタイルが更新されます。フォームのグローバルスタイル設定をカスタマイズする方法を確認してください。

 

外部ページのフォーム送信ボタンをスタイル設定する (Marketing Hub BasicProfessionalEnterprise のみ)

外部ページのフォーム送信ボタンをスタイル設定するには、CSS クラスの値を含めて要素 submitButtonClassフォーム埋め込みコードに追加します。例:



これにより、フォームの送信ボタンからすべての既定のスタイル設定が削除されます。 外部スタイルシートで、CSS クラスおよび対応するスタイル属性を追加します。例:

.hs-form-submit-button { background: #ff0000; padding:10px; }

他の方法として、HubSpot の既定のフォームスタイルを無効にして、埋め込みコードを変更せずにスタイルシートで CSS セレクターを使用することもできます。例:

input[type="submit"]{ background: #ff0000; }

HubSpot の開発者ドキュメントでフォーム埋め込みコードのカスタマイズについて詳細を確認してください。

New Call-to-action