モデルルーム予約管理アプリサイト設計・構築②

SPIRAL ver.2では内覧の予約受付から内覧後のアンケート、検討状況の確認対応やメール配信を行うモデルルーム予約管理アプリの構築が可能です。

アプリ（DB・メール）設計・構築 / サイト設計・構築 / ユーザ・アプリロール・グループ設定
に各工程を分け、ポイントやおすすめ機能・強化ガジェットを紹介いたします。

サイト設計・構築では以下の工程に分けて作成します。
・内覧予約認証エリアと公開ページの作成
・内覧予約認証エリア内ページの作成
・資料請求認証エリアと資料請求認証エリア内ページの作成

この記事はサイト設計・構築② のフェーズとなります。
サイト設計・構築②では内覧予約認証エリア内ページ、資料請求認証エリアと資料請求認証エリア内ページの作成をします。

モデルルーム予約管理アプリデモを確認

注意

設定の説明部分にて、ソースコードを記載しております。
ソースコードに記載されている各種リンクや name値、規約含めて文言などは、デモの環境に合わせたものとなります。
実際に同様のものを作成する際は、変更が必要となる箇所がありますので、ご注意ください。

ソース内の「f0○○」と「record[○○]」、「siteClient.record[○○]」、「p0○○」について

ソース内の「f0○○」、「record[○○]」という箇所には、ブロックのフィールド一覧に記載されている識別名が入ります。
「siteClient.record[○○]」という箇所には、フィールドID（name属性から「f0」を除いた数字）が入ります。
「p0○○」という箇所には、ページIDが入ります。
サイト管理 > ページ > 対象のページ > 基本設定 > IDからご確認ください。

フロー・使用機能の整理

内覧予約フロー

サイト設計・構築①のフェーズで作成しました。詳細はサイト設計・構築①へ

登録情報変更、予約キャンセルフロー

▼ 内覧予約後の登録情報変更とキャンセルで使用する機能

認証エリア	内覧予約後の登録情報変更とキャンセルで使用するための認証機能 ※ メール本文中にある専用リンクからアクセス可能なクリックログイン認証を使用します
ページ機能	登録情報変更、キャンセルページ
ブロック機能	更新フォーム ※ 登録情報変更ページ、予約キャンセルページで使用しています
ブロック機能	フリーコンテンツ ※ 内覧予約フローで作成したヘッダとフッターを使用します

資料請求フロー

▼ 資料請求して、ダウンロードする機能

認証エリア	資料請求後の資料ダウンロードページ表示用の認証機能 ※ メール本文中にある専用リンクからアクセス可能なクリックログイン認証を使用します
ページ機能	資料請求、ダウンロードページ
ブロック機能	レコードリスト ※ 資料ダウンロードページでダウンロードする資料を表示するために使用しています
ブロック機能	登録フォーム ※ 資料請求ページで使用しています
ブロック機能	フリーコンテンツ ※ 内覧予約フローで作成したヘッダとフッターを使用します

アンケートフロー

▼ 内覧案内後や検討状況を確認するためのアンケート機能

認証エリア	アンケート表示用の認証機能 ※ 登録情報変更、キャンセルフローで作成した認証エリアを使用します
ページ機能	案内後アンケート、検討状況アンケートページ
ブロック機能	登録フォーム ※ 案内後アンケートページで使用しています
ブロック機能	更新フォーム ※ 検討状況アンケートページで使用しています
ブロック機能	フリーコンテンツ ※ 内覧予約フローで作成したヘッダとフッターを使用します

モデルルーム予約管理アプリデモを確認

【完成イメージ】

内覧予約トップページ

物件詳細ページ

全体のフォルダ構成

各機能の詳細に関しては、下記を参照ください。
ページ機能
ブロック機能
認証エリア

内覧予約認証エリア内ページの作成

手順１：登録情報変更ページの作成

内覧予約認証エリアの「＋」ボタンから新規ページを作成します。
登録情報変更ページはクリックログインページのため、認証は「あり」、クリックログインは「許可する」で設定します。
設定方法は、「ソース設定」を選択します。

手順２：登録情報変更ページに埋め込む登録情報変更フォームブロックを作成

登録情報変更フォームは、更新フォームブロックで作成します。
更新フォームブロックは、更新対象DBは内覧予約DB、更新対象レコードは認証レコード、設定方法はソース設定を選択します。
HTML

<div class="sp-form-container">
  <div class="sp-step-flow-f24431">
    <div class="large-setting arrow sp-clearfix">
      <div class="step active" title="入力">
        <span>入力</span>
      </div>
      <div class="step" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
    <div class="small-setting arrow sp-clearfix">
      <div class="step active" title="入力">
        <span>入力</span>
      </div>
      <div class="step" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
  </div>
  <div class="sp-form-item sp-form-html" th:inline="none"><p><span style="font-size: 18pt;">登録情報変更フォーム</span></p></div>
  <div class="sp-form-item sp-form-html" th:inline="none">変更する登録情報をご入力の上、「確認画面へ」ボタンを押してください</div>
  <!--/* 名前(name) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
    </div>
      <span type="name" th:name="${fields['f0xx'].name}" th:text="${siteClient.record[xx]}" th:value="${siteClient.record[xx]}"></span>
      <input type="hidden" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[xx]}" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[xx]}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
    </div>
    <!--/* メールアドレス(mail) */-->
    <sp:input-field name="f0xx"></sp:input-field>
    <div class="sp-form-item sp-form-field">
      <div class="sp-form-label">
        <th:block th:text="${fields['f0xx'].label}">
          Label
        </th:block>
      </div>
        <span type="email" th:name="${fields['f0xx'].name}" th:text="${siteClient.record[xx]}" th:value="${siteClient.record[xx]}"></span>
        <input type="hidden" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[xx]}">
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  <!--/* 郵便番号(zipCode) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[xx]}" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[xx]}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
      <!--/* 都道府県(pref) */-->
      <sp:input-field name="f0xx"></sp:input-field>
      <div class="sp-form-item sp-form-field">
        <div class="sp-form-label">
          <th:block th:text="${fields['f0xx'].label}">
            Label
          </th:block>
          <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
        </div>
        <div class="sp-form-data">
        <div class="sp-form-dropdown">
          <select class="sp-form-control" th:name="${fields['f0xx'].name}" th:with="default=${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : #strings.toString(siteClient.record[xx]?.id)}">
            <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${default == null}">Select option</option>
            <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${default == #strings.toString(option.id)}">Item</option>
          </select>
          <span class="sp-form-dropdown-icon"></span>
        </div>
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
        </div>
      </div>
  <!--/* 市区町村(municipalities) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[xx]}" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[xx]}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* 番地(block) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[xx]}" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[xx]}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* マンション・ビル名(building) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[xx]}" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[xx]}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* 希望占有面積(occupiedArea) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
    <div class="sp-form-dropdown">
      <select class="sp-form-control" th:name="${fields['f0xx'].name}" th:with="default=${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : #strings.toString(siteClient.record[xx]?.id)}">
        <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${default == null}">Select option</option>
        <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${default == #strings.toString(option.id)}">Item</option>
      </select>
      <span class="sp-form-dropdown-icon"></span>
    </div>
    <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
    <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* ご予算(budget) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
    <div class="sp-form-dropdown">
      <select class="sp-form-control" th:name="${fields['f0xx'].name}" th:with="default=${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : #strings.toString(siteClient.record[xx]?.id)}">
        <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${default == null}">Select option</option>
        <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${default == #strings.toString(option.id)}">Item</option>
      </select>
      <span class="sp-form-dropdown-icon"></span>
    </div>
    <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
    <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* 入居予定人数(residentNum) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
    <div class="sp-form-dropdown">
      <select class="sp-form-control" th:name="${fields['f0xx'].name}" th:with="default=${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : #strings.toString(siteClient.record[xx]?.id)}">
        <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${default == null}">Select option</option>
        <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${default == #strings.toString(option.id)}">Item</option>
      </select>
      <span class="sp-form-dropdown-icon"></span>
    </div>
    <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
    <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* 来場人数(visitorNum) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
    <div class="sp-form-dropdown">
      <select class="sp-form-control" th:name="${fields['f0xx'].name}" th:with="default=${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : #strings.toString(siteClient.record[xx]?.id)}">
        <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${default == null}">Select option</option>
        <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${default == #strings.toString(option.id)}">Item</option>
      </select>
      <span class="sp-form-dropdown-icon"></span>
    </div>
    <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
    <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>

  <!--/* 予約日(reservationDate) */-->
  <sp:input-field name="f0xx" control="ymdText"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
    </div>
    <div class="sp-form-data">
      <div class="sp-form-datetimes">
        <div class="sp-form-date">
          <span type="text" th:name="${fields['f0xx'].name}" th:text="${siteClient.record[xx].year}" th:value="${siteClient.record[xx].year}"></span>
          <input type="hidden" class="sp-form-control" th:name="${fields['f0xx:year'].name}" th:placeholder="${fields['f0xx'].placeholder.year}" th:value="${#maps.containsKey(inputs, 'f0xx:year') ? inputs['f0xx:year'] : siteClient.record[xx]?.year}">
          <span class="sp-form-date-separator">/</span>
          <span type="text" th:name="${fields['f0xx'].name}" th:text="${siteClient.record[xx].month}" th:value="${siteClient.record[xx].month}"></span>
          <input type="hidden" class="sp-form-control" th:name="${fields['f0xx:month'].name}" th:placeholder="${fields['f0xx'].placeholder.month}" th:value="${#maps.containsKey(inputs, 'f0xx:month') ? inputs['f0xx:month'] : siteClient.record[xx]?.month}">
          <span class="sp-form-date-separator">/</span>
          <span type="text" th:name="${fields['f0xx'].name}" th:text="${siteClient.record[xx].day}" th:value="${siteClient.record[xx].day}"></span>
          <input type="hidden" class="sp-form-control" th:name="${fields['f0xx:day'].name}" th:placeholder="${fields['f0xx'].placeholder.day}" th:value="${#maps.containsKey(inputs, 'f0xx:day') ? inputs['f0xx:day'] : siteClient.record[xx]?.day}">
        </div>
      </div>
    </div>
  </div>
  <!--/* 予約時間(reservationTime) */-->
  <sp:input-field name="f0xx" control="hmsText"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
    </div>
    <div class="sp-form-data">
      <div class="sp-form-datetimes">
        <div class="sp-form-time">
          <span type="text" th:name="${fields['f0xx'].name}" th:text="${siteClient.record[xx]}" th:value="${siteClient.record[xx]}"></span>
          <input type="hidden" class="sp-form-control" th:name="${fields['f0xx:hour'].name}" th:placeholder="${fields['f0xx'].placeholder.hour}" th:value="${#maps.containsKey(inputs, 'f0xx:hour') ? inputs['f0xx:hour'] : siteClient.record[xx]?.hour}">
          <input type="hidden" class="sp-form-control" th:name="${fields['f0xx:minute'].name}" th:placeholder="${fields['f0xx'].placeholder.minute}" th:value="${#maps.containsKey(inputs, 'f0xx:minute') ? inputs['f0xx:minute'] : siteClient.record[xx]?.minute}">
          <input type="hidden" class="sp-form-control" th:name="${fields['f0xx:second'].name}" th:placeholder="${fields['f0xx'].placeholder.second}" th:value="${#maps.containsKey(inputs, 'f0xx:second') ? inputs['f0xx:second'] : siteClient.record[xx]?.second}">
        </div>
      </div>
    </div>
  </div>
  <div class="sp-form-item sp-form-interaction">
    <button class="sp-form-prev-button" type="submit" name="action" value="previous" th:if="!${step.isFirst}" th:text="${step.prevButtonLabel}">Prev</button>
    <button class="sp-form-next-button" type="submit" name="action" value="next" th:text="${step.nextButtonLabel}">Next</button>
  </div>
</div>

HTML(確認ステップ)

<div class="sp-form-container">
  <div class="sp-step-flow-f24431">
    <div class="large-setting arrow sp-clearfix">
      <div class="step" title="入力">
        <span>入力</span>
      </div>
      <div class="step active" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
    <div class="small-setting arrow sp-clearfix">
      <div class="step" title="入力">
        <span>入力</span>
      </div>
      <div class="step active" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
  </div>
  <div class="sp-form-item sp-form-html" th:inline="none"><p><span style="font-size: 18pt;">登録情報変更フォーム</span></p></div>
  <div class="sp-form-item sp-form-html" th:inline="none">内容をご確認の上、よろしければ「情報変更」ボタンを押してください。</div>
  <!--/* 名前(name) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']}">Example</span>
    </div>
  </div>
  <!--/* メールアドレス(mail) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']}">spiral@example.com</span>
    </div>
  </div>
  <!--/* 郵便番号(zipCode) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']}">Example</span>
    </div>
  </div>
  <!--/* 都道府県(pref) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">Label</div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']?.label}">Item</span>
    </div>
  </div>
  <!--/* 市区町村(municipalities) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']}">Example</span>
    </div>
  </div>
  <!--/* 番地(block) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']}">Example</span>
    </div>
  </div>
  <!--/* マンション・ビル名(building) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']}">Example</span>
    </div>
  </div>
  <!--/* 希望占有面積(occupiedArea) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']?.label}">Item</span>
    </div>
  </div>
  <!--/* ご予算(budget) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']?.label}">Item</span>
    </div>
  </div>
  <!--/* 入居予定人数(residentNum) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']?.label}">Item</span>
    </div>
  </div>
  <!--/* 来場人数(visitorNum) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']?.label}">Item</span>
    </div>
  </div>
  <!--/* 予約日(reservationDate) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']?.format('uuuu/MM/dd')}">2000/01/01</span>
    </div>
  </div>
  <!--/* 予約時間(reservationTime) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']?.format('HH:mm:ss')}">12:00:00</span>
    </div>
  </div>
  <div class="sp-form-item sp-form-interaction">
    <button class="sp-form-prev-button" type="submit" name="action" value="previous" th:if="!${step.isFirst}" th:text="${step.prevButtonLabel}">Prev</button>
    <button class="sp-form-next-button" type="submit" name="action" value="next" th:text="${step.nextButtonLabel}">Next</button>
  </div>
</div>

CSS

:root {
  /*=============================
	カスタムプロパティ
  ==============================*/
  --base-color: #FFFFFF; /* フォームブロックの背景色 */
  --main-color: #0D60DB; /* メインカラー */
  --accent-color: #B8250F; /* アクセントカラー */
  --input-color: #F5F7FA; /* 入力欄の背景色 */
  --input-border-color: #D3D6DB; /* 入力欄の枠線の色 */
  --input-radius: 12px; /* 入力欄の角の丸さ */
  --transition: 0.1s; /* アニメーション時間 */

  /*------ 合計100%になるよう調整 -------*/
  --label-width: 25%; /* ラベル部分の幅 */
  --data-width: 75%; /* データ部分の幅 */
}

.sp-form-container {
  font-size:16px;
  padding:1em;
  box-sizing:border-box;
  max-width: 960px;
  color:#505050;
  background-color:var(--base-color);
  border:1px solid #E1E5EB;
  border-radius:var(--input-radius);
}

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding:0.5em 1em;
}

.sp-form-field,
.sp-form-group {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-form-field>.sp-form-label,
.sp-form-group>.sp-form-label {
  font-size:1.15em;
  font-weight:bold;
  padding:.25em 0;
  word-break:break-all;
  box-sizing:border-box;
  color:#333333;
}

.sp-form-group-item>.sp-form-label {
  word-break:break-all;
  display:inline-block;
  margin-bottom:.2em;
}

.sp-form-field>.sp-form-data,
.sp-form-group>.sp-form-data {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  word-break:break-all;
  padding:0.25em 0;
  box-sizing:border-box;
}

.sp-form-group-item>.sp-form-data {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-form-required {
  display:inline-block;
  margin:0 .5em;
  padding: 3px 6px;
  background:var(--accent-color);
  color:#ffffff;
  line-height:1;
  border-radius:.25em;
  font-size:0.7em;
  font-weight: bold;
  vertical-align: middle;
}

.sp-form-group-item:not(:last-child) { margin-bottom:.5em; }

.sp-form-noted {
  font-size:.8em;
  color:#808080;
  word-break:break-all;
  margin-top:.5em;
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-error {
  font-size:.8em;
  color:var(--accent-color);
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-control {
  -moz-appearance:none;
  -webkit-appearance:none;
  -ms-progress-appearance:none;
  appearance:none;
  font-family:inherit;
  font-size:1em;
  line-height:1.5;
  padding:.3em .7em;
  padding-left:clamp(12px, calc(var(--input-radius) - 2px), 24px);
  background:var(--input-color);
  color:#333333;
  box-sizing:border-box;
  width:100%;
  height:48px;
  margin-bottom:.3em;
  border:none;
  outline:none;
  border-radius:var(--input-radius);
  box-shadow:0 0 0 0.5px var(--input-border-color);
}
.sp-form-control:focus {
  box-shadow:0 0 0 2px var(--main-color);
}
.sp-form-control[type="number"] {
  height: 36px;
}

.sp-form-control:placeholder-shown { color:#aaa; }

.sp-form-control::placeholder { color:#aaa; }

.sp-form-control::-ms-input-placeholder { color:#aaa; }

.sp-form-control:-ms-input-placeholder { color:#aaa; }

.sp-form-control:-moz-placeholder { color:#aaa; }

textarea.sp-form-control {
  resize:vertical;
  padding-top:clamp(6px, calc(var(--input-radius) / 2), 18px);
  height:calc(1.5em * 5);
}

select.sp-form-control,
option.sp-form-control {
  -moz-appearance:none;
  -webkit-appearance:none;
  -ms-progress-appearance:none;
  appearance:none;
  padding-right:1.5em;
}

.sp-form-control>option { background:#FFFFFF;}

select.sp-form-control::-ms-expand { display:none; }

.sp-form-phone .sp-form-control { max-width:20em; }

.sp-form-phone>*:not(:only-child) { margin-right:.5rem; }

.sp-form-dropdown { position:relative; }

.sp-form-dropdown-icon {
  display:block;
  position:absolute;
  top:1.3em;
  right:1em;
  line-height:0;
  pointer-events:none;
}

.sp-form-dropdown-icon:after {
  content:"";
  display:block;
  border-top:0.333em solid #888;
  border-right:.333em solid transparent;
  border-left:.333em solid transparent;
}

.sp-form-selection {
  display:block;
  cursor: pointer;
  margin-bottom:.3em;
  padding:.25em .75em .35em;
  background:var(--input-color);
  border-radius: var(--input-radius);
  box-shadow:0 0 0 0.5px var(--input-border-color) ;
}

.sp-form-selection-label {
  display: inline-block;
  position: relative;
  vertical-align:middle;
  padding: 4px 0;
}

.sp-form-datetimes,
.sp-form-date,
.sp-form-time,
.sp-form-timezone {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-form-datetime,
.sp-form-date,
.sp-form-time,
.sp-form-timezone {
  margin-right:.5rem;
  -ms-flex-wrap:nowrap;
  flex-wrap:nowrap;
}

.sp-form-datetime { max-width:20em; }

.sp-form-phone {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-form-date-separator {
  width:1em;
  margin-bottom: .3em;
  text-align:center;
  -ms-flex-negative:1;
  flex-shrink:0;
}

.sp-form-number { max-width:20em; }

.sp-form-email-reenter,
.sp-form-password-reenter {
  font-size:.9em;
  margin-bottom:.2em;
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-html p { margin:0; }

.sp-form-interaction {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-top:1em;
}

.sp-form-prev-button {
  color:#333333;
  background-color:var(--base-color);
  border:2.0px solid #666666;
}

.sp-form-next-button,
.sp-form-login-button {
  color:#ffffff;
  background-color:var(--main-color);
  border:none;
}

.sp-form-field .sp-form-embedded { padding-left:.25em; }

.sp-form-selection>input[type="radio"],
.sp-form-selection>input[type="checkbox"] {
  display: none;
  vertical-align:middle;
  margin-left:0;
}

.sp-form-selection>input[type="radio"]+.sp-form-selection-label::before,
.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
  display: inline-block;
  content:"";
  position: relative;
  box-sizing: border-box;
  top: 4px;
  margin-right: 6px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border:10px solid #ffffff;
  box-shadow: 0 0 0 0.5px var(--input-border-color);
  transition: var(--transition);
}

.sp-form-selection>input[type="radio"]+.sp-form-selection-label::before {
  border-radius: 50%;
}

.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before {
  border-radius: min(var(--input-radius), 4px);
}

.sp-form-selection>input[type="radio"]:checked+.sp-form-selection-label::before{
  background: var(--main-color);
  border:4px solid #ffffff;
}
.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::after{
  border-right: 3px solid var(--main-color);
  border-bottom: 3px solid var(--main-color);
  content: '';
  display: inline-block;
  width: 6px;
  height: 10px;
  left: 9px;
  margin-top: -7px;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  opacity: 0;
  transition: var(--transition);
}

.sp-form-selection>input[type="checkbox"]:checked+.sp-form-selection-label::after{
  left: 6px;
  opacity: 1;
}

.sp-form-date>input,
.sp-form-time>input { max-width:7em; }

.sp-form-date>input[type="date"]{
  min-width: 140px;
  max-width: none;
}
.sp-form-time>input[type="time"] {
  min-width: 92px;
  max-width: none;
}

.sp-form-interaction>button {
  -webkit-box-flex:1;
  -ms-flex-positive:1;
  flex-grow:1;
  cursor:pointer;
  font-size:1em;
  font-weight:bold;
  line-height:1.5;
  margin:.5rem;
  padding:.75rem 0;
  text-align:center;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  white-space:nowrap;
  border-radius:var(--input-radius);
}

@media (min-width:768px) {
  .sp-form-container {
    font-size:initial;
    padding:3em;
    margin:2em auto;
  }

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding-bottom:0.5em;
}

  .sp-form-field,
  .sp-form-group {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row nowrap;
    flex-flow:row nowrap;
  }

  .sp-form-field>.sp-form-label,
  .sp-form-group>.sp-form-label {
    font-size:1em;
    width:var(--label-width);
    padding:.5em;
  }

  .sp-form-group .sp-form-group-item>.sp-form-label {
    font-size:.9em;
    padding-right:.5em;
  }

  .sp-form-field>.sp-form-data,
  .sp-form-group>.sp-form-data {
    font-size:1em;
    width:var(--data-width);
    padding:.5em;
  }

  .sp-form-group>.sp-form-data {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }

  .sp-form-group.sp-form-group-vertical>.sp-form-data {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-form-required {
    font-size:0.8em;
  }

  .sp-form-group-item { padding:.25em; }

  .sp-form-group-item:not(:last-child) { margin-bottom:0; }

  .sp-form-control { font-size:.9em; }

  .sp-form-selection {
    font-size:.9em;
    margin:0 .5em 0 0;
    padding-right:1em;
    background:none;
    box-shadow:none;
  }
  .sp-form-selection-vertical>.sp-form-selection {
    margin:0 auto 0 0;
    padding-right: 4em;
  }

  .sp-form-selection-vertical {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-form-selection-horizontal {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }

  .sp-form-interaction {
    justify-content:center;
    margin-top:2em;
  }

  .sp-form-embedded { font-size:.9em; }

  .sp-form-group-item .sp-form-embedded { padding-right:5em; }

  .sp-form-selection>input[type="radio"]+.sp-form-selection-label::before,
  .sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
    background: var(--input-color);
    border:10px solid var(--input-color);
  }

  .sp-form-selection>input[type="radio"]:hover+.sp-form-selection-label::before,
  .sp-form-selection>input[type="checkbox"]:hover+.sp-form-selection-label::before{
    border:10px solid #dddddd;
  }

  .sp-form-selection>input[type="radio"]:checked+.sp-form-selection-label::before{
    border:4px solid var(--input-color);
  }

  .sp-form-date>input[type="date"]{
    min-width: unset;
  }
  .sp-form-time>input[type="time"] {
    min-width: unset;
  }

  .sp-form-interaction>button {
    -webkit-box-flex:0;
    -ms-flex-positive:0;
    flex-grow:0;
    padding:.75rem 5em;
  }
}

.sp-form-recaptcha {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:start;
  -ms-flex-pack:start;
  justify-content:flex-start;
}

.sp-form-recaptcha-right {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end;
  -ms-flex-pack:end;
  justify-content:flex-end;
}

.sp-form-recaptcha-center {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}

.sp-form-file-button {
  padding:.8em 2em;
  font-weight: bold;
  cursor:pointer;
  color:#666666;
  background-color:#f6f6f6;
  border:none;
  border: solid 2px #a0a0a0;
  border-radius:var(--input-radius);
  transition: var(--transition);
  align-items: center;
  justify-content: center;
}
.sp-form-file-button::before{
  display: inline-block;
  content: url('data:image/svg+xml;utf-8,<svg fill="%23666" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.4,7.9l-5.7,5.7c-0.4,0.4-0.8,0.6-1.2,0.8c-0.7,0.3-1.4,0.3-2.1,0.2c-0.7-0.1-1.4-0.5-1.9-1c-0.4-0.4-0.6-0.8-0.8-1.2c-0.3-0.7-0.3-1.4-0.2-2.1c0.1-0.7,0.5-1.4,1-1.9L9.7,2c0.2-0.2,0.5-0.4,0.8-0.5c0.4-0.2,0.9-0.2,1.3-0.1C12.2,1.4,12.6,1.6,13,2c0.2,0.2,0.4,0.5,0.5,0.8c0.2,0.4,0.2,0.9,0.1,1.3c-0.1,0.4-0.3,0.8-0.6,1.2l-6.2,6.2c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.1-0.5,0c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.1-0.3,0-0.5c0-0.2,0.1-0.3,0.2-0.4l5.5-5.5l-0.9-0.9L4.7,9.3C4.5,9.5,4.4,9.7,4.3,10c-0.2,0.4-0.2,0.8-0.1,1.2c0.1,0.4,0.3,0.8,0.6,1.1c0.2,0.2,0.4,0.4,0.7,0.5c0.4,0.2,0.8,0.2,1.2,0.1c0.4-0.1,0.8-0.3,1.1-0.6l6.2-6.2c0.3-0.3,0.6-0.8,0.8-1.2c0.3-0.6,0.3-1.4,0.2-2c-0.1-0.7-0.5-1.3-1-1.8c-0.3-0.3-0.8-0.6-1.2-0.8c-0.6-0.3-1.4-0.3-2-0.2C10,0.2,9.3,0.5,8.8,1L2.5,7.4C2,7.9,1.6,8.5,1.4,9.1C1,10,0.9,11,1.1,11.9c0.2,1,0.6,1.9,1.4,2.6C3,15,3.5,15.4,4.1,15.6C5.1,16,6,16.1,7,15.9c1-0.2,1.9-0.6,2.6-1.4l5.7-5.7L14.4,7.9z"/></svg>');
  margin-left: -0.5em;
  width: 16px;
  height: 100%;
  vertical-align: middle;
}

.sp-form-file-button:focus { outline:0; }

.sp-from-file-default-drag-drop-area {
  color:#333333;
  background-color:var(--input-color);
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  text-align:center;
  border-radius: var(--input-radius);
}

.sp-from-file-ondraghover-drag-drop-area {
  color:#333333;
  background-color:#dddddd;
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  text-align:center;
  border-radius: var(--input-radius);
}

.sp-from-file-ondragleave-drag-drop-area {
  color:#333333;
  background-color:#dddddd;
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  border-radius: var(--input-radius);
}

.sp-from-file-ondrop-drag-drop-area {
  color:#333333;
  background-color:var(--input-color);
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  border-radius: var(--input-radius);
}

.sp-form-embedded>.sp-file-info:last-child { padding-bottom:0; }

.sp-file-info {
  padding-top:1em;
  padding-bottom:1em;
  line-height:1.5;
}

.sp-file-info>div { width:100%; }

.main-text {
  font-size:1em;
  font-weight:bold;
}

[class^="sp-step-flow-f"] {
  margin:3em 0 2em;
  }

[class^="sp-step-flow-f"]>.large-setting {
  display:flex;
  justify-content: center;
}

[class^="sp-step-flow-f"]>.small-setting { display:none; }

[class^="sp-step-flow-f"]>.large-setting,
[class^="sp-step-flow-f"]>.small-setting {
  text-align: center;
  margin: 0 auto;
  padding: 0 20px;
}

[class^="sp-step-flow-f"]>.large-setting>.step,
[class^="sp-step-flow-f"]>.small-setting>.step {
  word-wrap: break-word;
  min-width: 0;
  text-align:center;
}

[class^="sp-step-flow-f"]>.large-setting>.step {
  flex: 1;
  margin-right:36px;
  font-size:16px;
}

[class^="sp-step-flow-f"]>.small-setting>.step {
  font-size:14px;
}

[class^="sp-step-flow-f"]>.large-setting>.step:last-child,
[class^="sp-step-flow-f"]>.small-setting>.step:last-child {
  margin-right: 0;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span,
[class^="sp-step-flow-f"]>.small-setting>.step>span {
  overflow: hidden;
  text-overflow: ellipsis;
  position:relative;
  display:block;
  padding-top: 16px;
  white-space:nowrap;
  color:#D3D6DB;
  font-weight:bold;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span::before,
[class^="sp-step-flow-f"]>.small-setting>.step>span::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  width: 100%;
  background: #D3D6DB;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span::before {
  height: 6px;
  border-radius: 6px;
}

[class^="sp-step-flow-f"]>.small-setting>.step>span::before {
  height: 4px;
  border-radius: 4px;
}

[class^="sp-step-flow-f"]>.large-setting>.step.active>span,
[class^="sp-step-flow-f"]>.small-setting>.step.active>span { color:var(--main-color); }

[class^="sp-step-flow-f"]>.large-setting>.step.active>span::before,
[class^="sp-step-flow-f"]>.small-setting>.step.active>span::before { background:var(--main-color); }

@media (max-width: 765px) {
  [class^="sp-step-flow-f"]>.large-setting { display:none; }

  [class^="sp-step-flow-f"]>.small-setting {
    display:flex;
    justify-content: center;
    counter-reset:step;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step>span { display: none; }

  [class^="sp-step-flow-f"]>.small-setting>.step {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    background: none;
    color: #ffffff;
    font-weight: bold;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step::before {
    counter-increment: step 1;
    content: counter(step, decimal);
    width:24px;
    height:24px;
    background: var(--main-color);
    border-radius: 50%;
    font-size: 12px;
    line-height: 24px;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step:not(:last-child) { flex-grow: 1; }

  [class^="sp-step-flow-f"]>.small-setting>.step:not(:last-child)::after {
    content: "";
    width: calc(100% - 24px);
    height:2px;
    background: var(--main-color);
    vertical-align: middle;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step.active::after,
  [class^="sp-step-flow-f"]>.small-setting>.step.active~.step::before,
  [class^="sp-step-flow-f"]>.small-setting>.step.active~.step::after { background:#D3D6DB; }
}

HTMLの「"f0xx"」、「record[xx]」には、内覧予約DB内の対応するフィールドIDを記載ください。

手順３：登録情報変更ページに更新フォームのブロックを埋め込み

手順１で作成した資料請求ページに手順２で作成したブロックとヘッダとフッターの共通のフリーコンテンツブロックを埋め込みます。
HTML

<!--/* body以下の要素を記述してください */-->
<a href="#" data-logout>Logout</a>
<!-- ヘッダ -->
<sp:block name="fcb0xxxx"></sp:block>
<!--/* アクセス日が予約日当日以降の場合 */-->
<th:block th:if="${cp.result.value['check'] eq 0}">
    <!-- エラーメッセージ -->
    <sp:block name="fcb0xxxx"></sp:block>
</th:block>
<th:block th:if="${siteClient.record[xx]?.id eq 1}">
    <!-- 予約キャンセルメッセージ -->
    <sp:block name="fcb0xxxx"></sp:block>
</th:block>
<!--/* アクセス日が予約日前日以前の場合 */-->
<th:block th:if="${cp.result.value['check'] eq 1 and siteClient.record[xx]?.id ne 1}">
    <h1>登録情報変更ページ</h1>
    <!-- 登録情報変更フォーム -->
    <sp:block name="ufb0xxxx"></sp:block>
</th:block>
<!-- フッター -->
<sp:block name="fcb0xxxx"></sp:block>

CSS

h2 {
    text-align: center;
}

h1 {
    text-align: center;
}

.reserve_attention {
    display: block;
    text-align: center;
    margin: 0.5rem 0;
}

.url-button {
    width: auto;
    /* font-size:0.875rem; */
    padding:0.5rem 0;
    text-align:center;
    text-decoration:none;
    flex: 1;

    color: #ffffff;
    background-color: #0D60DB;
    border: 1.0px solid #0D60DB;
    border-radius: calc(12px / 1.2);
}

.button-l {
    padding:0.5rem 6%;
    margin-right: 0.5rem;
}

.button-r {
    padding:0.5rem 5%;
    margin-left: 0.5rem;
}

.button {
    padding:0.5rem 5%;
}

.sp-url-button {
    text-align: center;
    width: auto;
    margin: 1.5rem auto;
    /* border: 1px solid #dddddd; */
}

また、情報変更は予約日前日まで可能としたいため、アクセス日が予約日より前の日付かチェックするPHPを記載します。
PHP

<?php
    $today = date("Y-m-d");
    $date_record = $SPIRAL->getAuthRecordByFieldId("xx");
    if($today < $date_record){
        $SPIRAL->setTHValue("check",1);
    }
    else{
        $SPIRAL->setTHValue("check",0);
    }
?>

HTMLの「"record[xx]"」、PHPの「"xx"」には、内覧予約DB内の削除済みフラグと予約日のフィールドIDを記載ください。
HTMLの「"fcb0xxxx"」、「"ufb0xxxx"」には、ヘッダ、登録情報変更フォームブロック、フッターのIDを記載ください。
HTMLのエラーメッセージ、予約キャンセルメッセージの「"fcb0xxxx"」には、それぞれ「内覧予約認証エリア内ページの作成」の手順５で作成するフリーコンテンツブロックのIDを記載ください。

手順４：予約キャンセルページを作成

内覧予約認証エリアの「＋」ボタンから新規ページを作成します。
予約キャンセルページはクリックログインページのため、認証は「あり」、クリックログインは「許可する」で設定します。
設定方法は、「ソース設定」を選択します。

手順５：予約キャンセルページに埋め込むエラーメッセージ用のフリーコンテンツブロックを作成

エラーメッセージ、予約キャンセルエラーメッセージブロックは、フリーコンテンツブロックで作成します。
フリーコンテンツブロックは、ソース設定で作成します。
エラーメッセージブロックHTML

<div class="sp-form-container">
  <p><br></p>
  <p><br></p>
  <p><br></p>
  <p><br></p>
  <p><br></p>
  <p><br></p>
  <p style="text-align: center;">エラーが発生しました。</p><br>
  <div class="sp-record-list-card-actions">
    <a th:href="|${pages['p0xxxxx']?.path ?:'/404'}|">TOPページへ戻る</a>
  </div>
  <p><br></p>
  <p><br></p>
  <p><br></p>
  <p><br></p>
  <p><br></p>
  <p><br></p>
</div>

エラーメッセージブロックCSS

.sp-free-content-container {
  font-size:16px;
  padding:1em;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  width:100.0%;
  color:#333333;
  word-break:break-word;
  background-color:#ffffff;
  border:1.0px solid #dddddd;
  border-radius:0.25rem;
  margin:0 auto;
  text-align: center;
}

@media (min-width:768px) {
  .sp-free-content-container-19619 {
    font-size:initial;
    padding:3.0em;
  }
}

.sp-record-list-card-actions {
  width: auto;
  font-size:0.875rem;
  padding:0.5rem 0;
  text-align:center;
  text-decoration:none;
  flex: 1;
}

.sp-record-list-card-actions a {
  color: #ffffff;
  background-color: #0D60DB;
  border: 1.0px solid #0D60DB;
  border-radius: calc(12px / 1.2);
  /* background-color:#ffffff; */
  font-size:0.875rem;
  padding:0.5rem 0.75rem;
  text-align:center;
  text-decoration:none;
  flex: 1;
}

.sp-form-container {
  font-size:16px;
  padding:1em;
  box-sizing:border-box;
  max-width: 960px;
  color:#505050;
  background-color:var(--base-color);
  border:1px solid #E1E5EB;
  border-radius:var(--input-radius);
}

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding:0.5em 1em;
}

@media (min-width:768px) {
  .sp-form-container {
    font-size:initial;
    padding:3em;
    margin:2em auto;
  }

  .sp-form-container .sp-form-item:not(:last-child) {
    margin-bottom:0.5em;
    padding-bottom:0.5em;
  }
}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
    margin: 0;
}

予約キャンセルエラーメッセージブロックHTML

<div class="sp-form-container">
  <p><br></p>
  <p><br></p>
  <p><br></p>
  <p><br></p>
  <p><br></p>
  <p style="text-align: center;">予約をキャンセルいたしました。</p><br>
  <div class="sp-record-list-card-actions">
    <a th:href="|${pages['p0xxxxx']?.path ?:'/404'}|">TOPページへ戻る</a>
  </div>
  <p><br></p>
  <p><br></p>
  <p><br></p>
  <p><br></p>
  <p><br></p>
  <p><br></p>
</div>

予約キャンセルエラーメッセージブロックCSS

.sp-free-content-container {
  font-size:16px;
  padding:1em;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  width:100.0%;
  color:#333333;
  word-break:break-word;
  background-color:#ffffff;
  border:1.0px solid #dddddd;
  border-radius:0.25rem;
  margin:0 auto;
  text-align: center;
}

@media (min-width:768px) {
  .sp-free-content-container-19619 {
    font-size:initial;
    padding:3.0em;
  }
}

.sp-record-list-card-actions {
  width: auto;
  font-size:0.875rem;
  padding:0.5rem 0;
  text-align:center;
  text-decoration:none;
  flex: 1;
}

.sp-record-list-card-actions a {
  color: #ffffff;
  background-color: #0D60DB;
  border: 1.0px solid #0D60DB;
  border-radius: calc(12px / 1.2);
  /* background-color:#ffffff; */
  font-size:0.875rem;
  padding:0.5rem 0.75rem;
  text-align:center;
  text-decoration:none;
  flex: 1;
}

.sp-form-container {
  font-size:16px;
  padding:1em;
  box-sizing:border-box;
  max-width: 960px;
  color:#505050;
  background-color:var(--base-color);
  border:1px solid #E1E5EB;
  border-radius:var(--input-radius);
}

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding:0.5em 1em;
}

@media (min-width:768px) {
  .sp-form-container {
    font-size:initial;
    padding:3em;
    margin:2em auto;
  }

  .sp-form-container .sp-form-item:not(:last-child) {
    margin-bottom:0.5em;
    padding-bottom:0.5em;
  }
}

HTMLの['p0xxxxx']には、内覧予約トップページのIDを記載ください。

手順６：予約キャンセルページに埋め込む予約キャンセルフォームブロックを作成

予約キャンセルフォームブロックは、更新フォームブロックで作成します。
更新フォームブロックは、更新対象DBは内覧予約DB、更新対象レコードは認証レコード、設定方法はソース設定を選択します。
HTML

<div class="sp-form-container">
    <div class="sp-step-flow-f24431">
    <div class="large-setting arrow sp-clearfix">
      <div class="step active" title="入力">
        <span>入力</span>
      </div>
      <div class="step" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
    <div class="small-setting arrow sp-clearfix">
      <div class="step active" title="入力">
        <span>入力</span>
      </div>
      <div class="step" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
  </div>
  <div class="sp-form-item sp-form-html" th:inline="none"><p><span style="font-size: 18pt;">予約キャンセルフォーム</span></p></div>
  <div class="sp-form-item sp-form-html" th:inline="none">以下の予約をキャンセルいたします<br>よろしければ「予約をキャンセルする」を押してしてください</div>
  <!-- /* 予約日(reservationDate) */ -->
  <sp:input-field name="f0xx" control="ymdText"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <div class="sp-form-datetimes">
        <div class="sp-form-date">
          <span type="number" th:name="${fields['f0xx:year'].name}" th:text="${siteClient.record[xx].year}" th:value="${siteClient.record[xx].year}"></span>
          <input type="hidden" th:name="${fields['f0xx:year'].name}" th:value="${siteClient.record[xx].year}">
          <span class="sp-form-date-separator">/</span>
          <span type="number" th:name="${fields['f0xx:month'].name}" th:text="${siteClient.record[xx].month}" th:value="${siteClient.record[xx].month}"></span>
          <input type="hidden" th:name="${fields['f0xx:month'].name}" th:value="${siteClient.record[xx].month}">
          <span class="sp-form-date-separator">/</span>
          <span type="number" th:name="${fields['f0xx:day'].name}" th:text="${siteClient.record[xx].day}" th:value="${siteClient.record[xx].day}"></span>
          <input type="hidden" th:name="${fields['f0xx:day'].name}" th:value="${siteClient.record[xx].day}">
        </div>
      </div>
    </div>
  </div>
  <!-- /* 予約時間(reservationTime) */ -->
  <sp:input-field name="f0xx" control="hmsText"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <div class="sp-form-datetimes">
        <div class="sp-form-time">
          <span type="number" th:name="${fields['f0xx'].name}" th:text="${siteClient.record[xx]}" th:value="${siteClient.record[xx]}"></span>
          <input type="hidden" th:name="${fields['f0xx:hour'].name}" th:value="${#maps.containsKey(inputs, 'f0xx:hour') ? inputs['f0xx:hour'] : siteClient.record[xx]?.hour}">
          <input type="hidden" th:name="${fields['f0xx:minute'].name}" th:value="${#maps.containsKey(inputs, 'f0xx:minute') ? inputs['f0xx:minute'] : siteClient.record[xx]?.minute}">
          <input type="hidden" th:name="${fields['f0xx:second'].name}" th:value="${#maps.containsKey(inputs, 'f0xx:second') ? inputs['f0xx:second'] : siteClient.record[xx]?.second}">
        </div>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <div class="sp-form-item sp-form-interaction">
    <button class="sp-form-prev-button" type="submit" name="action" value="previous" th:if="!${step.isFirst}" th:text="${step.prevButtonLabel}">Prev</button>
    <button class="sp-form-next-button" type="submit" name="action" value="next" th:text="予約をキャンセルする">Next</button>
  </div>
</div>

HTML(確認ステップ)

<div class="sp-form-container">
    <div class="sp-step-flow-f24431">
    <div class="large-setting arrow sp-clearfix">
      <div class="step" title="入力">
        <span>入力</span>
      </div>
      <div class="step active" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
    <div class="small-setting arrow sp-clearfix">
      <div class="step" title="入力">
        <span>入力</span>
      </div>
      <div class="step active" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
  </div>
  <p><br></p>
  <p><br></p>
  <div style="text-align: center;">予約をキャンセルいたします。<br>よろしければ「キャンセル」を押してしてください。</div>
<div class="sp-form-item sp-form-interaction">
  <button class="sp-form-prev-button" type="submit" name="action" value="previous" th:if="!${step.isFirst}" th:text="${step.prevButtonLabel}">戻る</button>
  <button class="sp-form-next-button" type="submit" name="action" value="next" th:text="キャンセル">次へ</button>
</div>
<p><br></p>
<p><br></p>
</div>

CSS

:root {
  /*=============================
	カスタムプロパティ
  ==============================*/
  --base-color: #FFFFFF; /* フォームブロックの背景色 */
  --main-color: #0D60DB; /* メインカラー */
  --accent-color: #B8250F; /* アクセントカラー */
  --input-color: #F5F7FA; /* 入力欄の背景色 */
  --input-border-color: #D3D6DB; /* 入力欄の枠線の色 */
  --input-radius: 12px; /* 入力欄の角の丸さ */
  --transition: 0.1s; /* アニメーション時間 */

  /*------ 合計100%になるよう調整 -------*/
  --label-width: 25%; /* ラベル部分の幅 */
  --data-width: 75%; /* データ部分の幅 */
}

.sp-form-container {
  font-size:16px;
  padding:1em;
  box-sizing:border-box;
  max-width: 960px;
  color:#505050;
  background-color:var(--base-color);
  border:1px solid #E1E5EB;
  border-radius:var(--input-radius);
}

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding:0.5em 1em;
}

.sp-form-field,
.sp-form-group {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-form-field>.sp-form-label,
.sp-form-group>.sp-form-label {
  font-size:1.15em;
  font-weight:bold;
  padding:.25em 0;
  word-break:break-all;
  box-sizing:border-box;
  color:#333333;
}

.sp-form-group-item>.sp-form-label {
  word-break:break-all;
  display:inline-block;
  margin-bottom:.2em;
}

.sp-form-field>.sp-form-data,
.sp-form-group>.sp-form-data {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  word-break:break-all;
  padding:0.25em 0;
  box-sizing:border-box;
}

.sp-form-group-item>.sp-form-data {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-form-required {
  display:inline-block;
  margin:0 .5em;
  padding: 3px 6px;
  background:var(--accent-color);
  color:#ffffff;
  line-height:1;
  border-radius:.25em;
  font-size:0.7em;
  font-weight: bold;
  vertical-align: middle;
}

.sp-form-group-item:not(:last-child) { margin-bottom:.5em; }

.sp-form-noted {
  font-size:.8em;
  color:#808080;
  word-break:break-all;
  margin-top:.5em;
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-error {
  font-size:.8em;
  color:var(--accent-color);
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-control {
  -moz-appearance:none;
  -webkit-appearance:none;
  -ms-progress-appearance:none;
  appearance:none;
  font-family:inherit;
  font-size:1em;
  line-height:1.5;
  padding:.3em .7em;
  padding-left:clamp(12px, calc(var(--input-radius) - 2px), 24px);
  background:var(--input-color);
  color:#333333;
  box-sizing:border-box;
  width:100%;
  height:48px;
  margin-bottom:.3em;
  border:none;
  outline:none;
  border-radius:var(--input-radius);
  box-shadow:0 0 0 0.5px var(--input-border-color);
}
.sp-form-control:focus {
  box-shadow:0 0 0 2px var(--main-color);
}
.sp-form-control[type="number"] {
  height: 36px;
}

.sp-form-control:placeholder-shown { color:#aaa; }

.sp-form-control::placeholder { color:#aaa; }

.sp-form-control::-ms-input-placeholder { color:#aaa; }

.sp-form-control:-ms-input-placeholder { color:#aaa; }

.sp-form-control:-moz-placeholder { color:#aaa; }

textarea.sp-form-control {
  resize:vertical;
  padding-top:clamp(6px, calc(var(--input-radius) / 2), 18px);
  height:calc(1.5em * 5);
}

select.sp-form-control,
option.sp-form-control {
  -moz-appearance:none;
  -webkit-appearance:none;
  -ms-progress-appearance:none;
  appearance:none;
  padding-right:1.5em;
}

.sp-form-control>option { background:#FFFFFF;}

select.sp-form-control::-ms-expand { display:none; }

.sp-form-phone .sp-form-control { max-width:20em; }

.sp-form-phone>*:not(:only-child) { margin-right:.5rem; }

.sp-form-dropdown { position:relative; }

.sp-form-dropdown-icon {
  display:block;
  position:absolute;
  top:1.3em;
  right:1em;
  line-height:0;
  pointer-events:none;
}

.sp-form-dropdown-icon:after {
  content:"";
  display:block;
  border-top:0.333em solid #888;
  border-right:.333em solid transparent;
  border-left:.333em solid transparent;
}

.sp-form-selection {
  display:block;
  cursor: pointer;
  margin-bottom:.3em;
  padding:.25em .75em .35em;
  background:var(--input-color);
  border-radius: var(--input-radius);
  box-shadow:0 0 0 0.5px var(--input-border-color) ;
}

.sp-form-selection-label {
  display: inline-block;
  position: relative;
  vertical-align:middle;
  padding: 4px 0;
}

.sp-form-datetimes,
.sp-form-date,
.sp-form-time,
.sp-form-timezone {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-form-datetime,
.sp-form-date,
.sp-form-time,
.sp-form-timezone {
  margin-right:.5rem;
  -ms-flex-wrap:nowrap;
  flex-wrap:nowrap;
}

.sp-form-datetime { max-width:20em; }

.sp-form-phone {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-form-date-separator {
  width:1em;
  margin-bottom: .3em;
  text-align:center;
  -ms-flex-negative:1;
  flex-shrink:0;
}

.sp-form-number { max-width:20em; }

.sp-form-email-reenter,
.sp-form-password-reenter {
  font-size:.9em;
  margin-bottom:.2em;
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-html p { margin:0; }

.sp-form-interaction {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-top:1em;
}

.sp-form-prev-button {
  color:#333333;
  background-color:var(--base-color);
  border:2.0px solid #666666;
}

.sp-form-next-button,
.sp-form-login-button {
  color:#ffffff;
  background-color:var(--main-color);
  border:none;
}

.sp-form-field .sp-form-embedded { padding-left:.25em; }

.sp-form-selection>input[type="radio"],
.sp-form-selection>input[type="checkbox"] {
  display: none;
  vertical-align:middle;
  margin-left:0;
}

.sp-form-selection>input[type="radio"]+.sp-form-selection-label::before,
.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
  display: inline-block;
  content:"";
  position: relative;
  box-sizing: border-box;
  top: 4px;
  margin-right: 6px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border:10px solid #ffffff;
  box-shadow: 0 0 0 0.5px var(--input-border-color);
  transition: var(--transition);
}

.sp-form-selection>input[type="radio"]+.sp-form-selection-label::before {
  border-radius: 50%;
}

.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before {
  border-radius: min(var(--input-radius), 4px);
}

.sp-form-selection>input[type="radio"]:checked+.sp-form-selection-label::before{
  background: var(--main-color);
  border:4px solid #ffffff;
}
.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::after{
  border-right: 3px solid var(--main-color);
  border-bottom: 3px solid var(--main-color);
  content: '';
  display: inline-block;
  width: 6px;
  height: 10px;
  left: 9px;
  margin-top: -7px;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  opacity: 0;
  transition: var(--transition);
}

.sp-form-selection>input[type="checkbox"]:checked+.sp-form-selection-label::after{
  left: 6px;
  opacity: 1;
}

.sp-form-date>input,
.sp-form-time>input { max-width:7em; }

.sp-form-date>input[type="date"]{
  min-width: 140px;
  max-width: none;
}
.sp-form-time>input[type="time"] {
  min-width: 92px;
  max-width: none;
}

.sp-form-interaction>button {
  -webkit-box-flex:1;
  -ms-flex-positive:1;
  flex-grow:1;
  cursor:pointer;
  font-size:1em;
  font-weight:bold;
  line-height:1.5;
  margin:.5rem;
  padding:.75rem 0;
  text-align:center;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  white-space:nowrap;
  border-radius:var(--input-radius);
}

@media (min-width:768px) {
  .sp-form-container {
    font-size:initial;
    padding:3em;
    margin:2em auto;
  }

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding-bottom:0.5em;
}

  .sp-form-field,
  .sp-form-group {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row nowrap;
    flex-flow:row nowrap;
  }

  .sp-form-field>.sp-form-label,
  .sp-form-group>.sp-form-label {
    font-size:1em;
    width:var(--label-width);
    padding:.5em;
  }

  .sp-form-group .sp-form-group-item>.sp-form-label {
    font-size:.9em;
    padding-right:.5em;
  }

  .sp-form-field>.sp-form-data,
  .sp-form-group>.sp-form-data {
    font-size:1em;
    width:var(--data-width);
    padding:.5em;
  }

  .sp-form-group>.sp-form-data {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }

  .sp-form-group.sp-form-group-vertical>.sp-form-data {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-form-required {
    font-size:0.8em;
  }

  .sp-form-group-item { padding:.25em; }

  .sp-form-group-item:not(:last-child) { margin-bottom:0; }

  .sp-form-control { font-size:.9em; }

  .sp-form-selection {
    font-size:.9em;
    margin:0 .5em 0 0;
    padding-right:1em;
    background:none;
    box-shadow:none;
  }
  .sp-form-selection-vertical>.sp-form-selection {
    margin:0 auto 0 0;
    padding-right: 4em;
  }

  .sp-form-selection-vertical {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-form-selection-horizontal {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }

  .sp-form-interaction {
    justify-content:center;
    margin-top:2em;
  }

  .sp-form-embedded { font-size:.9em; }

  .sp-form-group-item .sp-form-embedded { padding-right:5em; }

  .sp-form-selection>input[type="radio"]+.sp-form-selection-label::before,
  .sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
    background: var(--input-color);
    border:10px solid var(--input-color);
  }

  .sp-form-selection>input[type="radio"]:hover+.sp-form-selection-label::before,
  .sp-form-selection>input[type="checkbox"]:hover+.sp-form-selection-label::before{
    border:10px solid #dddddd;
  }

  .sp-form-selection>input[type="radio"]:checked+.sp-form-selection-label::before{
    border:4px solid var(--input-color);
  }

  .sp-form-date>input[type="date"]{
    min-width: unset;
  }
  .sp-form-time>input[type="time"] {
    min-width: unset;
  }

  .sp-form-interaction>button {
    -webkit-box-flex:0;
    -ms-flex-positive:0;
    flex-grow:0;
    padding:.75rem 5em;
  }
}

.sp-form-recaptcha {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:start;
  -ms-flex-pack:start;
  justify-content:flex-start;
}

.sp-form-recaptcha-right {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end;
  -ms-flex-pack:end;
  justify-content:flex-end;
}

.sp-form-recaptcha-center {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}

.sp-form-file-button {
  padding:.8em 2em;
  font-weight: bold;
  cursor:pointer;
  color:#666666;
  background-color:#f6f6f6;
  border:none;
  border: solid 2px #a0a0a0;
  border-radius:var(--input-radius);
  transition: var(--transition);
  align-items: center;
  justify-content: center;
}
.sp-form-file-button::before{
  display: inline-block;
  content: url('data:image/svg+xml;utf-8,<svg fill="%23666" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.4,7.9l-5.7,5.7c-0.4,0.4-0.8,0.6-1.2,0.8c-0.7,0.3-1.4,0.3-2.1,0.2c-0.7-0.1-1.4-0.5-1.9-1c-0.4-0.4-0.6-0.8-0.8-1.2c-0.3-0.7-0.3-1.4-0.2-2.1c0.1-0.7,0.5-1.4,1-1.9L9.7,2c0.2-0.2,0.5-0.4,0.8-0.5c0.4-0.2,0.9-0.2,1.3-0.1C12.2,1.4,12.6,1.6,13,2c0.2,0.2,0.4,0.5,0.5,0.8c0.2,0.4,0.2,0.9,0.1,1.3c-0.1,0.4-0.3,0.8-0.6,1.2l-6.2,6.2c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.1-0.5,0c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.1-0.3,0-0.5c0-0.2,0.1-0.3,0.2-0.4l5.5-5.5l-0.9-0.9L4.7,9.3C4.5,9.5,4.4,9.7,4.3,10c-0.2,0.4-0.2,0.8-0.1,1.2c0.1,0.4,0.3,0.8,0.6,1.1c0.2,0.2,0.4,0.4,0.7,0.5c0.4,0.2,0.8,0.2,1.2,0.1c0.4-0.1,0.8-0.3,1.1-0.6l6.2-6.2c0.3-0.3,0.6-0.8,0.8-1.2c0.3-0.6,0.3-1.4,0.2-2c-0.1-0.7-0.5-1.3-1-1.8c-0.3-0.3-0.8-0.6-1.2-0.8c-0.6-0.3-1.4-0.3-2-0.2C10,0.2,9.3,0.5,8.8,1L2.5,7.4C2,7.9,1.6,8.5,1.4,9.1C1,10,0.9,11,1.1,11.9c0.2,1,0.6,1.9,1.4,2.6C3,15,3.5,15.4,4.1,15.6C5.1,16,6,16.1,7,15.9c1-0.2,1.9-0.6,2.6-1.4l5.7-5.7L14.4,7.9z"/></svg>');
  margin-left: -0.5em;
  width: 16px;
  height: 100%;
  vertical-align: middle;
}

.sp-form-file-button:focus { outline:0; }

.sp-from-file-default-drag-drop-area {
  color:#333333;
  background-color:var(--input-color);
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  text-align:center;
  border-radius: var(--input-radius);
}

.sp-from-file-ondraghover-drag-drop-area {
  color:#333333;
  background-color:#dddddd;
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  text-align:center;
  border-radius: var(--input-radius);
}

.sp-from-file-ondragleave-drag-drop-area {
  color:#333333;
  background-color:#dddddd;
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  border-radius: var(--input-radius);
}

.sp-from-file-ondrop-drag-drop-area {
  color:#333333;
  background-color:var(--input-color);
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  border-radius: var(--input-radius);
}

.sp-form-embedded>.sp-file-info:last-child { padding-bottom:0; }

.sp-file-info {
  padding-top:1em;
  padding-bottom:1em;
  line-height:1.5;
}

.sp-file-info>div { width:100%; }

.main-text {
  font-size:1em;
  font-weight:bold;
}

[class^="sp-step-flow-f"] {
  margin:3em 0 2em;
  }

[class^="sp-step-flow-f"]>.large-setting {
  display:flex;
  justify-content: center;
}

[class^="sp-step-flow-f"]>.small-setting { display:none; }

[class^="sp-step-flow-f"]>.large-setting,
[class^="sp-step-flow-f"]>.small-setting {
  text-align: center;
  margin: 0 auto;
  padding: 0 20px;
}

[class^="sp-step-flow-f"]>.large-setting>.step,
[class^="sp-step-flow-f"]>.small-setting>.step {
  word-wrap: break-word;
  min-width: 0;
  text-align:center;
}

[class^="sp-step-flow-f"]>.large-setting>.step {
  flex: 1;
  margin-right:36px;
  font-size:16px;
}

[class^="sp-step-flow-f"]>.small-setting>.step {
  font-size:14px;
}

[class^="sp-step-flow-f"]>.large-setting>.step:last-child,
[class^="sp-step-flow-f"]>.small-setting>.step:last-child {
  margin-right: 0;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span,
[class^="sp-step-flow-f"]>.small-setting>.step>span {
  overflow: hidden;
  text-overflow: ellipsis;
  position:relative;
  display:block;
  padding-top: 16px;
  white-space:nowrap;
  color:#D3D6DB;
  font-weight:bold;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span::before,
[class^="sp-step-flow-f"]>.small-setting>.step>span::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  width: 100%;
  background: #D3D6DB;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span::before {
  height: 6px;
  border-radius: 6px;
}

[class^="sp-step-flow-f"]>.small-setting>.step>span::before {
  height: 4px;
  border-radius: 4px;
}

[class^="sp-step-flow-f"]>.large-setting>.step.active>span,
[class^="sp-step-flow-f"]>.small-setting>.step.active>span { color:var(--main-color); }

[class^="sp-step-flow-f"]>.large-setting>.step.active>span::before,
[class^="sp-step-flow-f"]>.small-setting>.step.active>span::before { background:var(--main-color); }

@media (max-width: 765px) {
  [class^="sp-step-flow-f"]>.large-setting { display:none; }

  [class^="sp-step-flow-f"]>.small-setting {
    display:flex;
    justify-content: center;
    counter-reset:step;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step>span { display: none; }

  [class^="sp-step-flow-f"]>.small-setting>.step {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    background: none;
    color: #ffffff;
    font-weight: bold;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step::before {
    counter-increment: step 1;
    content: counter(step, decimal);
    width:24px;
    height:24px;
    background: var(--main-color);
    border-radius: 50%;
    font-size: 12px;
    line-height: 24px;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step:not(:last-child) { flex-grow: 1; }

  [class^="sp-step-flow-f"]>.small-setting>.step:not(:last-child)::after {
    content: "";
    width: calc(100% - 24px);
    height:2px;
    background: var(--main-color);
    vertical-align: middle;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step.active::after,
  [class^="sp-step-flow-f"]>.small-setting>.step.active~.step::before,
  [class^="sp-step-flow-f"]>.small-setting>.step.active~.step::after { background:#D3D6DB; }
}

HTMLの「"f0xx"」、record[xx]には、内覧予約DB内の対応するフィールドIDを記載ください。
予約キャンセルフォームブロックでは、自動登録の設定を行っております。

▼自動登録設定

フィールド	値タイプ	値
予約キャンセルフラグ	固定	キャンセルする

手順７：予約キャンセルページに更新フォームのブロックを埋め込み

デモで設定しているソースコードは下記となります。

HTML

<!-- body以下の要素を記述してください -->
<a href="#" data-logout>Logout</a>
<!-- ヘッダ -->
<sp:block name="fcb0xxxx"></sp:block>
<!--/* アクセス日が予約日当日以降の場合 */-->
<th:block th:if="${cp.result.value['check'] eq 0}">
    <!-- エラーメッセージ -->
    <sp:block name="fcb0xxxx"></sp:block>
</th:block>
<th:block th:if="${siteClient.record[xx]?.id eq 1}">
    <!-- 予約キャンセルメッセージ -->
    <sp:block name="fcb0xxxx"></sp:block>
</th:block>
<!--/* アクセス日が予約日前日以前の場合 */-->
<th:block th:if="${cp.result.value['check'] eq 1 and siteClient.record[xx]?.id ne 1}">
    <h1>予約キャンセルページ</h1>
    <!-- 予約キャンセルフォーム -->
    <sp:block name="ufb0xxxx"></sp:block>
</th:block>
<!-- フッター -->
<sp:block name="fcb0xxxx"></sp:block>

CSS

h2 {
    text-align: center;
}

h1 {
    text-align: center;
}

.reserve_attention {
    display: block;
    text-align: center;
    margin: 0.5rem 0;
}

.url-button {
    width: auto;
    /* font-size:0.875rem; */
    padding:0.5rem 0;
    text-align:center;
    text-decoration:none;
    flex: 1;

    color: #ffffff;
    background-color: #0D60DB;
    border: 1.0px solid #0D60DB;
    border-radius: calc(12px / 1.2);
}

.button-l {
    padding:0.5rem 6%;
    margin-right: 0.5rem;
}

.button-r {
    padding:0.5rem 5%;
    margin-left: 0.5rem;
}

.button {
    padding:0.5rem 5%;
}

.sp-url-button {
    text-align: center;
    width: auto;
    margin: 1.5rem auto;
    /* border: 1px solid #dddddd; */
}

また、登録情報変更ページ同様、アクセス日が予約日より前の日付かチェックするPHPを記載します。
PHP

<?php
    $today = date("Y-m-d");
    $date_record = $SPIRAL->getAuthRecordByFieldId("xx");
    if($today < $date_record){
        $SPIRAL->setTHValue("check",1);
    }
    else{
        $SPIRAL->setTHValue("check",0);
    }
?>

HTMLの「"record[xx]"」、PHPの「"xx"」には、内覧予約DB内の削除済みフラグ、予約日のフィールドIDを記載ください。
HTMLの「"fcb0xxxx"」、「"ufb0xxxx"」には、ヘッダ、予約キャンセルフォームブロック、フッターのIDを記載ください。

手順８：案内後アンケート回答ページを作成

内覧予約認証エリアの「＋」ボタンから新規ページを作成します。
案内後アンケート回答ページはクリックログインページのため、認証は「あり」、クリックログインは「許可する」で設定します。
設定方法は、ソース設定を選択します。

手順９：案内後アンケート回答ページに埋め込む案内後アンケートフォームブロックを作成

案内後アンケートフォームは、登録フォームブロックで作成します。
登録フォームブロックは、設置認証エリアは内覧予約認証エリア、登録対象DBは案内後アンケートDB、設定方法はソース設定を選択します。
参照フィールド設定は、参照_物件マスタDBと物件マスタDBのキーフィールド、認証フィールドをそれぞれ、ID、認証しないに設定します。
HTML

<div class="sp-form-container">
  <div class="sp-step-flow-f24431">
    <div class="large-setting arrow sp-clearfix">
      <div class="step active" title="入力">
        <span>入力</span>
      </div>
      <div class="step" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
    <div class="small-setting arrow sp-clearfix">
      <div class="step active" title="入力">
        <span>入力</span>
      </div>
      <div class="step" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
  </div>
  <div class="sp-form-item sp-form-html" th:inline="none"><p><span style="font-size: 18pt;">案内後アンケートフォーム</span></p></div>
  <div class="sp-form-item sp-form-html" th:inline="none">アンケート事項をご入力の上、「確認画面へ」ボタンを押してください<br>ご意見・ご要望などありましたら、「その他」に記載をお願いいたします</div>
  <!--/* 物件名(propertyRef.propertyName) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      物件名
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${siteClient.record[xx] != null} ? (${siteClient.record[xx][xx]} ?: '値なし')">Example</span>
    </div>
  </div>
    <!--/* 来場された目的(purpose) */-->
    <sp:input-field name="f0xx"></sp:input-field>
    <div class="sp-form-item sp-form-field">
      <div class="sp-form-label">
        <th:block th:text="${fields['f0xx'].label}">
          Label
        </th:block>
        <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
      </div>
      <div class="sp-form-data">
         <div class="sp-form-dropdown">
          <select class="sp-form-control" th:name="${fields['f0xx'].name}">
            <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
            <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
          </select>
          <span class="sp-form-dropdown-icon"></span>
          </div>
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
      </div>
    </div>
    <!--/* 案内は参考になりましたでしょうか・(useful) */-->
    <sp:input-field name="f0xx"></sp:input-field>
    <div class="sp-form-item sp-form-field">
      <div class="sp-form-label">
        <th:block th:text="${fields['f0xx'].label}">
          Label
        </th:block>
        <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
      </div>
      <div class="sp-form-data">
         <div class="sp-form-dropdown">
          <select class="sp-form-control" th:name="${fields['f0xx'].name}">
            <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
            <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
          </select>
          <span class="sp-form-dropdown-icon"></span>
          </div>
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
      </div>
    </div>
    <!--/* 案内はいかがでしたでしょうか。(guideSatisfact) */-->
    <sp:input-field name="f0xx"></sp:input-field>
    <div class="sp-form-item sp-form-field">
      <div class="sp-form-label">
        <th:block th:text="${fields['f0xx'].label}">
          Label
        </th:block>
        <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
      </div>
      <div class="sp-form-data">
         <div class="sp-form-dropdown">
          <select class="sp-form-control" th:name="${fields['f0xx'].name}">
            <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
            <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
          </select>
          <span class="sp-form-dropdown-icon"></span>
          </div>
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
      </div>
    </div>
    <!--/* 部屋はいかがでしたでしょうか。(roomSatisfact) */-->
    <sp:input-field name="f0xx"></sp:input-field>
    <div class="sp-form-item sp-form-field">
      <div class="sp-form-label">
        <th:block th:text="${fields['f0xx'].label}">
          Label
        </th:block>
        <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
      </div>
      <div class="sp-form-data">
         <div class="sp-form-dropdown">
          <select class="sp-form-control" th:name="${fields['f0xx'].name}">
            <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
            <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
          </select>
          <span class="sp-form-dropdown-icon"></span>
          </div>
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
      </div>
    </div>
  <!--/* 参照＿物件マスタ(propertyRef) */-->
    <sp:input-field name="f0xx"></sp:input-field>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
      <!-- </div> -->
      <div class="sp-form-data">
        <input type="hidden" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${siteClient.record[xx]}">
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
       </div>
    <!-- </div> -->
    <div class="sp-form-item sp-form-field" th:if="${fields['f0xx'].isTemporary}">
      <div class="sp-form-label">
        <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
      </div>
      <div class="sp-form-data">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].collationName}" th:placeholder="${fields['f0xx'].placeholder.collation}" th:value="${inputs['f0xx_collation']}">
        <span class="sp-form-error" th:if="${errors['f0xx_collation'] != null}" th:text="${errors['f0xx_collation'].message}">Error message</span>
      </div>
    </div>

  <!--/* その他(comment) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <textarea class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:text="${inputs['f0xx']}"></textarea>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <div class="sp-form-item sp-form-interaction">
    <button class="sp-form-prev-button" type="submit" name="action" value="previous" th:if="!${step.isFirst}" th:text="${step.prevButtonLabel}">Prev</button>
    <button class="sp-form-next-button" type="submit" name="action" value="next" th:text="${step.nextButtonLabel}">Next</button>
  </div>
</div>

HTML(確認ステップ)

<div class="sp-form-container">
  <div class="sp-step-flow-f24431">
    <div class="large-setting arrow sp-clearfix">
      <div class="step" title="入力">
        <span>入力</span>
      </div>
      <div class="step active" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
    <div class="small-setting arrow sp-clearfix">
      <div class="step" title="入力">
        <span>入力</span>
      </div>
      <div class="step active" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
  </div>
  <div class="sp-form-item sp-form-html" th:inline="none"><p><span style="font-size: 18pt;">案内後アンケートフォーム</span></p></div>
  <div class="sp-form-item sp-form-html" th:inline="none">内容をご確認の上、よろしければ「アンケート回答」ボタンを押してください。</div>
  <!--/* 物件名(propertyRef.propertyName) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      物件名
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${siteClient.record[xx] != null} ? (${siteClient.record[xx][xx]} ?: '値なし')">Example</span>
    </div>
  </div>
  <!--/* 来場された目的(purpose) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']?.label}">Item</span>
    </div>
  </div>
  <!--/* 案内は参考になりましたでしょうか・(useful) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']?.label}">Item</span>
    </div>
  </div>
  <!--/* 案内はいかがでしたでしょうか。(guideSatisfact) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']?.label}">Item</span>
    </div>
  </div>
  <!--/* 部屋はいかがでしたでしょうか。(roomSatisfact) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']?.label}">Item</span>
    </div>
  </div>
  <!--/* その他(comment) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded">
        <th:block th:each="line, stat : ${values['f0xx']?.lines}">
          <th:block th:text="${line}"></th:block>
          <br th:unless="${stat.last}">
        </th:block>
      </span>
    </div>
  </div>
  <div class="sp-form-item sp-form-interaction">
    <button class="sp-form-prev-button" type="submit" name="action" value="previous" th:if="!${step.isFirst}" th:text="${step.prevButtonLabel}">Prev</button>
    <button class="sp-form-next-button" type="submit" name="action" value="next" th:text="${step.nextButtonLabel}">Next</button>
  </div>
</div>

CSS

:root {
  /*=============================
	カスタムプロパティ
  ==============================*/
  --base-color: #FFFFFF; /* フォームブロックの背景色 */
  --main-color: #0D60DB; /* メインカラー */
  --accent-color: #B8250F; /* アクセントカラー */
  --input-color: #F5F7FA; /* 入力欄の背景色 */
  --input-border-color: #D3D6DB; /* 入力欄の枠線の色 */
  --input-radius: 12px; /* 入力欄の角の丸さ */
  --transition: 0.1s; /* アニメーション時間 */

  /*------ 合計100%になるよう調整 -------*/
  --label-width: 25%; /* ラベル部分の幅 */
  --data-width: 75%; /* データ部分の幅 */
}

.sp-record-list-card-actions {
  width: auto;
  font-size:0.875rem;
  padding:0.5rem 0;
  text-align:center;
  text-decoration:none;
  flex: 1;
}

.sp-record-list-card-actions a {
  color: #ffffff;
  background-color: #0D60DB;
  border: 1.0px solid #0D60DB;
  border-radius: calc(12px / 1.2);
  /* background-color:#ffffff; */
  font-size:0.875rem;
  padding:0.5rem 0.75rem;
  text-align:center;
  text-decoration:none;
  flex: 1;
}

.sp-form-container {
  font-size:16px;
  padding:1em;
  box-sizing:border-box;
  max-width: 960px;
  color:#505050;
  background-color:var(--base-color);
  border:1px solid #E1E5EB;
  border-radius:var(--input-radius);
}

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding:0.5em 1em;
}

.sp-form-field,
.sp-form-group {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-form-field>.sp-form-label,
.sp-form-group>.sp-form-label {
  font-size:1.15em;
  font-weight:bold;
  padding:.25em 0;
  word-break:break-all;
  box-sizing:border-box;
  color:#333333;
}

.sp-form-group-item>.sp-form-label {
  word-break:break-all;
  display:inline-block;
  margin-bottom:.2em;
}

.sp-form-field>.sp-form-data,
.sp-form-group>.sp-form-data {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  word-break:break-all;
  padding:0.25em 0;
  box-sizing:border-box;
}

.sp-form-group-item>.sp-form-data {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-form-required {
  display:inline-block;
  margin:0 .5em;
  padding: 3px 6px;
  background:var(--accent-color);
  color:#ffffff;
  line-height:1;
  border-radius:.25em;
  font-size:0.7em;
  font-weight: bold;
  vertical-align: middle;
}

.sp-form-group-item:not(:last-child) { margin-bottom:.5em; }

.sp-form-noted {
  font-size:.8em;
  color:#808080;
  word-break:break-all;
  margin-top:.5em;
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-error {
  font-size:.8em;
  color:var(--accent-color);
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-control {
  -moz-appearance:none;
  -webkit-appearance:none;
  -ms-progress-appearance:none;
  appearance:none;
  font-family:inherit;
  font-size:1em;
  line-height:1.5;
  padding:.3em .7em;
  padding-left:clamp(12px, calc(var(--input-radius) - 2px), 24px);
  background:var(--input-color);
  color:#333333;
  box-sizing:border-box;
  width:100%;
  height:48px;
  margin-bottom:.3em;
  border:none;
  outline:none;
  border-radius:var(--input-radius);
  box-shadow:0 0 0 0.5px var(--input-border-color);
}
.sp-form-control:focus {
  box-shadow:0 0 0 2px var(--main-color);
}
.sp-form-control[type="number"] {
  height: 36px;
}

.sp-form-control:placeholder-shown { color:#aaa; }

.sp-form-control::placeholder { color:#aaa; }

.sp-form-control::-ms-input-placeholder { color:#aaa; }

.sp-form-control:-ms-input-placeholder { color:#aaa; }

.sp-form-control:-moz-placeholder { color:#aaa; }

textarea.sp-form-control {
  resize:vertical;
  padding-top:clamp(6px, calc(var(--input-radius) / 2), 18px);
  height:calc(1.5em * 5);
}

select.sp-form-control,
option.sp-form-control {
  -moz-appearance:none;
  -webkit-appearance:none;
  -ms-progress-appearance:none;
  appearance:none;
  padding-right:1.5em;
}

.sp-form-control>option { background:#FFFFFF;}

select.sp-form-control::-ms-expand { display:none; }

.sp-form-phone .sp-form-control { max-width:20em; }

.sp-form-phone>*:not(:only-child) { margin-right:.5rem; }

.sp-form-dropdown { position:relative; }

.sp-form-dropdown-icon {
  display:block;
  position:absolute;
  top:1.3em;
  right:1em;
  line-height:0;
  pointer-events:none;
}

.sp-form-dropdown-icon:after {
  content:"";
  display:block;
  border-top:0.333em solid #888;
  border-right:.333em solid transparent;
  border-left:.333em solid transparent;
}

.sp-form-selection {
  display:block;
  cursor: pointer;
  margin-bottom:.3em;
  padding:.25em .75em .35em;
  background:var(--input-color);
  border-radius: var(--input-radius);
  box-shadow:0 0 0 0.5px var(--input-border-color) ;
}

.sp-form-selection-label {
  display: inline-block;
  position: relative;
  vertical-align:middle;
  padding: 4px 0;
}

.sp-form-datetimes,
.sp-form-date,
.sp-form-time,
.sp-form-timezone {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-form-datetime,
.sp-form-date,
.sp-form-time,
.sp-form-timezone {
  margin-right:.5rem;
  -ms-flex-wrap:nowrap;
  flex-wrap:nowrap;
}

.sp-form-datetime { max-width:20em; }

.sp-form-phone {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-form-date-separator {
  width:1em;
  margin-bottom: .3em;
  text-align:center;
  -ms-flex-negative:1;
  flex-shrink:0;
}

.sp-form-number { max-width:20em; }

.sp-form-email-reenter,
.sp-form-password-reenter {
  font-size:.9em;
  margin-bottom:.2em;
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-html p { margin:0; }

.sp-form-interaction {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-top:1em;
}

.sp-form-prev-button {
  color:#333333;
  background-color:var(--base-color);
  border:2.0px solid #666666;
}

.sp-form-next-button,
.sp-form-login-button {
  color:#ffffff;
  background-color:var(--main-color);
  border:none;
}

.sp-form-field .sp-form-embedded { padding-left:.25em; }

.sp-form-selection>input[type="radio"],
.sp-form-selection>input[type="checkbox"] {
  display: none;
  vertical-align:middle;
  margin-left:0;
}

.sp-form-selection>input[type="radio"]+.sp-form-selection-label::before,
.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
  display: inline-block;
  content:"";
  position: relative;
  box-sizing: border-box;
  top: 4px;
  margin-right: 6px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border:10px solid #ffffff;
  box-shadow: 0 0 0 0.5px var(--input-border-color);
  transition: var(--transition);
}

.sp-form-selection>input[type="radio"]+.sp-form-selection-label::before {
  border-radius: 50%;
}

.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before {
  border-radius: min(var(--input-radius), 4px);
}

.sp-form-selection>input[type="radio"]:checked+.sp-form-selection-label::before{
  background: var(--main-color);
  border:4px solid #ffffff;
}
.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::after{
  border-right: 3px solid var(--main-color);
  border-bottom: 3px solid var(--main-color);
  content: '';
  display: inline-block;
  width: 6px;
  height: 10px;
  left: 9px;
  margin-top: -7px;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  opacity: 0;
  transition: var(--transition);
}

.sp-form-selection>input[type="checkbox"]:checked+.sp-form-selection-label::after{
  left: 6px;
  opacity: 1;
}

.sp-form-date>input,
.sp-form-time>input { max-width:7em; }

.sp-form-date>input[type="date"]{
  min-width: 140px;
  max-width: none;
}
.sp-form-time>input[type="time"] {
  min-width: 92px;
  max-width: none;
}

.sp-form-interaction>button {
  -webkit-box-flex:1;
  -ms-flex-positive:1;
  flex-grow:1;
  cursor:pointer;
  font-size:1em;
  font-weight:bold;
  line-height:1.5;
  margin:.5rem;
  padding:.75rem 0;
  text-align:center;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  white-space:nowrap;
  border-radius:var(--input-radius);
}

@media (min-width:768px) {
  .sp-form-container {
    font-size:initial;
    padding:3em;
    margin:2em auto;
  }

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding-bottom:0.5em;
}

  .sp-form-field,
  .sp-form-group {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row nowrap;
    flex-flow:row nowrap;
  }

  .sp-form-field>.sp-form-label,
  .sp-form-group>.sp-form-label {
    font-size:1em;
    width:var(--label-width);
    padding:.5em;
  }

  .sp-form-group .sp-form-group-item>.sp-form-label {
    font-size:.9em;
    padding-right:.5em;
  }

  .sp-form-field>.sp-form-data,
  .sp-form-group>.sp-form-data {
    font-size:1em;
    width:var(--data-width);
    padding:.5em;
  }

  .sp-form-group>.sp-form-data {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }

  .sp-form-group.sp-form-group-vertical>.sp-form-data {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-form-required {
    font-size:0.8em;
  }

  .sp-form-group-item { padding:.25em; }

  .sp-form-group-item:not(:last-child) { margin-bottom:0; }

  .sp-form-control { font-size:.9em; }

  .sp-form-selection {
    font-size:.9em;
    margin:0 .5em 0 0;
    padding-right:1em;
    background:none;
    box-shadow:none;
  }
  .sp-form-selection-vertical>.sp-form-selection {
    margin:0 auto 0 0;
    padding-right: 4em;
  }

  .sp-form-selection-vertical {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-form-selection-horizontal {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }

  .sp-form-interaction {
    justify-content:center;
    margin-top:2em;
  }

  .sp-form-embedded { font-size:.9em; }

  .sp-form-group-item .sp-form-embedded { padding-right:5em; }

  .sp-form-selection>input[type="radio"]+.sp-form-selection-label::before,
  .sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
    background: var(--input-color);
    border:10px solid var(--input-color);
  }

  .sp-form-selection>input[type="radio"]:hover+.sp-form-selection-label::before,
  .sp-form-selection>input[type="checkbox"]:hover+.sp-form-selection-label::before{
    border:10px solid #dddddd;
  }

  .sp-form-selection>input[type="radio"]:checked+.sp-form-selection-label::before{
    border:4px solid var(--input-color);
  }

  .sp-form-date>input[type="date"]{
    min-width: unset;
  }
  .sp-form-time>input[type="time"] {
    min-width: unset;
  }

  .sp-form-interaction>button {
    -webkit-box-flex:0;
    -ms-flex-positive:0;
    flex-grow:0;
    padding:.75rem 5em;
  }
}

.sp-form-recaptcha {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:start;
  -ms-flex-pack:start;
  justify-content:flex-start;
}

.sp-form-recaptcha-right {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end;
  -ms-flex-pack:end;
  justify-content:flex-end;
}

.sp-form-recaptcha-center {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}

.sp-form-file-button {
  padding:.8em 2em;
  font-weight: bold;
  cursor:pointer;
  color:#666666;
  background-color:#f6f6f6;
  border:none;
  border: solid 2px #a0a0a0;
  border-radius:var(--input-radius);
  transition: var(--transition);
  align-items: center;
  justify-content: center;
}
.sp-form-file-button::before{
  display: inline-block;
  content: url('data:image/svg+xml;utf-8,<svg fill="%23666" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.4,7.9l-5.7,5.7c-0.4,0.4-0.8,0.6-1.2,0.8c-0.7,0.3-1.4,0.3-2.1,0.2c-0.7-0.1-1.4-0.5-1.9-1c-0.4-0.4-0.6-0.8-0.8-1.2c-0.3-0.7-0.3-1.4-0.2-2.1c0.1-0.7,0.5-1.4,1-1.9L9.7,2c0.2-0.2,0.5-0.4,0.8-0.5c0.4-0.2,0.9-0.2,1.3-0.1C12.2,1.4,12.6,1.6,13,2c0.2,0.2,0.4,0.5,0.5,0.8c0.2,0.4,0.2,0.9,0.1,1.3c-0.1,0.4-0.3,0.8-0.6,1.2l-6.2,6.2c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.1-0.5,0c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.1-0.3,0-0.5c0-0.2,0.1-0.3,0.2-0.4l5.5-5.5l-0.9-0.9L4.7,9.3C4.5,9.5,4.4,9.7,4.3,10c-0.2,0.4-0.2,0.8-0.1,1.2c0.1,0.4,0.3,0.8,0.6,1.1c0.2,0.2,0.4,0.4,0.7,0.5c0.4,0.2,0.8,0.2,1.2,0.1c0.4-0.1,0.8-0.3,1.1-0.6l6.2-6.2c0.3-0.3,0.6-0.8,0.8-1.2c0.3-0.6,0.3-1.4,0.2-2c-0.1-0.7-0.5-1.3-1-1.8c-0.3-0.3-0.8-0.6-1.2-0.8c-0.6-0.3-1.4-0.3-2-0.2C10,0.2,9.3,0.5,8.8,1L2.5,7.4C2,7.9,1.6,8.5,1.4,9.1C1,10,0.9,11,1.1,11.9c0.2,1,0.6,1.9,1.4,2.6C3,15,3.5,15.4,4.1,15.6C5.1,16,6,16.1,7,15.9c1-0.2,1.9-0.6,2.6-1.4l5.7-5.7L14.4,7.9z"/></svg>');
  margin-left: -0.5em;
  width: 16px;
  height: 100%;
  vertical-align: middle;
}

.sp-form-file-button:focus { outline:0; }

.sp-from-file-default-drag-drop-area {
  color:#333333;
  background-color:var(--input-color);
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  text-align:center;
  border-radius: var(--input-radius);
}

.sp-from-file-ondraghover-drag-drop-area {
  color:#333333;
  background-color:#dddddd;
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  text-align:center;
  border-radius: var(--input-radius);
}

.sp-from-file-ondragleave-drag-drop-area {
  color:#333333;
  background-color:#dddddd;
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  border-radius: var(--input-radius);
}

.sp-from-file-ondrop-drag-drop-area {
  color:#333333;
  background-color:var(--input-color);
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  border-radius: var(--input-radius);
}

.sp-form-embedded>.sp-file-info:last-child { padding-bottom:0; }

.sp-file-info {
  padding-top:1em;
  padding-bottom:1em;
  line-height:1.5;
}

.sp-file-info>div { width:100%; }

.main-text {
  font-size:1em;
  font-weight:bold;
}

[class^="sp-step-flow-f"] {
  margin:3em 0 2em;
  }

[class^="sp-step-flow-f"]>.large-setting {
  display:flex;
  justify-content: center;
}

[class^="sp-step-flow-f"]>.small-setting { display:none; }

[class^="sp-step-flow-f"]>.large-setting,
[class^="sp-step-flow-f"]>.small-setting {
  text-align: center;
  margin: 0 auto;
  padding: 0 20px;
}

[class^="sp-step-flow-f"]>.large-setting>.step,
[class^="sp-step-flow-f"]>.small-setting>.step {
  word-wrap: break-word;
  min-width: 0;
  text-align:center;
}

[class^="sp-step-flow-f"]>.large-setting>.step {
  flex: 1;
  margin-right:36px;
  font-size:16px;
}

[class^="sp-step-flow-f"]>.small-setting>.step {
  font-size:14px;
}

[class^="sp-step-flow-f"]>.large-setting>.step:last-child,
[class^="sp-step-flow-f"]>.small-setting>.step:last-child {
  margin-right: 0;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span,
[class^="sp-step-flow-f"]>.small-setting>.step>span {
  overflow: hidden;
  text-overflow: ellipsis;
  position:relative;
  display:block;
  padding-top: 16px;
  white-space:nowrap;
  color:#D3D6DB;
  font-weight:bold;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span::before,
[class^="sp-step-flow-f"]>.small-setting>.step>span::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  width: 100%;
  background: #D3D6DB;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span::before {
  height: 6px;
  border-radius: 6px;
}

[class^="sp-step-flow-f"]>.small-setting>.step>span::before {
  height: 4px;
  border-radius: 4px;
}

[class^="sp-step-flow-f"]>.large-setting>.step.active>span,
[class^="sp-step-flow-f"]>.small-setting>.step.active>span { color:var(--main-color); }

[class^="sp-step-flow-f"]>.large-setting>.step.active>span::before,
[class^="sp-step-flow-f"]>.small-setting>.step.active>span::before { background:var(--main-color); }

@media (max-width: 765px) {
  [class^="sp-step-flow-f"]>.large-setting { display:none; }

  [class^="sp-step-flow-f"]>.small-setting {
    display:flex;
    justify-content: center;
    counter-reset:step;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step>span { display: none; }

  [class^="sp-step-flow-f"]>.small-setting>.step {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    background: none;
    color: #ffffff;
    font-weight: bold;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step::before {
    counter-increment: step 1;
    content: counter(step, decimal);
    width:24px;
    height:24px;
    background: var(--main-color);
    border-radius: 50%;
    font-size: 12px;
    line-height: 24px;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step:not(:last-child) { flex-grow: 1; }

  [class^="sp-step-flow-f"]>.small-setting>.step:not(:last-child)::after {
    content: "";
    width: calc(100% - 24px);
    height:2px;
    background: var(--main-color);
    vertical-align: middle;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step.active::after,
  [class^="sp-step-flow-f"]>.small-setting>.step.active~.step::before,
  [class^="sp-step-flow-f"]>.small-setting>.step.active~.step::after { background:#D3D6DB; }
}

HTMLの「"f0xx"」には、内覧予約DB内の対応するフィールドIDを記載ください。
HTMLの物件名の「record[xx]」には参照_物件マスタDBフィールド、「record[xx][xx]」には参照_物件マスタDBフィールド、物件マスタDBの物件名フィールドのIDを記載ください。
HTMLの参照_物件マスタの「record[xx]」には、物件マスタDB_物件IDのフィールドIDを記載ください。

手順１０：案内後アンケート回答ページに登録フォームのブロックを埋め込み

デモで設定しているソースコードは下記となります。

HTML

<!-- ヘッダ -->
<sp:block name="fcb0xxxx"></sp:block>
<!-- 案内後アンケートフォーム -->
<h2>案内後アンケート</h2>
<sp:block name="ifb0xxxx"></sp:block>
<!-- フッター -->
<sp:block name="fcb0xxxx"></sp:block>

CSS

h2 {
    text-align: center;
}

h1 {
    text-align: center;
}

.reserve_attention {
    display: block;
    text-align: center;
    margin: 0.5rem 0;
}

.url-button {
    width: auto;
    /* font-size:0.875rem; */
    padding:0.5rem 0;
    text-align:center;
    text-decoration:none;
    flex: 1;

    color: #ffffff;
    background-color: #0D60DB;
    border: 1.0px solid #0D60DB;
    border-radius: calc(12px / 1.2);
}

.button-l {
    padding:0.5rem 6%;
    margin-right: 0.5rem;
}

.button-r {
    padding:0.5rem 5%;
    margin-left: 0.5rem;
}

.button {
    padding:0.5rem 5%;
}

.sp-url-button {
    text-align: center;
    width: auto;
    margin: 1.5rem auto;
    /* border: 1px solid #dddddd; */
}

HTMLの「"fcb0xxxx"」、「"ifb0xxxx"」には、それぞれヘッダ、案内後アンケートフォームブロック、フッターのIDを記載ください。

手順１１：検討状況アンケートページを作成

内覧予約認証エリアの「＋」ボタンから新規ページを作成します。
検討状況アンケートページはクリックログインページのため、認証は「あり」、クリックログインは「許可する」で設定します。
設定方法は、ソース設定を選択します。

手順１２：検討状況アンケートページに埋め込む検討状況アンケート回答フォームを作成

検討状況アンケート回答フォームは、更新フォームブロックで作成します。
更新フォームブロックは、更新対象DBは内覧予約DB、更新対象レコードは認証レコード、設定方法はソース設定を選択します。
HTML

<div class="sp-form-container">
  <div class="sp-step-flow-f24431">
    <div class="large-setting arrow sp-clearfix">
      <div class="step active" title="入力">
        <span>入力</span>
      </div>
      <div class="step" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
    <div class="small-setting arrow sp-clearfix">
      <div class="step active" title="入力">
        <span>入力</span>
      </div>
      <div class="step" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
  </div>
  <div class="sp-form-item sp-form-html" th:inline="none"><p><span style="font-size: 18pt;">検討状況アンケート回答フォーム</span></p></div>
  <div class="sp-form-item sp-form-html" th:inline="none">先日内覧いただきました物件の検討状況をご入力の上、「確認画面へ」ボタンを押してください<br>
  「検討理由」には検討をしていただいております理由を、<br>「検討備考欄」には知りたい情報や求めるプランなどをご入力ください</div>
  <!--/* 検討状況(consideStatus) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <div class="sp-form-dropdown">
        <select class="sp-form-control" th:name="${fields['f0xx'].name}">
          <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
          <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
        </select>
        <span class="sp-form-dropdown-icon"></span>
        </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* 検討理由(consideReason) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <textarea class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:text="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[xx]}"></textarea>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* 検討備考欄(consideRemarks) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <textarea class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:text="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[xx]}"></textarea>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <div class="sp-form-item sp-form-interaction">
    <button class="sp-form-prev-button" type="submit" name="action" value="previous" th:if="!${step.isFirst}" th:text="${step.prevButtonLabel}">Prev</button>
    <button class="sp-form-next-button" type="submit" name="action" value="next" th:text="${step.nextButtonLabel}">Next</button>
  </div>
</div>

HTML(確認ステップ)

<div class="sp-form-container">
    <div class="sp-step-flow-f24431">
    <div class="large-setting arrow sp-clearfix">
      <div class="step" title="入力">
        <span>入力</span>
      </div>
      <div class="step active" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
    <div class="small-setting arrow sp-clearfix">
      <div class="step" title="入力">
        <span>入力</span>
      </div>
      <div class="step active" title="確認">
        <span>確認 active</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
  </div>
  <div class="sp-form-item sp-form-html" th:inline="none"><p><span style="font-size: 18pt;">検討状況アンケート回答フォーム</span></p></div>
  <div class="sp-form-item sp-form-html" th:inline="none">内容をご確認の上、よろしければ「アンケート回答」ボタンを押してください。</div>
  <!--/* 検討状況(consideStatus) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded" th:text="${values['f0xx']?.label}">Item</span>
    </div>
  </div>
  <!--/* 検討理由(consideReason) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded">
        <th:block th:each="str, stat : ${values['f0xx']?.lines}">
          <th:block th:text="${str}">
            Example
          </th:block>
          <br th:unless="${stat.last}">
        </th:block>
      </span>
    </div>
  </div>
  <!--/* 検討備考欄(consideRemarks) */-->
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label" th:text="${fields['f0xx'].label}">
      Label
    </div>
    <div class="sp-form-data">
      <span class="sp-form-embedded">
        <th:block th:each="str, stat : ${values['f0xx']?.lines}">
          <th:block th:text="${str}">
            Example
          </th:block>
          <br th:unless="${stat.last}">
        </th:block>
      </span>
    </div>
  </div>
  <div class="sp-form-item sp-form-interaction">
    <button class="sp-form-prev-button" type="submit" name="action" value="previous" th:if="!${step.isFirst}" th:text="${step.prevButtonLabel}">Prev</button>
    <button class="sp-form-next-button" type="submit" name="action" value="next" th:text="${step.nextButtonLabel}">Next</button>
  </div>
</div>

CSS

:root {
  /*=============================
	カスタムプロパティ
  ==============================*/
  --base-color: #FFFFFF; /* フォームブロックの背景色 */
  --main-color: #0D60DB; /* メインカラー */
  --accent-color: #B8250F; /* アクセントカラー */
  --input-color: #F5F7FA; /* 入力欄の背景色 */
  --input-border-color: #D3D6DB; /* 入力欄の枠線の色 */
  --input-radius: 12px; /* 入力欄の角の丸さ */
  --transition: 0.1s; /* アニメーション時間 */

  /*------ 合計100%になるよう調整 -------*/
  --label-width: 25%; /* ラベル部分の幅 */
  --data-width: 75%; /* データ部分の幅 */
}

.sp-form-container {
  font-size:16px;
  padding:1em;
  box-sizing:border-box;
  max-width: 960px;
  color:#505050;
  background-color:var(--base-color);
  border:1px solid #E1E5EB;
  border-radius:var(--input-radius);
}

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding:0.5em 1em;
}

.sp-form-field,
.sp-form-group {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-form-field>.sp-form-label,
.sp-form-group>.sp-form-label {
  font-size:1.15em;
  font-weight:bold;
  padding:.25em 0;
  word-break:break-all;
  box-sizing:border-box;
  color:#333333;
}

.sp-form-group-item>.sp-form-label {
  word-break:break-all;
  display:inline-block;
  margin-bottom:.2em;
}

.sp-form-field>.sp-form-data,
.sp-form-group>.sp-form-data {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  word-break:break-all;
  padding:0.25em 0;
  box-sizing:border-box;
}

.sp-form-group-item>.sp-form-data {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-form-required {
  display:inline-block;
  margin:0 .5em;
  padding: 3px 6px;
  background:var(--accent-color);
  color:#ffffff;
  line-height:1;
  border-radius:.25em;
  font-size:0.7em;
  font-weight: bold;
  vertical-align: middle;
}

.sp-form-group-item:not(:last-child) { margin-bottom:.5em; }

.sp-form-noted {
  font-size:.8em;
  color:#808080;
  word-break:break-all;
  margin-top:.5em;
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-error {
  font-size:.8em;
  color:var(--accent-color);
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-control {
  -moz-appearance:none;
  -webkit-appearance:none;
  -ms-progress-appearance:none;
  appearance:none;
  font-family:inherit;
  font-size:1em;
  line-height:1.5;
  padding:.3em .7em;
  padding-left:clamp(12px, calc(var(--input-radius) - 2px), 24px);
  background:var(--input-color);
  color:#333333;
  box-sizing:border-box;
  width:100%;
  height:48px;
  margin-bottom:.3em;
  border:none;
  outline:none;
  border-radius:var(--input-radius);
  box-shadow:0 0 0 0.5px var(--input-border-color);
}
.sp-form-control:focus {
  box-shadow:0 0 0 2px var(--main-color);
}
.sp-form-control[type="number"] {
  height: 36px;
}

.sp-form-control:placeholder-shown { color:#aaa; }

.sp-form-control::placeholder { color:#aaa; }

.sp-form-control::-ms-input-placeholder { color:#aaa; }

.sp-form-control:-ms-input-placeholder { color:#aaa; }

.sp-form-control:-moz-placeholder { color:#aaa; }

textarea.sp-form-control {
  resize:vertical;
  padding-top:clamp(6px, calc(var(--input-radius) / 2), 18px);
  height:calc(1.5em * 5);
}

select.sp-form-control,
option.sp-form-control {
  -moz-appearance:none;
  -webkit-appearance:none;
  -ms-progress-appearance:none;
  appearance:none;
  padding-right:1.5em;
}

.sp-form-control>option { background:#FFFFFF;}

select.sp-form-control::-ms-expand { display:none; }

.sp-form-phone .sp-form-control { max-width:20em; }

.sp-form-phone>*:not(:only-child) { margin-right:.5rem; }

.sp-form-dropdown { position:relative; }

.sp-form-dropdown-icon {
  display:block;
  position:absolute;
  top:1.3em;
  right:1em;
  line-height:0;
  pointer-events:none;
}

.sp-form-dropdown-icon:after {
  content:"";
  display:block;
  border-top:0.333em solid #888;
  border-right:.333em solid transparent;
  border-left:.333em solid transparent;
}

.sp-form-selection {
  display:block;
  cursor: pointer;
  margin-bottom:.3em;
  padding:.25em .75em .35em;
  background:var(--input-color);
  border-radius: var(--input-radius);
  box-shadow:0 0 0 0.5px var(--input-border-color) ;
}

.sp-form-selection-label {
  display: inline-block;
  position: relative;
  vertical-align:middle;
  padding: 4px 0;
}

.sp-form-datetimes,
.sp-form-date,
.sp-form-time,
.sp-form-timezone {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-form-datetime,
.sp-form-date,
.sp-form-time,
.sp-form-timezone {
  margin-right:.5rem;
  -ms-flex-wrap:nowrap;
  flex-wrap:nowrap;
}

.sp-form-datetime { max-width:20em; }

.sp-form-phone {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-form-date-separator {
  width:1em;
  margin-bottom: .3em;
  text-align:center;
  -ms-flex-negative:1;
  flex-shrink:0;
}

.sp-form-number { max-width:20em; }

.sp-form-email-reenter,
.sp-form-password-reenter {
  font-size:.9em;
  margin-bottom:.2em;
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-html p { margin:0; }

.sp-form-interaction {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-top:1em;
}

.sp-form-prev-button {
  color:#333333;
  background-color:var(--base-color);
  border:2.0px solid #666666;
}

.sp-form-next-button,
.sp-form-login-button {
  color:#ffffff;
  background-color:var(--main-color);
  border:none;
}

.sp-form-field .sp-form-embedded { padding-left:.25em; }

.sp-form-selection>input[type="radio"],
.sp-form-selection>input[type="checkbox"] {
  display: none;
  vertical-align:middle;
  margin-left:0;
}

.sp-form-selection>input[type="radio"]+.sp-form-selection-label::before,
.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
  display: inline-block;
  content:"";
  position: relative;
  box-sizing: border-box;
  top: 4px;
  margin-right: 6px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border:10px solid #ffffff;
  box-shadow: 0 0 0 0.5px var(--input-border-color);
  transition: var(--transition);
}

.sp-form-selection>input[type="radio"]+.sp-form-selection-label::before {
  border-radius: 50%;
}

.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before {
  border-radius: min(var(--input-radius), 4px);
}

.sp-form-selection>input[type="radio"]:checked+.sp-form-selection-label::before{
  background: var(--main-color);
  border:4px solid #ffffff;
}
.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::after{
  border-right: 3px solid var(--main-color);
  border-bottom: 3px solid var(--main-color);
  content: '';
  display: inline-block;
  width: 6px;
  height: 10px;
  left: 9px;
  margin-top: -7px;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  opacity: 0;
  transition: var(--transition);
}

.sp-form-selection>input[type="checkbox"]:checked+.sp-form-selection-label::after{
  left: 6px;
  opacity: 1;
}

.sp-form-date>input,
.sp-form-time>input { max-width:7em; }

.sp-form-date>input[type="date"]{
  min-width: 140px;
  max-width: none;
}
.sp-form-time>input[type="time"] {
  min-width: 92px;
  max-width: none;
}

.sp-form-interaction>button {
  -webkit-box-flex:1;
  -ms-flex-positive:1;
  flex-grow:1;
  cursor:pointer;
  font-size:1em;
  font-weight:bold;
  line-height:1.5;
  margin:.5rem;
  padding:.75rem 0;
  text-align:center;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  white-space:nowrap;
  border-radius:var(--input-radius);
}

@media (min-width:768px) {
  .sp-form-container {
    font-size:initial;
    padding:3em;
    margin:2em auto;
  }

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding-bottom:0.5em;
}

  .sp-form-field,
  .sp-form-group {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row nowrap;
    flex-flow:row nowrap;
  }

  .sp-form-field>.sp-form-label,
  .sp-form-group>.sp-form-label {
    font-size:1em;
    width:var(--label-width);
    padding:.5em;
  }

  .sp-form-group .sp-form-group-item>.sp-form-label {
    font-size:.9em;
    padding-right:.5em;
  }

  .sp-form-field>.sp-form-data,
  .sp-form-group>.sp-form-data {
    font-size:1em;
    width:var(--data-width);
    padding:.5em;
  }

  .sp-form-group>.sp-form-data {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }

  .sp-form-group.sp-form-group-vertical>.sp-form-data {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-form-required {
    font-size:0.8em;
  }

  .sp-form-group-item { padding:.25em; }

  .sp-form-group-item:not(:last-child) { margin-bottom:0; }

  .sp-form-control { font-size:.9em; }

  .sp-form-selection {
    font-size:.9em;
    margin:0 .5em 0 0;
    padding-right:1em;
    background:none;
    box-shadow:none;
  }
  .sp-form-selection-vertical>.sp-form-selection {
    margin:0 auto 0 0;
    padding-right: 4em;
  }

  .sp-form-selection-vertical {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-form-selection-horizontal {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }

  .sp-form-interaction {
    justify-content:center;
    margin-top:2em;
  }

  .sp-form-embedded { font-size:.9em; }

  .sp-form-group-item .sp-form-embedded { padding-right:5em; }

  .sp-form-selection>input[type="radio"]+.sp-form-selection-label::before,
  .sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
    background: var(--input-color);
    border:10px solid var(--input-color);
  }

  .sp-form-selection>input[type="radio"]:hover+.sp-form-selection-label::before,
  .sp-form-selection>input[type="checkbox"]:hover+.sp-form-selection-label::before{
    border:10px solid #dddddd;
  }

  .sp-form-selection>input[type="radio"]:checked+.sp-form-selection-label::before{
    border:4px solid var(--input-color);
  }

  .sp-form-date>input[type="date"]{
    min-width: unset;
  }
  .sp-form-time>input[type="time"] {
    min-width: unset;
  }

  .sp-form-interaction>button {
    -webkit-box-flex:0;
    -ms-flex-positive:0;
    flex-grow:0;
    padding:.75rem 5em;
  }
}

.sp-form-recaptcha {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:start;
  -ms-flex-pack:start;
  justify-content:flex-start;
}

.sp-form-recaptcha-right {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end;
  -ms-flex-pack:end;
  justify-content:flex-end;
}

.sp-form-recaptcha-center {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}

.sp-form-file-button {
  padding:.8em 2em;
  font-weight: bold;
  cursor:pointer;
  color:#666666;
  background-color:#f6f6f6;
  border:none;
  border: solid 2px #a0a0a0;
  border-radius:var(--input-radius);
  transition: var(--transition);
  align-items: center;
  justify-content: center;
}
.sp-form-file-button::before{
  display: inline-block;
  content: url('data:image/svg+xml;utf-8,<svg fill="%23666" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.4,7.9l-5.7,5.7c-0.4,0.4-0.8,0.6-1.2,0.8c-0.7,0.3-1.4,0.3-2.1,0.2c-0.7-0.1-1.4-0.5-1.9-1c-0.4-0.4-0.6-0.8-0.8-1.2c-0.3-0.7-0.3-1.4-0.2-2.1c0.1-0.7,0.5-1.4,1-1.9L9.7,2c0.2-0.2,0.5-0.4,0.8-0.5c0.4-0.2,0.9-0.2,1.3-0.1C12.2,1.4,12.6,1.6,13,2c0.2,0.2,0.4,0.5,0.5,0.8c0.2,0.4,0.2,0.9,0.1,1.3c-0.1,0.4-0.3,0.8-0.6,1.2l-6.2,6.2c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.1-0.5,0c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.1-0.3,0-0.5c0-0.2,0.1-0.3,0.2-0.4l5.5-5.5l-0.9-0.9L4.7,9.3C4.5,9.5,4.4,9.7,4.3,10c-0.2,0.4-0.2,0.8-0.1,1.2c0.1,0.4,0.3,0.8,0.6,1.1c0.2,0.2,0.4,0.4,0.7,0.5c0.4,0.2,0.8,0.2,1.2,0.1c0.4-0.1,0.8-0.3,1.1-0.6l6.2-6.2c0.3-0.3,0.6-0.8,0.8-1.2c0.3-0.6,0.3-1.4,0.2-2c-0.1-0.7-0.5-1.3-1-1.8c-0.3-0.3-0.8-0.6-1.2-0.8c-0.6-0.3-1.4-0.3-2-0.2C10,0.2,9.3,0.5,8.8,1L2.5,7.4C2,7.9,1.6,8.5,1.4,9.1C1,10,0.9,11,1.1,11.9c0.2,1,0.6,1.9,1.4,2.6C3,15,3.5,15.4,4.1,15.6C5.1,16,6,16.1,7,15.9c1-0.2,1.9-0.6,2.6-1.4l5.7-5.7L14.4,7.9z"/></svg>');
  margin-left: -0.5em;
  width: 16px;
  height: 100%;
  vertical-align: middle;
}

.sp-form-file-button:focus { outline:0; }

.sp-from-file-default-drag-drop-area {
  color:#333333;
  background-color:var(--input-color);
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  text-align:center;
  border-radius: var(--input-radius);
}

.sp-from-file-ondraghover-drag-drop-area {
  color:#333333;
  background-color:#dddddd;
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  text-align:center;
  border-radius: var(--input-radius);
}

.sp-from-file-ondragleave-drag-drop-area {
  color:#333333;
  background-color:#dddddd;
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  border-radius: var(--input-radius);
}

.sp-from-file-ondrop-drag-drop-area {
  color:#333333;
  background-color:var(--input-color);
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  border-radius: var(--input-radius);
}

.sp-form-embedded>.sp-file-info:last-child { padding-bottom:0; }

.sp-file-info {
  padding-top:1em;
  padding-bottom:1em;
  line-height:1.5;
}

.sp-file-info>div { width:100%; }

.main-text {
  font-size:1em;
  font-weight:bold;
}

[class^="sp-step-flow-f"] {
  margin:3em 0 2em;
  }

[class^="sp-step-flow-f"]>.large-setting {
  display:flex;
  justify-content: center;
}

[class^="sp-step-flow-f"]>.small-setting { display:none; }

[class^="sp-step-flow-f"]>.large-setting,
[class^="sp-step-flow-f"]>.small-setting {
  text-align: center;
  margin: 0 auto;
  padding: 0 20px;
}

[class^="sp-step-flow-f"]>.large-setting>.step,
[class^="sp-step-flow-f"]>.small-setting>.step {
  word-wrap: break-word;
  min-width: 0;
  text-align:center;
}

[class^="sp-step-flow-f"]>.large-setting>.step {
  flex: 1;
  margin-right:36px;
  font-size:16px;
}

[class^="sp-step-flow-f"]>.small-setting>.step {
  font-size:14px;
}

[class^="sp-step-flow-f"]>.large-setting>.step:last-child,
[class^="sp-step-flow-f"]>.small-setting>.step:last-child {
  margin-right: 0;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span,
[class^="sp-step-flow-f"]>.small-setting>.step>span {
  overflow: hidden;
  text-overflow: ellipsis;
  position:relative;
  display:block;
  padding-top: 16px;
  white-space:nowrap;
  color:#D3D6DB;
  font-weight:bold;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span::before,
[class^="sp-step-flow-f"]>.small-setting>.step>span::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  width: 100%;
  background: #D3D6DB;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span::before {
  height: 6px;
  border-radius: 6px;
}

[class^="sp-step-flow-f"]>.small-setting>.step>span::before {
  height: 4px;
  border-radius: 4px;
}

[class^="sp-step-flow-f"]>.large-setting>.step.active>span,
[class^="sp-step-flow-f"]>.small-setting>.step.active>span { color:var(--main-color); }

[class^="sp-step-flow-f"]>.large-setting>.step.active>span::before,
[class^="sp-step-flow-f"]>.small-setting>.step.active>span::before { background:var(--main-color); }

@media (max-width: 765px) {
  [class^="sp-step-flow-f"]>.large-setting { display:none; }

  [class^="sp-step-flow-f"]>.small-setting {
    display:flex;
    justify-content: center;
    counter-reset:step;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step>span { display: none; }

  [class^="sp-step-flow-f"]>.small-setting>.step {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    background: none;
    color: #ffffff;
    font-weight: bold;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step::before {
    counter-increment: step 1;
    content: counter(step, decimal);
    width:24px;
    height:24px;
    background: var(--main-color);
    border-radius: 50%;
    font-size: 12px;
    line-height: 24px;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step:not(:last-child) { flex-grow: 1; }

  [class^="sp-step-flow-f"]>.small-setting>.step:not(:last-child)::after {
    content: "";
    width: calc(100% - 24px);
    height:2px;
    background: var(--main-color);
    vertical-align: middle;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step.active::after,
  [class^="sp-step-flow-f"]>.small-setting>.step.active~.step::before,
  [class^="sp-step-flow-f"]>.small-setting>.step.active~.step::after { background:#D3D6DB; }
}

HTMLの「"f0xx"」、「record[xx]」には、内覧予約DB内の対応するフィールドIDを記載ください。

手順１３：検討状況アンケートページに更新フォームのブロックを埋め込み

デモで設定しているソースコードは下記となります。

HTML

<!-- ヘッダ -->
<sp:block name="fcb0xxxx"></sp:block>
<!-- 検討状況アンケート回答フォーム -->
<h2>検討状況アンケート</h2>
<sp:block name="ufb0xxxx"></sp:block>
<!-- フッター -->
<sp:block name="fcb0xxxx"></sp:block>

CSS

h2 {
    text-align: center;
}

h1 {
    text-align: center;
}

.reserve_attention {
    display: block;
    text-align: center;
    margin: 0.5rem 0;
}

.url-button {
    width: auto;
    /* font-size:0.875rem; */
    padding:0.5rem 0;
    text-align:center;
    text-decoration:none;
    flex: 1;

    color: #ffffff;
    background-color: #0D60DB;
    border: 1.0px solid #0D60DB;
    border-radius: calc(12px / 1.2);
}

.button-l {
    padding:0.5rem 6%;
    margin-right: 0.5rem;
}

.button-r {
    padding:0.5rem 5%;
    margin-left: 0.5rem;
}

.button {
    padding:0.5rem 5%;
}

.sp-url-button {
    text-align: center;
    width: auto;
    margin: 1.5rem auto;
    /* border: 1px solid #dddddd; */
}

HTMLの「"fcb0xxxx"」、「"ufbxxxx"」には、それぞれしたヘッダ、検討状況アンケート回答フォーム、フッターのIDを記載ください。

資料請求認証エリアと資料請求認証エリア内ページの作成

手順１：認証エリアの作成

認証エリアから認証用のページを作成します。
認証DBは「資料請求DB」、IDフィールドは「請求ID」、認証フィールドは「認証フィールドを使用しない」を選択してください。

手順２：資料ダウンロードページを作成

手順１で作成した認証エリアの「＋」ボタンから新規ページを作成します。
資料ダウンロードページはクリックログインページのため、認証は「あり」、クリックログインは「許可する」で設定します。
設定方法は、ソース設定を選択します。

手順３：資料ダウンロードページに埋め込むダウンロード資料一覧を作成

資料ダウンロードページ内に物件に紐づく資料の情報を表示します。
手順２で作成したページの BODY から「＋」ボタンを押下し、レコードリストブロックを作成します。
物件資料情報を表示するためのレコード公開範囲は、「内覧予約認証エリアと公開ページの作成」の手順６で設定済みです。
レコードアイテムブロックは使用しないため、「作成しない」に設定ください。
設定方法は、ソース設定を選択します。
公開するレコードを絞りたいので、レコードリストブロックからリスト設定を設定します。

レコードリストブロックのリスト設定は下記のように設定ください。

フィルタ	初期ソート	初期表示件数
なし	(ID)　降順	20件

HTML

<div class="sp-record-list-container">
  <!-- <div class="sp-record-list-parts sp-html-parts" th:inline="none"><p><span style="font-size: 18pt;">内覧予約資料ダウンロード一覧</span></p></div> -->
  <div style="text-align: center;">「物件資料」のファイルをクリックし、ダウンロードをお願いいたします</div>

  <div class="sp-record-list-parts sp-record-list-pagination">
    <div class="sp-record-list-pagination-left"></div>
    <div class="sp-record-list-pagination-center"></div>
    <div class="sp-record-list-pagination-right"></div>
  </div>
  <div class="sp-record-list-parts">
    <table class="sp-record-list-table sp-table-hover">
      <thead>
        <tr>
          <!--/* 物件名 (propertyName) */-->
          <th scope="col">
            <a th:class="${pagination.isSorted('f0xx')} ? |sp-${pagination.getSortDirection('f0xx')}-sorted|" th:href="${pagination.getLinkWithSort('f0xx')}">
              <span th:text="${fields['f0xx'].label}">Label</span>
              <span class="sp-sorting-desc"><i class="fa fa-angle-down"></i></span>
              <span class="sp-sorting-asc"><i class="fa fa-angle-up"></i></span>
            </a>
          </th>
          <!--/* 広さ (spaciousness) */-->
          <th scope="col">
            <span th:text="${fields['f0xx'].label}">Label</span>
          </th>
          <!--/* 価格 (price) */-->
          <th scope="col">
            <span th:text="${fields['f0xx'].label}">Label</span>
          </th>
          <!--/* 備考・詳細 (remarksDetail) */-->
          <th scope="col">
            <span th:text="${fields['f0xx'].label}">Label</span>
          </th>
          <!--/* 物件資料 (propertyData) */-->
          <th scope="col">
            <span th:text="${fields['f0xx'].label}">Label</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr th:each="record, stat : ${pageRecords}">
          <!--/* 物件名 (propertyName) */-->
          <sp:record-data-field name="f0xx"></sp:record-data-field>
          <td>
            <span th:text="${record['f0xx']}">Example</span>
          </td>
          <!--/* 広さ (spaciousness) */-->
          <sp:record-data-field name="f0xx"></sp:record-data-field>
          <td>
            <span th:text="${record['f0xx']}">Example</span>
          </td>
          <!--/* 価格 (price) */-->
          <sp:record-data-field name="f0xx"></sp:record-data-field>
          <td>
            <span th:text="${record['f0xx']}">Example</span>
          </td>
          <!--/* 備考・詳細 (remarksDetail) */-->
          <sp:record-data-field name="f0xx"></sp:record-data-field>
          <td>
            <span th:text="${record['f0xx']}">Example</span>
          </td>
          <!--/* 物件資料 (propertyData) */-->
          <sp:record-data-field name="f0xx"></sp:record-data-field>
          <td th:with="files=${record['f0xx']}" th:remove="${files == null ? 'body' : 'none'}">
            <th:block th:if="${files.size == 1}" th:with="file=${files[0]}">
              <a class="sp-form-file-bold-link" th:title="|${file.fileName} (${file.fileSize})|" th:text="${file.fileName}" th:href="${file.fileUrl}"></a>
              <span class="sp-form-file-text-label" th:text="|(${file.fileSize})|">Example</span>
            </th:block>
            <span class="sp-form-file-text-label" th:if="${files.size gt 1}" th:text="|${files.size} files|">Example</span>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="sp-record-list-no-records" th:if="${recordList.totalRecordCount == 0}">
      表示できるデータがありません
    </div>
  </div>
  <div class="sp-record-list-parts sp-record-list-pagination">
    <div class="sp-record-list-pagination-left"></div>
    <div class="sp-record-list-pagination-center">
      <ul class="sp-page-navs" th:with="pageNavItemSize = 5" th:if="${recordList.totalRecordCount != 0}">
        <li class="sp-page-nav-item" th:if="!${pagination.isFirstPage}">
          <a th:href="${pagination.firstPageLink}">&lt;&lt;</a>
        </li>
        <li class="sp-page-nav-item" th:if="!${pagination.isFirstPage}">
          <a th:href="${pagination.prevPageLink}">&lt;</a>
        </li>
        <li class="sp-page-nav-item" th:each="item : ${pagination.getPrevPageNavItems(pageNavItemSize)}">
          <a th:text="${item.pageNum}" th:href="${item.link}">Page Number</a>
        </li>
        <li class="sp-page-nav-item sp-page-nav-current">
          <span th:text="${pagination.currentPageNum}">Page Number</span>
        </li>
        <li class="sp-page-nav-item" th:each="item : ${pagination.getNextPageNavItems(pageNavItemSize)}">
          <a th:text="${item.pageNum}" th:href="${item.link}">Page Number</a>
        </li>
        <li class="sp-page-nav-more" th:if="${pagination.showEllipsis}">...</li>
        <li class="sp-page-nav-item" th:if="!${pagination.isLastPage}">
          <a th:href="${pagination.nextPageLink}">&gt;</a>
        </li>
        <li class="sp-page-nav-item" th:if="!${pagination.isLastPage} and !${recordList.recordCountLimitExceeded}">
          <a th:href="${pagination.lastPageLink}">&gt;&gt;</a>
        </li>
      </ul>
    </div>
    <div class="sp-record-list-pagination-right"></div>
  </div>
</div>

CSS

:root {
  /*=============================
	カスタムプロパティ
  ==============================*/
  --background-color: #FFFFFF; /* ページの背景色 */
  --main-color: #0D60DB; /* メインカラー */
  --table-border: 1.5px solid #EBEBEB; /* レコードリストの枠線（外周） */
  --table-shadow: 0 2px 5px rgba(0,0,0,0.2); /* レコードリストの影 */
  --mobile-table-width: 200%; /* スマホ表示時のレコードリストの横幅 */
  --th-color:#FFFFFF; /* ヘッダ行の背景色 */
  --th-txtcolor:#333333;/* ヘッダ行の文字色 */
  --th-col-border: none; /* ヘッダ行の縦線 */
  --th-bottom-border: 1.5px solid #EBEBEB; /* ヘッダ行の下線 */
  --data-color: #FFFFFF; /* データ行の背景色 */
  --even-color: #FFFFFF; /* データ行の背景色（偶数行） */
  --hover-color: #E9F6FF; /* データ行の背景色（マウスオーバー時） */
  --data-padding: 16px; /* データ行の余白（上下） */
  --link-color: #4286F4; /* リンク列の文字色 */
  --row-border: 1.5px solid #EBEBEB; /* リストの横線 */
  --col-border: none; /* リストの縦線 */
  --border-radius: 12px; /* 角の丸さ */
  word-break: break-all;

  /*------ 項目ごとの横幅を固定したい場合は合計100%になるよう調整 -------*/
  --col01-width: ; /* 項目1 */
  --col02-width: ; /* 項目2 */
  --col03-width: ; /* 項目3 */
  --col04-width: ; /* 項目4 */
  --col05-width: ; /* 項目5 */
  --col06-width: ; /* 項目6 */
  --col07-width: ; /* 項目7 */
  --col08-width: ; /* 項目8 */
  --col09-width: ; /* 項目9 */
  --col10-width: ; /* 項目10 */
}

body{
  background: var(--background-color);
}

.sp-record-list-container {
  color:#333333;
  width: clamp(600px, 80%, 1500px);
  margin:0 auto;
}

.sp-record-list-container .sp-html-parts p { margin:0; }

.sp-record-list-container .sp-record-list-parts {
  margin: 0 1rem .5rem;
}

.sp-record-list-container .sp-record-list-table {
  line-height:1.15;
  border-collapse:collapse;
  width:100%;
  height: 100%;
  margin-bottom:1rem;
  color:#333333;
  border-radius: var(--border-radius);
  border: var(--table-border);
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: var(--table-shadow);
  overflow: hidden;
}

.sp-record-list-container .sp-record-list-table caption {
  padding-top:0.75rem;
  padding-bottom:0.75rem;
  color:#6c757d;
  text-align:left;
  caption-side:bottom;
}

.sp-record-list-container .sp-record-list-table a { text-decoration:none; }

.sp-record-list-container .sp-record-list-table a:hover { text-decoration:underline; }

.sp-record-list-container .sp-record-list-table th,
.sp-record-list-container .sp-record-list-table td {
  vertical-align:top;
  border-top:var(--row-border);
}

.sp-record-list-container .sp-record-list-table td:not(:last-child) {
  border-right: var(--col-border);
}

.sp-record-list-container .sp-record-list-table th {
  text-align:inherit;
  padding: 1.0rem 0.75rem;
}

.sp-record-list-container .sp-record-list-table td {
  padding: var(--data-padding) 0.75rem;
}

.sp-record-list-container .sp-record-list-table thead th {
  background: var(--th-color);
  color:var(--th-txtcolor);
  padding: calc(var(--data-padding) * 1.2) 0.75rem;
  font-weight:bold;
  vertical-align:top;
  border-bottom:var(--th-bottom-border);
  text-align:left;
}

.sp-record-list-container .sp-record-list-table thead th:not(:last-child){ border-right: var(--th-col-border); }

.sp-record-list-container .sp-record-list-table thead th:nth-child(1) { width: var(--col01-width);}
.sp-record-list-container .sp-record-list-table thead th:nth-child(2) { width: var(--col02-width);}
.sp-record-list-container .sp-record-list-table thead th:nth-child(3) { width: var(--col03-width);}
.sp-record-list-container .sp-record-list-table thead th:nth-child(4) { width: var(--col04-width);}
.sp-record-list-container .sp-record-list-table thead th:nth-child(5) { width: var(--col05-width);}
.sp-record-list-container .sp-record-list-table thead th:nth-child(6) { width: var(--col06-width);}
.sp-record-list-container .sp-record-list-table thead th:nth-child(7) { width: var(--col07-width);}
.sp-record-list-container .sp-record-list-table thead th:nth-child(8) { width: var(--col08-width);}
.sp-record-list-container .sp-record-list-table thead th:nth-child(9) { width: var(--col09-width);}
.sp-record-list-container .sp-record-list-table thead th:nth-child(10) { width: var(--col10-width);}

.sp-record-list-container .sp-record-list-table thead th.sp-nowrap { white-space:nowrap; }

.sp-record-list-container .sp-record-list-table thead th.sp-nowrap-truncate { white-space:nowrap; }

.sp-record-list-container .sp-record-list-table thead th.sp-nowrap-truncate a>span:first-child {
  display:inline-block;
  vertical-align:middle;
  max-width:12rem;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sp-record-list-container .sp-record-list-table thead th a {
  color:inherit;
  text-decoration:none;
}

.sp-record-list-container .sp-record-list-table thead th a .sp-sorting-asc,
.sp-record-list-container .sp-record-list-table thead th a .sp-sorting-desc { color: var(--th-txtcolor); }

.sp-record-list-container .sp-record-list-table thead th a .sp-sorting-asc .fa,
.sp-record-list-container .sp-record-list-table thead th a .sp-sorting-desc .fa { font-weight:bold; }

.sp-record-list-container .sp-record-list-table thead th a .sp-sorting-desc { visibility:hidden; }

.sp-record-list-container .sp-record-list-table thead th a .sp-sorting-asc { display:none; }

.sp-record-list-container .sp-record-list-table thead th a.sp-desc-sorted .sp-sorting-desc { visibility:visible; }

.sp-record-list-container .sp-record-list-table thead th a.sp-asc-sorted .sp-sorting-asc { display:inline; }

.sp-record-list-container .sp-record-list-table thead th a.sp-asc-sorted .sp-sorting-desc { display:none; }

.sp-record-list-container .sp-record-list-table thead th a:hover {
  color:#333333;
  text-decoration:none;
}

.sp-record-list-container .sp-record-list-table thead th a:hover:not(.sp-sorted) .sp-sorting-desc { visibility:visible; }

.sp-record-list-container .sp-record-list-table tbody+tbody { border-top:2px solid #dddddd; }

.sp-record-list-container .sp-record-list-table tbody tr td{
  transition: .1s;
}

.sp-record-list-container .sp-record-list-table tbody tr:hover td{
  background:var(--hover-color);
}

.sp-record-list-container .sp-record-list-table tbody tr{
  background: var(--data-color);
}

.sp-record-list-container .sp-record-list-table tbody tr:nth-child(even){
  background: var(--even-color);
}

.sp-record-list-container .sp-record-list-table tr:first-child th,
.sp-record-list-container .sp-record-list-table tr:first-child td { border-top:0; }

.sp-record-list-container .sp-record-list-table td a:not(.sp-form-file-bold-link) {
  color: var(--link-color);
  font-weight:bold;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: var(--data-padding) 0.75rem;
  margin: calc(-1 * var(--data-padding)) -0.75rem;
  transition: .1s;
}

.sp-record-list-container .sp-record-list-table td span:nth-child(n+2) { margin-left:.1rem; }

.sp-record-list-container .sp-record-list-table a.sp-form-file-bold-link {
  text-decoration:none;
  color: var(--link-color);
  cursor:pointer;
  font-weight:bold;
}

.sp-record-list-container .sp-record-list-table a.sp-form-file-bold-link:hover {
  text-decoration:underline;
}

.sp-form-file-text-label { color:#6c757d; }

.sp-record-list-container .sp-table-sm th,
.sp-record-list-container .sp-table-sm td { padding:0.3rem; }

.sp-record-list-container .sp-table-bordered { border:1px solid #dddddd; }

.sp-record-list-container .sp-table-bordered th,
.sp-record-list-container .sp-table-bordered td { border:1px solid #dddddd; }

.sp-record-list-container .sp-table-bordered thead th,
.sp-record-list-container .sp-table-bordered thead td { border-bottom-width:2px; }

.sp-record-list-container .sp-table-borderless th,
.sp-record-list-container .sp-table-borderless td,
.sp-record-list-container .sp-table-borderless tbody+tbody { border:0; }

.sp-record-list-container .sp-record-list-no-records {
  margin:6.25rem auto;
  text-align:center;
  color:#808080;
}

.sp-record-list-pagination {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-record-list-pagination .sp-record-list-pagination-left,
.sp-record-list-pagination .sp-record-list-pagination-center,
.sp-record-list-pagination .sp-record-list-pagination-right {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-record-list-pagination .sp-record-list-pagination-left>*,
.sp-record-list-pagination .sp-record-list-pagination-center>*,
.sp-record-list-pagination .sp-record-list-pagination-right>* { margin:0 .5rem; }

.sp-record-list-pagination .sp-record-list-pagination-left {
  -webkit-box-pack:start;
  -ms-flex-pack:start;
  justify-content:flex-start;
}

.sp-record-list-pagination .sp-record-list-pagination-center {
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}

.sp-record-list-pagination .sp-record-list-pagination-right {
  -webkit-box-pack:end;
  -ms-flex-pack:end;
  justify-content:flex-end;
}

.sp-record-list-pagination .sp-form-control {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  font-family:inherit;
  font-size:1rem;
  line-height:1.5;
  padding:.3rem .7rem;
  color:#333333;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  width:100%;
  margin: 1px 1px calc(0.2rem + 1px);
  border:1px solid #dddddd;
  border-radius:calc(var(--border-radius) / 1.2);
  box-sizing:border-box;
  outline:none;
}

.sp-record-list-pagination .sp-form-control:focus {
  margin: 0 0 0.2rem;
  border: 2px solid var(--main-color);
}

.sp-record-list-pagination .sp-form-inline .sp-form-control {
  display:inline-block;
  width:auto;
  vertical-align:middle;
}

.sp-record-list-pagination select.sp-form-control,
.sp-record-list-pagination option.sp-form-control {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:1.5rem;
}

.sp-record-list-pagination select.sp-form-control::-ms-expand { display:none; }

.sp-record-list-pagination .sp-form-dropdown { position:relative; }

.sp-record-list-pagination .sp-form-dropdown-inline {
  position:relative;
  display:inline-block;
}

.sp-record-list-pagination .sp-form-dropdown-icon {
  display:block;
  position:absolute;
  top:1rem;
  right:.5rem;
  line-height:0;
  pointer-events:none;
}

.sp-record-list-pagination .sp-form-dropdown-icon:after {
  content:"";
  display:block;
  border-top:.333rem solid #888888;
  border-right:.333rem solid transparent;
  border-left:.333rem solid transparent;
}

.sp-record-list-pagination ul.sp-page-navs {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  padding-left:0;
  list-style:none;
}

.sp-record-list-pagination ul.sp-page-navs li.sp-page-nav-item {
  line-height:1.25rem;
  text-align:center;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  white-space:nowrap;
}

.sp-record-list-pagination ul.sp-page-navs li.sp-page-nav-item a,
.sp-record-list-pagination ul.sp-page-navs li.sp-page-nav-item span {
  display:inline-block;
  margin:0 0.2rem;
  padding:.375rem .75rem;
  border-radius:calc(var(--border-radius) / 1.2);
  color:var(--main-color);
  font-weight: bold;
}

.sp-record-list-pagination ul.sp-page-navs li.sp-page-nav-item a .fa,
.sp-record-list-pagination ul.sp-page-navs li.sp-page-nav-item span .fa {
  font-size:1.125rem;
  width:1rem;
}

.sp-record-list-pagination ul.sp-page-navs li.sp-page-nav-item a { text-decoration:none; }

.sp-record-list-pagination ul.sp-page-navs li.sp-page-nav-item a:hover { background-color:rgba(0,0,0,0.075); }

.sp-record-list-pagination ul.sp-page-navs li.sp-page-nav-item span {
  background-color:rgba(0,0,0,0.075);
  color: var(--main-color);
  font-weight: bold;
}

.sp-record-list-pagination ul.sp-page-navs li.sp-page-nav-item.sp-page-nav-current span {
  background-color:var(--main-color);
  border-color:var(--main-color);
  color:#ffffff;
}

.sp-record-list-pagination ul.sp-page-navs li.sp-page-nav-more {
  line-height:1rem;
  text-align:center;
  margin:0 .2rem;
  padding:.375rem .3rem;
}

@media (max-width: 765px) {
  .sp-record-list-container .sp-record-list-parts {
    margin: 0 0 .5rem;
  }

  .sp-record-list-container [class="sp-record-list-parts"]{
    overflow-x: auto;
  }

  .sp-record-list-container .sp-record-list-table {
    width: var(--mobile-table-width);
    font-size: .9em;
    box-shadow: unset;

  }
}

HTMLの「"f0xx"」には、物件マスタDB内の対応するフィールドIDを記載ください。

手順４：資料ダウンロードページにブロックを埋め込み

手順２で作成した資料ダウンロードページの body にブロックを埋め込みます。
デモで設定しているソースコードは下記となります。

HTML

<!-- ヘッダ -->
<sp:block name="fcb0xxxx"></sp:block>
<!-- 資料ダウンロード一覧 -->
<h2>資料ダウンロード</h2>
<sp:block name="rlb0xxxx"></sp:block>
<!-- フッター -->
<sp:block name="fcb0xxxx"></sp:block>

CSS

h2 {
    text-align: center;
}

h1 {
    text-align: center;
}

.reserve_attention {
    display: block;
    text-align: center;
    margin: 0.5rem 0;
}

.url-button {
    width: auto;
    /* font-size:0.875rem; */
    padding:0.5rem 0;
    text-align:center;
    text-decoration:none;
    flex: 1;

    color: #ffffff;
    background-color: #0D60DB;
    border: 1.0px solid #0D60DB;
    border-radius: calc(12px / 1.2);
}

.button-l {
    padding:0.5rem 6%;
    margin-right: 0.5rem;
}

.button-r {
    padding:0.5rem 5%;
    margin-left: 0.5rem;
}

.button {
    padding:0.5rem 5%;
}

.sp-url-button {
    text-align: center;
    width: auto;
    margin: 1.5rem auto;
    /* border: 1px solid #dddddd; */
}

HTMLの「"fcb0xxxx"」、「"rlb0xxxx"」には、それぞれヘッダ、ダウンロード資料一覧、フッターのIDを記載ください。