チュートリアル: 埋め込み可能なフォームをWebページに追加する

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Embeddable Forms Framework (EFF) を使用すると、任意のWebページでSitecoreフォームをレンダリングできます。

このチュートリアルでは、次の方法について説明します。

EFFと連携する準備をします。
埋め込み可能なフォームをWebページに追加します。
埋め込み可能なフォームにカスタムフォーム要素を表示します。

EFFと協力するための準備

埋め込み可能なフォームをWebアプリケーションに追加する前に、SitecoreインスタンスとWebアプリケーションをEFFと連携させる準備をする必要があります。

SitecoreインスタンスとWebアプリケーションをEFFと連携させる準備をするには、次の手順に従います。

Sitecoreヘッドレスサービス21.0.0 zipパッケージをインストールします。
APIキーを作成します。
Sitecore Embeddable Forms for Sitecore ZIPファイルをダウンロードして抽出し、sitecore-embeddableforms.umd.jsファイルをWebアプリケーションディレクトリにコピーします。
cssフォルダをWebアプリケーションのルートディレクトリにコピーします。

埋め込み可能なフォームをWebページに追加する

Sitecoreヘッドレスサービスをインストールし、APIキーを作成し、必要なファイルをWebアプリケーションに追加した後、SitecoreフォームをWebページに追加できます。

Webページにフォームを追加するには:

フォームを表示するWebページで、EFFスクリプトを参照するscriptタグを追加します。

<script type="text/javascript" src="https://site.com/scmods/Web/eff/sitecore-embeddableforms.umd.js?sc_site=http://scsite.com&sc_apikey=626402f6-a864-4a2e-88cc-ca7b1edcd47b"></script>

パラメーター	形容
sc_apikey	Layout Serviceと送信エンドポイントへの認証用のAPIキー。
sc_site	随意。レイアウトサービスをホストしているSitecore Webサイトと送信エンドポイントのURL。このパラメーターを含めない場合、EFFは、このスクリプトがレイアウトサービスと送信エンドポイントを含むSitecoreインスタンスでホストされていると想定します。

scef-formタグを追加して、Sitecoreフォームアイテムを指定します。

<scef-form formId="{BBB5CFC2-D2E0-426B-A78D-E8E151E0E9E0}"></scef-form>

属性	形容
formId	ページに追加するSitecoreフォームアイテムのID。

次に、埋め込み可能なフォームを含むサンプルHTMLページを示します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sitecore Embeddable Forms Sample</title>
  </head>
  <body>
    <div class="my-page-container">
      <h1>Sitecore Embeddable Forms Sample</h1>
      <div class="my-embeddable-form-container">
        <scef-form formid="{BBB5CFC2-D2E0-426B-A78D-E8E151E0E9E0}"></scef-form>
      </div>
    </div>
    <script type="text/javascript" src="https://scsite.com/sitecore-embeddableforms.umd.js?sc_apikey=626402f6-a864-4a2e-88cc-ca7b1edcd47b"></script>
  </body>
</html>

埋め込み可能なフォームにカスタムフォーム要素を表示する

メモ

この手順に従う必要があるのは、フォームにカスタムフォーム要素が含まれている場合のみです。

Sitecoreフォームにカスタムフォーム要素が含まれている場合は、カスタムフォーム要素をレンダリングするクラスを作成し、埋め込み可能なフォームを含むWebページでこのクラスを参照する必要があります。

埋め込み可能なフォームにカスタムフォーム要素を表示するには:

カスタムフォーム要素をレンダリングするクラスを作成します。

次の例では、カスタムフォーム要素は /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`
      <div part="form-control">
        <label
          part="label"
          for=${field.valueField.id}
          class="${themeElement.GetCssClass(this, "common.text.label")}"
        >
          ${field.title} Load Custom Label scef-customlinetext
        </label>
        <div
          part="base"
          class="${themeElement.GetCssClass(this, "common.text.div")}"
        >
          <input
            part="input"
            type="text"
            id=${field.valueField.id}
            name=${field.valueField.name}
            class=${themeElement.GetCssClass(this, "common.text.input")}
            maxlength=${ifDefined(
              field.maxLength > 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}"
          />
        </div>
        <div ?hidden=${!errorMessage}>
          <p
            id="scef-errorcontent"
            name="${field.valueField.name}.scef-errorcontent"
            for=${field.name}
          >
            ${errorMessage}
          </p>
        </div>
      </div>
      <link rel="stylesheet" href="${themeElement.GetCssURL()}" />
    `;
  }
}

埋め込み可能なフォームを含むWebページで、クラスを参照するscriptタグを追加します。

    <script
    type="module"
    useOn="customfield"
    guid="B02DAEA0-79A3-4E9D-B468-2E4FE6DAE4ED"
    ctor="ScefCustomLineText"
    renderMode="render"
    src="http://website.com/scef-customlinetext.js"
  ></script>

属性	形容
useOn	スクリプトの処理方法をEFFに示します。使用可能な値はcustomfieldのみです。
guid	カスタムフォーム要素アイテムのID。
ctor	カスタムフォーム要素をレンダリングするクラス。
renderMode	カスタムフォーム要素をレンダリングするメソッド。
src	カスタムフォーム要素をレンダリングするクラスのURL。

以下は、カスタムフォーム要素を持つ埋め込み可能なフォームを含むサンプルHTMLページです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sitecore Embeddable Forms Sample</title>
  </head>
  <body>
    <div class="my-page-container">
      <h1>Sitecore Embeddable Forms Sample</h1>
      <div class="my-embeddable-form-container">
        <scef-form formid="{C8D49EE3-6BD8-4607-AF88-9E534EFCCF3A}"></scef-form>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="http://website.com/sitecore-embeddableforms.umd.js?sc_site=https://scsite.com/&sc_apikey=7A769112-5897-4429-9672-4AD8A8947D82"></script>  
  <script
    type="module"
    useOn="customfield"
    guid="B02DAEA0-79A3-4E9D-B468-2E4FE6DAE4ED"
    ctor="ScefCustomLineText"
    renderMode="render"
    src="http://website.com/scef-customlinetext.js"
  ></script>
  </html>

この記事を改善するための提案がある場合は、お知らせください!

チュートリアル: 埋め込み可能なフォームをWebページに追加する

EFFと協力するための準備

埋め込み可能なフォームをWebページに追加する

埋め込み可能なフォームにカスタム フォーム要素を表示する

埋め込み可能なフォームにカスタムフォーム要素を表示する