> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt > Use this file to discover all available pages before exploring further. # HubSpotフォーム > モジュール、HubL、または埋め込みコードを使用して、HubSpotのウェブサイトまたは外部ページにフォームを追加する方法について説明します。また、フォームにスタイルを設定する方法を説明します。 HubSpotフォームを使用して、HubSpot全体でアクセスできる情報をウェブサイト訪問者から取得します。フォームへのリンクをユーザーと直接共有し、[APIを介してフォームデータを送信](https://developers.hubspot.jp/docs/guides/api/marketing/forms)して、CMSを使用してウェブサイトページに埋め込むことができます。 フォームはHubSpotの中核となる要素であり、どのサブスクリプションレベルのHubSpotアカウントでも作成できます。フォームは顧客のコンバージョンにとって重要であるだけでなく、フォームデータはスマートコンテンツ、リスト、ワークフロー、コンテンツのパーソナライズなど、他のHubSpotツールやアセットでも使用できます。 [作成したHubSpotフォーム](https://knowledge.hubspot.com/ja/forms/create-forms)は、テンプレートやページに追加できます。ユースケースに応じて、フォームをテンプレートに追加する方法はいくつかあります。 * [既定のフォームモジュールを使用する](#the-default-form-module) * [カスタムモジュールにフォームフィールドを追加する](#form-fields-in-custom-modules)[](#using-the-form-hubl-tag) * [フォームの埋め込みコードを使用して埋め込む](#using-the-form-embed-code) ## 既定のフォームモジュール テンプレートに[ドラッグ＆ドロップエリア](/cms/reference/hubl/tags/dnd-areas)がある場合、制作担当者はページエディターから[既定のフォームモジュール](/cms/reference/modules/default-modules#form)をページに追加し、左側のサイドバーでフォームオプションを設定できます。 フォームモジュールをドラッグ＆ドロップエリアを持つテンプレートに直接コード化するには、フォームモジュールを`dnd_module`として参照します。 ```hubl theme={null} {% dnd_area "dnd_area" class='body-container body-container__landing', label='Main section' %} {% dnd_section vertical_alignment='MIDDLE' %} {% dnd_column width=6, offset=6 %} {% dnd_row %} {% dnd_module path='@hubspot/form' %} {% end_dnd_module %} {% end_dnd_row %} {% end_dnd_column %} {% end_dnd_section %} {% end_dnd_area %} ``` テンプレートのドラッグ＆ドロップエリアの外側にフォームを追加するには、代わりに標準の`module`として参照します。 ```hubl theme={null} {% module "form" path="@hubspot/form" form={ "form_id": "9e633e9f-0634-498e-917c-f01e355e83c6", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" } %} ``` いずれの実装でも、上記のコード例に示すように、モジュールタグにパラメーターを追加して、使用するフォームやリダイレクトオプションなどの設定を指定できます。利用可能なパラメーターの詳細については、[既定のモジュールのドキュメント](/cms/reference/modules/default-modules#form)をご参照ください。 ### 既定のモジュールを複製する 既定のモジュールをそのまま使用することに加えて、複製して編集可能にすることで、必要に応じてカスタマイズできます。例えば、既定のフォームモジュールを複製し、色フィールドを追加してから、モジュールのHTMLをスタイル付きの`
`タグでラップして、背景として色を追加できます。 * 左側のサイドバーのデザインマネージャーで、**@hubspot**フォルダーに移動し、［form.module］を右クリックして、［モジュールを複製］を選択します。 フォームモジュールの複製 * 右側のサイドバーで［フィールドの追加］をクリックして、［カラー］を選択します。 * HTMLコンテンツの周りに`
`タグを追加し、次のように色フィールドを参照するスタイルを含めます。 `
` 既定のフォームモジュールのセクション複製 ## カスタムモジュールのフォームフィールド カスタムモジュールを作成するときは、[フォームフィールド](/cms/reference/fields/module-theme-fields#form)を追加し、そのフィールドのコードスニペットをモジュールHTMLに追加することで、フォームを含めることができます。例えば、製品の画像と価値ある提案の説明を含むモジュールに相談依頼フォームを追加することができます。 デザインマネージャーからカスタムモジュールにフォームフィールドを追加するには、以下の手順に従います。 * モジュールエディターの右側のサイドバーで、［フィールドの追加］をクリックし、［フォーム］を選択します。 デザインマネージャーでフォームフィールドを選択 * フィールドを追加したら、右側のサイドバーのフィールドにカーソルを合わせ、［アクション］をクリックして［スニペットをコピー］を選択します。 モジュールフィールドでスニペットをコピー * スニペットをモジュールのHTMLフィールドに貼り付けます。 モジュールフィールドでスニペットを貼り付け ### エディターでフォームオプションを制限する ページに追加されると、制作担当者は通常、使用するフォームやフォームフィールド自体など、フォームのさまざまな特徴を制御できます。ただし、フォームモジュールの`fields.json`ファイルを[ローカル](/developer-tooling/local-development/hubspot-cli/install-the-cli)に変更して次のフィールドを含めることで、ページエディターで指定される制御の量を制限できます。 | パラメーター | タイプ | 説明 | | ----------------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | `disable_inline_form_editing` | 文字列 | フォームモジュール内の全てのインラインフォーム編集コントロールを非表示にするには、`disable_inline_form_editing`プロパティーを`true`に設定します。これには、フォームフィールド、送信ボタンのテキスト、データのプライバシーと同意のオプション、CAPTCHAが含まれます。 | | `required_property_types` | 配列 | フォームフィールドのプロパティータイプに基づいて選択できるフォームを指定する配列。値には、`"CONTACT"`、`"COMPANY"`、および`"TICKET"`を使用できます。 | 例えば、訪問者が会社のさまざまなサービス部門に連絡できるフォームのみに使用するモジュールを構築した場合、制作担当者がチケットプロパティーを使用するフォームのみを選択できるようにすることができます。 ```json theme={null} // Form field { "id": "843b4f0f-0ed7-5b10-e86a-5cc8a0f11a0c", "name": "form_field_1", "display_width": null, "label": "Form", "required": false, "locked": false, "type": "form", "disable_inline_form_editing": true, "required_property_types": ["TICKET"], "default": { "response_type": "inline", "message": "Thanks for submitting the form." } } ``` ## フォーム埋め込みコードを使用する モジュールやHubLタグを使用するのが理想的ではない場合や、外部ページにフォームを追加する場合は、代わりに[フォーム埋め込みコード](https://knowledge.hubspot.com/ja/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#add-the-form-embed-code)を使用してフォームを埋め込むことができます。フォーム埋め込みコードをカスタマイズして、フォームの機能を拡張することもできます。全てのフォーム埋め込みコードのカスタマイズオプションなどの詳細は、フォームに関するリファレンスガイドをご覧ください。 ### 注： * フォームのカスタマイズオプションは、[未加工のHTMLとして設定](https://knowledge.hubspot.com/ja/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#with-css-in-your-external-stylesheet-marketing-hub-professional-enterprise-or-legacy-marketing-hub-basic-only)されている、HubSpotで作成されたフォームでのみ使用できます。HubSpotアカウントで、Marketing Hub\*\*\_\_**および***Content Hub***のProfessional**またはEnterprise\*\*エディションを利用している必要があります。 * HubSpotフォームの読み込みには、HubSpotでホスティングされているJavaScriptファイルを使用する必要があります。フォーム埋め込みコードのコピーを作成して、自社サイトでホスティングすることはできません。HubSpotフォームの埋め込みコードを自社サイトでホスティングした場合、セキュリティー、スパム対策、アクセシビリティー、パフォーマンスの向上を目的としたHubSpotで行われる改善はご使用のフォームに反映されません。 以下に、カスタマイズを行っていないフォーム埋め込みコードのサンプルを示します。 ```html theme={null} ``` | パラメーター | タイプ | 説明 | | ---------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `portalId` | 数値または文字列 | フォーム多作成されたHubSpotアカウントのID。これは、フォーム定義を取得するために使用されます。 | | `formId` | 文字列 | フォームのID。フォーム定義を取得するために使用されます。 | | `region` | 文字列 | フォームが作成されたアカウントの[地域](https://knowledge.hubspot.com/ja/account-security/hubspot-cloud-infrastructure-and-data-hosting-frequently-asked-questions)。これは、フォーム定義を取得するために使用されます。指定可能な値は、`na1`または`eu1`です。 | ### 国際化を追加する HubSpotではデフォルトで、さまざまな言語で検証メッセージが表示されます。言語は、`locale`パラメーターを使用して指定できます。`translation`パラメーターを使用して、カスタム言語を追加したり、フォームに表示されるエラーメッセージや日付入力の月や日を上書きしたりすることもできます。 国際化とフォーム検証のエラーメッセージに関する詳細は、[フォームに関するリファレンスドキュメント](https://developers.hubspot.jp/docs/reference/cms/forms)をご確認ください。 ```js theme={null} hbspt.forms.create({ portalId: "", formId: "", locale: "en", translations: { en: { fieldLabels: { email: "Electronic mail", }, required: "Hey! That's required!", submitText: "Custom Submit Button Text", submissionErrors: { MISSING_REQUIRED_FIELDS: "Please fill in all required fields!", }, }, }, }); ``` ## フォームイベント フォームでは、HubSpotフォーム埋め込みコードのコールバックとグローバル フォーム イベントの2つの方法で機能をイベントにバインドできます。利用可能なフォーム埋め込みコードのコールバックとグローバル フォーム イベントの詳細については、[フォームに関するリファレンス ドキュメント](https://developers.hubspot.jp/docs/reference/cms/forms)をご確認ください。 ```js theme={null} // Example form embed code callback hbspt.forms.create({ portalId: "", formId: "", onBeforeFormSubmit: function ($form) { // YOUR SCRIPT HERE }, }); // Example listener window.addEventListener("message", event => { if (event.data.type === "hsFormCallback" && event.data.eventName === "onFormSubmitted") { someAnalyticsLib("formSubmitted"); console.log("Form Submitted! Event data: ${event.data}"); } }); ``` ## フォームのスタイル設定 HubSpotには[グローバル設定のフォームスタイル](https://knowledge.hubspot.com/ja/forms/set-global-form-colors-and-fonts)と[フォーム固有の設定](https://knowledge.hubspot.com/ja/forms/create-forms#style-and-preview-your-form)がありますが、フォームをどのようにCMSページに追加するかに応じてフォームのスタイルを設定することもできます。 ### 注： CMS Hub上に生成された全てのフォーム（フォーム埋め込みコードを使用した場合を除く）では、グローバルフォーム設定またはフォーム固有の設定に指定された全てのスタイルが無視されます。 ### 既定のフォームモジュールまたはHubLタグを使ってフォームのスタイルを設定する HubSpotページに追加されたHubSpotフォームのスタイルを設定するには、ウェブサイトのCSSを使用します。HubSpotには、生成されるフォームにさまざまなクラスと属性が用意されていて、スタイルを適用できます。出発点として、[HubSpotボイラープレートのフォームCSS](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/elements/_forms.css)（英語）をご参照ください。フォームのスタイル設定に関するベストプラクティスが示されています。 ### カスタムモジュールを使ってフォームのスタイルを設定する カスタムモジュール内のフォームのスタイルを設定するには、デザインマネージャー内のモジュールのCSSペインでCSSを使用します。CSSをモジュールに適用したままにすることで、モジュールがページに追加された場合には必ず、スタイル設定も伴うようになります。フォームにラッパーを追加し、そのラッパーをCSSの最上位のセレクターとして使用することをお勧めします。その結果、ウェブサイトのメインのスタイルシートに定義されている追加のスタイルによって、カスタムモジュールのフォームスタイルが上書きされることを防止できます。以下に、上記のカスタムモジュールのスクリーンショットを示します。フォームスタイル設定がCSSペインに追加されています。 CSSを使用したカスタムモジュール ### 埋め込みフォームのカスタムスタイルを定義する **Marketing Hub**または**CMS Hub** *Professional*または*Enterprise*サブスクリプションをご利用の場合は、CSS変数の定義を使用して、グローバルスタイルの定義、ボタンやその他の入力のカスタマイズ、マルチステップフォームとプログレスバーのスタイル設定を行うことができます。 [埋め込みフォームにカスタムCSS定義を適用する](https://developers.hubspot.jp/docs/reference/cms/forms#define-custom-styling-for-embedded-forms-using-css)方法の詳細をご確認ください。 ### フォーム埋め込みコードを使って追加したフォームのスタイルを設定する フォーム埋め込みコードを使用する場合は、[グローバル フォーム スタイル設定](https://knowledge.hubspot.com/ja/forms/set-global-form-colors-and-fonts)またはウェブサイトのCSSを使用してフォームのスタイルを設定できます。 グローバル フォーム スタイル設定を使用すると、アカウント内の全てのフォームの既定の設定を構成できます。[フォームエディター内の個別のフォームに対し、これらのスタイルを上書き](https://knowledge.hubspot.com/ja/forms/create-forms#style-and-preview-your-form)することもできます。 グローバル フォーム スタイル **Marketing Hub**または**CMS Hub**の*Professional*または*Enterprise*サブスクリプションをご利用の場合、フォーム作成時に［未加工のHTMLフォームとして設定］オプションを選択できます。この設定により、フォームはiframeではなくHTMLとして表示されるため、CSSを使用して埋め込みフォームのスタイルを設定するのが簡単になります。 詳しくは[埋め込みフォームのスタイル設定方法](https://knowledge.hubspot.com/ja/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site)をご確認ください。 未加工のHTMLフォームとして設定する