--- title: "ウォークスルー:ウェブページに埋め込み可能なフォームを追加する" slug: "walkthrough--adding-an-embeddable-form-to-a-webpage" abstract: "ウェブページに埋め込み可能なフォームを追加する方法を説明しています。" --- # ウォークスルー:ウェブページに埋め込み可能なフォームを追加する Embeddable Forms Framework(EFF)を使えば、どのウェブページにもSitecoreフォームをレンダリングできます。 このウォークスルーでは、以下の方法を説明します: - EFFと協力する準備をしましょう。 - ウェブページに埋め込み可能なフォームを追加してください。 - カスタムフォーム要素を埋め込み可能な形式で表示します。 ## EFFと協力する準備をしましょう ウェブアプリケーションに埋め込み可能なフォームを追加する前に、SitecoreのインスタンスとウェブアプリケーションをEFFと連携させる準備をしなければなりません。 SitecoreのインスタンスおよびウェブアプリケーションをEFFと連携させる準備をするには: 1. [Sitecore Headless Services 21.0.0のzipパッケージをインストールしてください](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/install-headless-services-using-the-package--zip-file.html)。 2. [APIキーを作成し](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/api-keys-for-the-odata-item-service.html "API keys for the OData Item Service")ましょう。 3. [Sitecore Embeddable FormsをダウンロードしてZIPファイルSitecore](https://dev.sitecore.net/Downloads/Sitecore_Embeddable_Forms/1x/Sitecore_Embeddable_Forms_100.aspx)解凍し、sitecore-embeddableforms.umd.jsファイルをウェブアプリケーションディレクトリにコピーします。 4. cssフォルダをウェブアプリケーションのルートディレクトリにコピーしてください。 ## ウェブページに埋め込み可能なフォームを追加してください Sitecore Headless Servicesをインストールし、APIキーを作成し、必要なファイルを追加した後、ウェブページにSitecoreフォームを追加できます。 ウェブページにフォームを追加するには: 1. フォームを表示したいウェブページに、EFFスクリプトを参照するscriptタグを追加してください: パラメータ 概要 sc\_apikey レイアウトサービスおよび提出エンドポイントへの認証のためのAPIキーです。 sc\_site 任意です。レイアウトサービスと投稿エンドポイントをホストしているSitecoreウェブサイトのURLです。このパラメータを含めない場合、EFFはこのスクリプトがレイアウトサービスと投稿エンドポイントを含むSitecoreインスタンス上でホストされていると想定します。 2. Sitecoreフォーム項目を指定するためのscef-formタグを追加します: 属性 概要 formId ページに追加したいSitecoreフォームアイテムのIDです。 以下は埋め込み可能なフォームを含むサンプルHTMLページです。 Sitecore Embeddable Forms Sample

Sitecore Embeddable Forms Sample

## 埋め込み可能な形でカスタムフォーム要素を表示する > !注この手順は、フォームにカスタムフォーム要素が含まれている場合のみ適用されます。 Sitecoreフォームに [カスタムフォーム要素](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/walkthrough--creating-a-custom-form-element.html "Walkthrough: Creating a custom form element")が含まれている場合、そのカスタムフォーム要素をレンダリングするクラスを作成し、埋め込み可能なフォームを含むウェブページでそのクラスを参照する必要があります。 カスタムフォーム要素を埋め込み可能な形式で表示するには: 1. カスタムフォーム要素をレンダリングするクラスを作成します。 以下の例では、カスタムフォーム要素は*/sitecore/system/Settings/Forms/Field Types/Basic*フォルダ内のSingle-Line textアイテムに基づいています。 import { css, html } from 'https://unpkg.com/lit@^2?module'; import { ifDefined } from 'https://unpkg.com/lit@^2/directives/if-defined.js?module'; export class ScefCustomLineText { id = "YOUR-CUSTOM-FORM-ELEMENT-ITEM-ID-WITHOUT-BRACKETS"; render( field, themeElement, placeholderText, errorMessage ) { return html\`
0 ? field.maxLength : undefined )} placeholder=${ifDefined(placeholderText)} data-sc-tracking=${field.isTrackingEnabled} data-sc-field-name=${field.name} data-sc-field-key=${field.fieldKey} ?disabled=${field.disabled} .value=${field.value} @input="${field.validate}" />

${errorMessage}

\`; } } 2. 埋め込み可能なフォームが載っているウェブページに、クラスを指すscriptタグを追加してください。 属性 概要 useOn EFFに対してスクリプトの処理方法を示します。 customfield が唯一の利用可能な値です。 guid カスタムフォーム要素アイテムのID。 ctor カスタムフォーム要素をレンダリングするクラスです。 renderMode カスタムフォーム要素をレンダリングするメソッドです。 src カスタムフォーム要素をレンダリングするクラスのURLです。 以下は、カスタムフォーム要素を備えた埋め込み可能なフォームを含むサンプルHTMLページです: Sitecore Embeddable Forms Sample

Sitecore Embeddable Forms Sample