blogスタッフブログ
HOME > スタッフブログ > CMS >PowerCMS Xのフォーム実装のコツ

PowerCMS Xのフォーム実装のコツ

PowerCMS XではCMS標準でフォーム作成・管理機能があります。適切に初期設定を行うことで、HTMLやMTMLを書くことなくクライアント自身でフォーム作成が可能になります。

フォーム機能の仕組み

フォーム機能は主に以下4モデルで構成されています。

  • フォームモデル:フォームの各種設定と設問オブジェクトをグループ化し、フォームを作成・管理
  • 設問モデル:フォームの設問(入力項目)を作成・管理
  • 設問タイプモデル:設問(入力項目)の雛形を管理
  • コンタクトモデル:フォームから投稿されたデータを管理

設問モデルのオブジェクトで設問(入力項目)を作成して、フォームモデルのオブジェクトで設問をグループ化することでフォームを作成・管理します。この記事では、主に設問モデルについて取り上げますので、基本的なフォーム作成方法はフォームの作成を参考にしてください。

設問の設定

CMS標準で設問のビューが設定されていますが、通常はデザインを適用する必要があります。サイト内でフォームが一つだけだったり、運用で追加が想定されない場合は設問のビューに直接記述しても良いかもしれませんが、デザイン変更が発生した際に設問のビューを一つずつ変更することになるため、ビューをモジュールにしてインクルードします。

設問のモジュール

以下のモジュールを設問オブジェクトのビューカラムからインクルードします。このモジュールでは設問タイプのIDで分岐して、CMS標準の設問タイプを一つのモジュールとして管理しています。

冒頭の <mt:SetVarTemplate> タグで設問のラベルと入力項目のベースとなるHTMLを定義し、その後に続く <mt:If> タグで設問タイプごとのHTMLを定義しています。

<mt:SetVarTemplate name="__question_template__">
  <div class="p-contactForm__field<mt:If name="$error_name"> -hasError</mt:If>">
    <mt:Ignore>設問のラベル</mt:Ignore>
    <label class="p-contactForm__label" id="label-<mt:Var name="question_basename" escape />" for="question_<mt:Var name="question_basename" escape /><mt:If name="question_questiontype_id" eq="3">_1</mt:If>">
      <mt:Var name="question_label" _eval escape />
      <mt:If name="question_required">
        <span class="p-contactForm__required"><mt:Trans phrase="Required" /></span>
      </mt:If>
    </label>

    <mt:Ignore>設問の説明</mt:Ignore>
    <mt:If name="question_description">
      <p class="p-contactForm__supplement"><mt:Var name="question_description" escape /></p>
    </mt:If>

    <mt:Ignore>設問のエラー</mt:Ignore>
    <mt:Unless name="confirm_ok">
      <mt:If name="$error_name">
        <div class="p-contactForm__error">
          <mt:Var name="$error_name" escape />
        </div>
      </mt:If>
    </mt:Unless>

    <mt:Ignore>設問の入力フィールド</mt:Ignore>
    <mt:Var name="__question_content__" />

    <mt:Ignore>設問のヒント</mt:Ignore>
    <mt:Unless name="confirm_ok">
      <mt:If name="question_hint">
        <div class="p-contactForm__hint">
          <mt:Var name="question_hint" _eval escape />
        </div>
      </mt:If>
    </mt:Unless>
  </div>
</mt:SetVarTemplate>

<mt:Ignore>設問タイプ:テキスト</mt:Ignore>
<mt:If name="question_questiontype_id" eq="1">
  <mt:SetVarBlock name="__question_content__">
    <mt:SetVarBlock name="field_name">request.question_<mt:Var name="question_basename" escape /></mt:SetVarBlock>
    <mt:SetVarBlock name="error_name">question_<mt:Var name="question_basename" escape />_error</mt:SetVarBlock>
    <mt:Var name="$field_name" setvar="question_value" />
    <mt:Unless name="magic_token">
      <mt:Var name="question_default_value" setvar="question_value" />
    </mt:Unless>
    
    <mt:If name="confirm_ok">
      <mt:Var name="question_value" escape />
      <input type="hidden" name="question_<mt:Var name="question_basename" escape />" value="<mt:Var name="question_value" escape />">
    <mt:Else>
      <input type="text" class="p-contactForm__input -text<mt:If name="$error_name"> -isError</mt:If>" id="question_<mt:Var name="question_basename" escape />" name="question_<mt:Var name="question_basename" escape />" value="<mt:Var name="question_value" escape />"<mt:If name="question_placeholder"> placeholder="<mt:Var name="question_placeholder" escape />"</mt:If><mt:If name="question_required"> required</mt:If>>
    </mt:If>
  </mt:SetVarBlock>
  <mt:Var name="__question_template__" />

<mt:Ignore>設問タイプ:テキストエリア</mt:Ignore>
<mt:ElseIf name="question_questiontype_id" eq="2">
  <mt:SetVarBlock name="__question_content__">
    <mt:SetVarBlock name="field_name">request.question_<mt:Var name="question_basename" escape /></mt:SetVarBlock>
    <mt:SetVarBlock name="error_name">question_<mt:Var name="question_basename" escape />_error</mt:SetVarBlock>
    <mt:Var name="$field_name" setvar="question_value" />
    <mt:Unless name="magic_token">
      <mt:Var name="question_default_value" setvar="question_value" />
    </mt:Unless>

    <mt:If name="confirm_ok">
      <mt:Var name="question_value" escape nl2br trim_space="3" />
      <input type="hidden" name="question_<mt:Var name="question_basename" escape />" value="<mt:Var name="question_value" escape />">
    <mt:Else>
      <textarea class="p-contactForm__textarea<mt:If name="$error_name"> -isError</mt:If>" cols="30" rows="<mt:If name="question_rows"><mt:Var name="question_rows" escape /><mt:Else>5</mt:If>" id="question_<mt:Var name="question_basename" escape />" name="question_<mt:Var name="question_basename" escape />"<mt:If name="question_placeholder"> placeholder="<mt:Var name="question_placeholder" escape />"</mt:If><mt:If name="question_required"> required</mt:If>><mt:Var name="question_value" escape /></textarea>
    </mt:If>
  </mt:SetVarBlock>
  <mt:Var name="__question_template__" />

<mt:Ignore>設問タイプ:テキスト(複数欄)</mt:Ignore>
<mt:ElseIf name="question_questiontype_id" eq="3">
  <mt:SetVarBlock name="__question_content__">  
    <mt:SetVarBlock name="field_name">request.question_<mt:Var name="question_basename" escape /></mt:SetVarBlock>
    <mt:SetVarBlock name="error_name">question_<mt:Var name="question_basename" escape />_error</mt:SetVarBlock>
    <mt:Var name="$field_name" setvar="question_vars" />
    <mt:Unless name="magic_token">
      <mt:Var name="question_default_value" split="," setvar="question_vars" />
    </mt:Unless>

    <mt:Var name="question_connector" instr="," setvar="connector_split" />
    <mt:If name="connector_split">
      <mt:Var name="question_connector" split="," setvar="question_connectors" />
    <mt:Else>
      <mt:Var name="connector_var" value="$question_connector" />
    </mt:If>
    
    <mt:If name="confirm_ok">
      <mt:Var name="__values__" value="" />
      <mt:Var name="__hidden__" value="" />
      <mt:Loop name="question_vars">
        <mt:SetVarBlock name="__values__" append="1">
          <mt:Var name="__value__" escape />
          <mt:If name="connector_split">
            <mt:Var name="question_connectors" index="$__index__" escape />
          <mt:Else>
            <mt:Unless name="__last__">
              <mt:Var name="question_connector" escape />
            </mt:Unless>
          </mt:If>
        </mt:SetVarBlock>
        <mt:SetVarBlock name="__hidden__" append="1"><input type="hidden" name="question_<mt:Var name="question_basename" escape />[]" value="<mt:Var name="$question_vars" index="$__index__" escape />"></mt:SetVarBlock>
        <mt:If name="__last__">
          <mt:Var name="__values__" strip_linefeeds="1" trim_space="1" regex_replace="'/\s+/g',''" />
          <mt:Var name="__hidden__" />
        </mt:If>
      </mt:Loop>
    <mt:Else>
      <mt:Var name="question_placeholder" split="," setvar="placeholders" />
      <mt:Var name="question_options" split="," setvar="cell_widths" />
      <mt:For from="1" to="$question_count_fields" glue="$connector_var">
        <input type="text" class="p-contactForm__input -groupText -field-<mt:Var name="question_count_fields" escape /><mt:If name="question_options"> -width-<mt:Var name="$cell_widths" index="$__index__" escape /></mt:If><mt:If name="$error_name"> -isError</mt:If>" id="question_<mt:Var name="question_basename" escape />_<mt:Var name="__counter__" />" name="question_<mt:Var name="question_basename" escape />[]" value="<mt:Var name="$question_vars" index="$__index__" escape />" placeholder="<mt:Var name="$placeholders" index="$__index__" escape />">
        <mt:Var name="question_connectors" index="$__index__" escape />
      </mt:For>
    </mt:If>

    <mt:Var name="question_connectors" value="" />
    <mt:Var name="connector_var" value="" />
  </mt:SetVarBlock>
  <mt:Var name="__question_template__" />

<mt:Ignore>設問タイプ:ラジオボタン</mt:Ignore>
<mt:ElseIf name="question_questiontype_id" eq="4">
  <mt:SetVarBlock name="__question_content__">
    <mt:SetVarBlock name="field_name">request.question_<mt:Var name="question_basename" escape /></mt:SetVarBlock>
    <mt:SetVarBlock name="error_name">question_<mt:Var name="question_basename" escape />_error</mt:SetVarBlock>
    <mt:Var name="$field_name" setvar="question_value" />
    <mt:Var name="question_options" split="," setvar="question_opts" />
    <mt:Var name="question_values" split="," setvar="question_vars" />

    <mt:If name="confirm_ok">
      <mt:Var name="question_value" escape />
      <input type="hidden" name="question_<mt:Var name="question_basename" escape />" value="<mt:Var name="question_value" escape />">
    <mt:Else>
      <mt:Loop name="question_opts">
        <mt:If name="__first__">
          <div class="p-contactForm__radioGroup<mt:If name="$error_name"> -isError</mt:If>" aria-labelledby="label-<mt:Var name="question_basename" escape />" role="group">
        </mt:If>

        <div class="p-contactForm__radioContent">
          <mt:Var name="question_opts" index="$__index__" setvar="current_opt" escape />
          <label for="question_<mt:Var name="question_basename" escape />-<mt:Var name="__counter__" />">
            <input type="radio" id="question_<mt:Var name="question_basename" escape />-<mt:Var name="__counter__" />" name="question_<mt:Var name="question_basename" escape />" value="<mt:If name="question_values"><mt:Var name="question_vars" index="$__index__" escape /><mt:Else><mt:Var name="question_opts" index="$__index__" escape /></mt:If>"<mt:If name="current_opt" eq="$question_value"> checked<mt:ElseIf name="current_opt" eq="$question_default_value"> checked</mt:If><mt:If name="question_required"> required</mt:If>>
            <span class="p-contactForm__radioText"><mt:Var name="question_opts" index="$__index__" escape /></span>
          </label>
        </div>

        <mt:If name="__last__">
          </div>
        </mt:If>
      </mt:Loop>
    </mt:If>
  </mt:SetVarBlock>
  <mt:Var name="__question_template__" />

<mt:Ignore>設問タイプ:チェックボックス</mt:Ignore>
<mt:ElseIf name="question_questiontype_id" eq="5">
  <mt:SetVarBlock name="__question_content__">
    <mt:SetVarBlock name="field_name">request.question_<mt:Var name="question_basename" escape /></mt:SetVarBlock>
    <mt:SetVarBlock name="error_name">question_<mt:Var name="question_basename" escape />_error</mt:SetVarBlock>
    <mt:Var name="$field_name" setvar="question_value" />
    
    <mt:If name="confirm_ok">
      <mt:If name="question_value">
        <mt:Var name="question_options" escape />
      </mt:If>
      <input type="hidden" name="question_<mt:Var name="question_basename" escape />" value="<mt:Var name="question_value" escape />">
    <mt:Else>
      <mt:Var name="question_options" setvar="question_option_value" />
      <mt:If name="question_values">
        <mt:Var name="question_values" setvar="question_option_value" />
      </mt:If>

      <div class="p-contactForm__checkboxGroup<mt:If name="$error_name"> -isError</mt:If>" id="<mt:Var name="question_basename" escape />-group">
        <div class="p-contactForm__checkboxItems">
          <div class="p-contactForm__checkboxItem">
            <label for="question_<mt:Var name="question_basename" escape />">
              <input type="checkbox" id="question_<mt:Var name="question_basename" escape />" name="question_<mt:Var name="question_basename" escape />" value="<mt:If name="question_option_value"><mt:Var name="question_option_value" escape /><mt:Else>1</mt:If>"<mt:If name="question_value"> checked<mt:ElseIf name="question_default_value" eq="$question_option_value"> checked</mt:If><mt:If name="question_required"> required</mt:If>>
              <span><mt:Var name="question_options" escape /></span>
            </label>
          </div>
        </div>
      </div>
    </mt:If>
  </mt:SetVarBlock>
  <mt:Var name="__question_template__" />

<mt:Ignore>設問タイプ:チェックボックス(複数)</mt:Ignore>
<mt:ElseIf name="question_questiontype_id" eq="6">
  <mt:SetVarBlock name="__question_content__">
    <mt:SetVarBlock name="field_name">request.question_<mt:Var name="question_basename" escape /></mt:SetVarBlock>
    <mt:SetVarBlock name="error_name">question_<mt:Var name="question_basename" escape />_error</mt:SetVarBlock>
    <mt:Var name="$field_name" setvar="question_vars" />
    <mt:Var name="question_options" split="," setvar="question_opts" />

    <mt:If name="confirm_ok">
      <mt:Loop name="question_vars">
        <mt:Var name="__value__" escape /><mt:Unless name="__last__"><br></mt:Unless>
        <input type="hidden" name="question_<mt:Var name="question_basename" escape />[]" value="<mt:Var name="question_vars" index="$__index__" escape />">
      </mt:Loop>
    <mt:Else>
      <mt:Loop name="question_opts">
        <mt:If name="__first__">
          <div class="p-contactForm__checkboxGroup<mt:If name="$error_name"> -isError</mt:If>" id="<mt:Var name="question_basename" escape />-group">
            <div class="p-contactForm__checkboxItems">
        </mt:If>

        <div class="p-contactForm__checkboxItem">
          <mt:Var name="question_opts" index="$__index__" setvar="current_opt" escape />
          <label for="question_<mt:Var name="question_basename" escape />-<mt:Var name="__counter__" />">
            <input type="checkbox" id="question_<mt:Var name="question_basename" escape />-<mt:Var name="__counter__" />" name="question_<mt:Var name="question_basename" escape>[]" value="<mt:If name="question_values"><mt:Var name="question_vars" index="$__index__" escape /><mt:Else><mt:Var name="question_opts" index="$__index__" escape /></mt:If>"<mt:IfInArray value="$current_opt" array="question_vars"> checked</mt:ifInArray><mt:If name="question_required"> required</mt:If>>
            <span><mt:Var name="question_opts" index="$__index__" escape /></span>
          </label>
        </div>

        <mt:If name="__last__">
            </div>
          </div>
        </mt:If>
      </mt:Loop>
    </mt:If>
  </mt:SetVarBlock>
  <mt:Var name="__question_template__" />

<mt:Ignore>設問タイプ:ドロップダウン</mt:Ignore>
<mt:ElseIf name="question_questiontype_id" eq="7">
  <mt:SetVarBlock name="__question_content__">
    <mt:SetVarBlock name="field_name">request.question_<mt:Var name="question_basename" escape /></mt:SetVarBlock>
    <mt:SetVarBlock name="error_name">question_<mt:Var name="question_basename" escape />_error</mt:SetVarBlock>
    <mt:Var name="$field_name" setvar="question_value" />
    <mt:Var name="question_options" split="," setvar="question_opts" />
    <mt:Var name="question_values" split="," setvar="question_vars" />
  
    <mt:If name="confirm_ok">
      <mt:Var name="question_value" escape />
      <input type="hidden" name="question_<mt:Var name="question_basename" escape />" value="<mt:Var name="question_value" escape />">
    <mt:Else>
      <mt:Loop name="question_opts">
        <mt:If name="__first__">
          <select class="p-contactForm__select<mt:If name="$error_name"> -isError</mt:If>" id="question_<mt:Var name="question_basename" escape />" name="question_<mt:Var name="question_basename" escape />"<mt:If name="question_required"> required</mt:If>>
          <mt:Unless name="question_required">
            <option value=""><mt:Trans phrase="Unspecified" /></option>
          </mt:Unless>
        </mt:If>

        <mt:Var name="question_opts" index="$__index__" escape setvar="current_opt" />
        <option value="<mt:If name="question_values"><mt:Var name="question_vars" index="$__index__" escape /><mt:Else><mt:Var name="question_opts" index="$__index__" escape /></mt:If>"<mt:If name="current_opt" eq="$question_value"> selected</mt:If>>
          <mt:Var name="question_opts" index="$__index__" escape />
        </option>

        <mt:If name="__last__">
          </select>
        </mt:If>
      </mt:Loop>
    </mt:If>
  </mt:SetVarBlock>
  <mt:Var name="__question_template__" />

<mt:Ignore>設問タイプ:日付</mt:Ignore>
<mt:ElseIf name="question_questiontype_id" eq="8">
  <mt:SetVarBlock name="__question_content__">  
    <mt:SetVarBlock name="field_name">request.question_<mt:Var name="question_basename" escape /></mt:SetVarBlock>
    <mt:SetVarBlock name="error_name">question_<mt:Var name="question_basename" escape />_error</mt:SetVarBlock>
    <mt:Var name="$field_name" setvar="question_vars" />
    <mt:If name="request.__mode" ne="confirm">
      <mt:Var name="question_default_value" eval="1" split="," setvar="question_vars">
    </mt:If>

    <mt:Var name="question_connector" instr="," setvar="connector_split" />
    <mt:If name="connector_split">
      <mt:Var name="question_connector" split="," setvar="question_connectors" />
    <mt:Else>
      <mt:setvar function="push" name="question_connectors" value="$question_connector">
      <mt:setvar function="push" name="question_connectors" value="$question_connector">
    </mt:If>
    
    <mt:If name="confirm_ok">
      <mt:SetVarBlock name="question_value">
        <mt:Var name="question_vars" index="0" /><mt:Var name="question_connectors" index="0" escape />
        <mt:Var name="question_vars" index="1" /><mt:Var name="question_connectors" index="1" escape />
        <mt:Var name="question_vars" index="2" /><mt:Var name="question_connectors" index="2" escape />
      </mt:SetVarBlock>

      <mt:Var name="question_value" escape strip_linefeeds />
      <input type="hidden" id="question_<mt:Var name="question_basename" escape />" name="question_<mt:Var name="question_basename" escape />[]" value="<mt:Var name="question_vars" index="0" regex_replace="'/[^0-9]/',''" />">
      <input type="hidden" name="question_<mt:Var name="question_basename" escape />[]" value="<mt:Var name="question_vars" index="1" regex_replace="'/[^0-9]/',''" />">
      <input type="hidden" name="question_<mt:Var name="question_basename" escape />[]" value="<mt:Var name="question_vars" index="2" regex_replace="'/[^0-9]/',''" />">
    
    <mt:Else>
      <mt:Var name="question_options" eval="1" split="," setvar="year_from_to" />
      <mt:Var name="year_from_to" index="0" setvar="year_from" />
      <mt:Var name="year_from_to" index="1" setvar="year_to" />
      <mt:Unless name="year_from"><mt:Var name="year_from" value="1930" /></mt:Unless>
      <mt:Unless name="year_to"><mt:Date format="Y" setvar="year_to" /></mt:Unless>
      <mt:Var name="question_vars" index="0" regex_replace="'/[^0-9]/',''" setvar="var_year" />
      <mt:Var name="question_vars" index="1" regex_replace="'/[^0-9]/',''" setvar="var_month" />
      <mt:Var name="question_vars" index="2" regex_replace="'/[^0-9]/',''" setvar="var_day" />
      <mt:If name="question_aria_label">
        <mt:Var name="question_aria_label" split="," setvar="aria_labels" />
        <mt:Var name="aria_labels" index="0" escape setvar="aria_label1" />
        <mt:Var name="aria_labels" index="1" escape setvar="aria_label2" />
        <mt:Var name="aria_labels" index="2" escape setvar="aria_label3" />
      </mt:If>

      <mt:For from="$year_from" to="$year_to">
        <mt:If name="__first__">
          <select class="p-contactForm__select<mt:If name="$error_name"> -isError</mt:If>" name="question_<mt:Var name="question_basename" escape />[]" id="question_<mt:Var name="question_basename" escape />"<mt:If name="aria_label1"> aria-label="<mt:Var name="aria_label1" />"</mt:If>>
          <mt:Unless name="question_required"><option value=""><mt:Trans phrase="Unspecified" /></option></mt:Unless>
        </mt:If>
        <option value="<mt:Var name="__value__" />"<mt:If name="var_year" eq="$__value__"> selected</mt:If>><mt:Var name="__value__" /></option>
        <mt:If name="__last__">
          </select>
        </mt:If>
      </mt:For>

      <mt:Var name="question_connectors" index="0" escape />

      <mt:For from="1" to="12">
        <mt:If name="__first__">
          <select class="p-contactForm__select<mt:If name="$error_name"> -isError</mt:If>" name="question_<mt:Var name="question_basename" escape />[]"<mt:If name="aria_label2"> aria-label="<mt:Var name="aria_label2" />"</mt:If>>
          <mt:Unless name="question_required"><option value=""><mt:Trans phrase="Unspecified" /></option></mt:Unless>
        </mt:If>
        <option value="<mt:Var name="__value__" zero_pad="2" />"<mt:If name="var_month" eq="$__value__"> selected</mt:If>><mt:Var name="__value__" zero_pad="2" /></option>
        <mt:If name="__last__">
          </select>
        </mt:If>
      </mt:For>

     <mt:Var name="question_connectors" index="1" escape />

      <mt:For from="1" to="31">
        <mt:If name="__first__">
          <select class="p-contactForm__select<mt:If name="$error_name"> -isError</mt:If>" name="question_<mt:Var name="question_basename" escape />[]"<mt:If name="aria_label3"> aria-label="<mt:Var name="aria_label3" />"</mt:If>>
          <mt:Unless name="question_required"><option value=""><mt:Trans phrase="Unspecified" /></option></mt:Unless>
        </mt:If>
        <option value="<mt:Var name="__value__" zero_pad="2" />"<mt:If name="var_day" eq="$__value__"> selected</mt:If>><mt:Var name="__value__" zero_pad="2" /></option>
        <mt:If name="__last__">
          </select>
        </mt:If>
      </mt:For>
      <mt:Var name="question_connectors" index="2" escape />
    </mt:If>

    <mt:Unset name="question_connectors" />
  </mt:SetVarBlock>
  <mt:Var name="__question_template__" />

  <mt:Unset name="aria_label1" />
  <mt:Unset name="aria_label2" />
  <mt:Unset name="aria_label3" />

<mt:Ignore>設問タイプ:添付ファイル</mt:Ignore>
<mt:ElseIf name="question_questiontype_id" eq="9">
  <mt:SetVarBlock name="__question_content__">
    <mt:SetVarBlock name="file_name">filename_<mt:Var name="question_basename" escape /></mt:SetVarBlock>
    <mt:SetVarBlock name="field_name">request.question_<mt:Var name="question_basename" escape /></mt:SetVarBlock>
    <mt:SetVarBlock name="error_name">question_<mt:Var name="question_basename" escape />_error</mt:SetVarBlock>
    <mt:Var name="$file_name" setvar="file_value" />
    <mt:Var name="$field_name" setvar="question_value" />
  
    <mt:If name="confirm_ok">
      <mt:Var name="file_value" escape />
      <!-- <input type="hidden" name="question_<mt:Var name="question_basename" escape />" value="<mt:Var name="question_value" escape />"> -->
    <mt:Else>
      <div class="p-contactForm__fileContent">
        <input type="file" id="question_<mt:Var name="question_basename" escape />" name="question_<mt:Var name="question_basename" escape />">
        <button type="button" class="p-contactForm__file" onclick="document.querySelector('#question_<mt:Var name="question_basename" escape />').click();"><mt:Trans phrase="Select..." /></button>
        <input type="text" id="filename_<mt:Var name="question_basename" escape />" class="p-contactForm__fileText" value="<mt:Var name="file_value" escape />" aria-label="<mt:If name="question_aria_label"><mt:Var name="question_aria_label" escape /><mt:Else><mt:Trans phrase="File Name" /></mt:If>" placeholder="<mt:If name="question_placeholder"><mt:Var name="question_placeholder" escape /><mt:Else><mt:Trans phrase="Select File..." /></mt:If>">
      </div>

      <script>
        (() => {
          const questionFile = document.querySelector('#question_<mt:Var name="question_basename" escape />');
          const questionFileText = document.querySelector('#filename_<mt:Var name="question_basename" escape />');
          questionFile.addEventListener('change', () => {
            questionFileText.value = questionFile.value.replace('C:\\fakepath\\', '');
          });
        })();
      </script>
    </mt:If>
  </mt:SetVarBlock>
  <mt:Var name="__question_template__" />

<mt:Ignore>設問タイプ:メールアドレス(確認)</mt:Ignore>
<mt:ElseIf name="question_questiontype_id" eq="10">
  <mt:SetVarBlock name="__question_content__">
    <mt:SetVarBlock name="field_name">request.question_<mt:Var name="question_basename" escape /></mt:SetVarBlock>
    <mt:SetVarBlock name="error_name">question_<mt:Var name="question_basename" escape />_error</mt:SetVarBlock>
    <mt:Var name="$field_name" setvar="question_value" />
    <mt:Unless name="magic_token">
      <mt:Var name="question_default_value" setvar="question_value" />
    </mt:Unless>

    <mt:If name="question_aria_label">
      <mt:Var name="question_aria_label" split="," setvar="aria_labels">
      <mt:Var name="aria_labels" index="0" escape setvar="aria_label1">
      <mt:Count name="aria_labels" setvar="aria_labels_count">
      <mt:If name="aria_labels_count" gt="1">
        <mt:Var name="aria_labels" index="1" escape setvar="aria_label2">
      <mt:Else>
        <mt:Var name="aria_labels" index="0" escape setvar="aria_label2">
      </mt:If>
    </mt:If>
    
    <mt:If name="confirm_ok">
      <mt:Var name="question_value" escape />
      <input type="hidden" name="question_<mt:Var name="question_basename" escape />" value="<mt:Var name="question_value" escape />">
      <input type="hidden" name="question_<mt:Var name="question_basename" escape />_confirm" value="<mt:Var name="question_value" escape />">
    <mt:Else>
      <input type="email" class="p-contactForm__input -email<mt:If name="$error_name"> -isError</mt:If>" id="question_<mt:Var name="question_basename" escape />" name="question_<mt:Var name="question_basename" escape />" value="<mt:Var name="question_value" escape />"<mt:If name="question_placeholder"> placeholder="<mt:Var name="question_placeholder" escape />"</mt:If><mt:If name="question_required"> required</mt:If><mt:If name="aria_label1"> aria-label="<mt:Var name="aria_label1" />"</mt:If>>
      <p class="p-contactForm__supplement">確認のため再度入力してください</p>
      <input type="email" class="p-contactForm__input -email<mt:If name="$error_name"> -isError</mt:If>" name="question_<mt:Var name="question_basename" escape />_confirm" value="<mt:Var name="question_value" escape />"<mt:If name="question_placeholder"> placeholder="<mt:Var name="question_placeholder" escape />"</mt:If><mt:If name="question_required"> required</mt:If><mt:If name="aria_label2"> aria-label="<mt:Var name="aria_label2" />"</mt:If>>
    </mt:If>
  </mt:SetVarBlock>
  <mt:Var name="__question_template__" />

  <mt:Unset name="aria_label1">
  <mt:Unset name="aria_label2">
</mt:If>

設問の作成

設問のビューは上記モジュールに書いていますので、設問のオブジェクトでは設問タイプを設定してビューをインクルードするだけです。こうすることでデザインをモジュールで一元管理します。

設問タイプ:テキストの設定例

設問タイプにテキストを設定してモジュールをインクルードします。

設問タイプ:ラジオボタンの設定例

設問タイプにラジオボタンを設定してモジュールをインクルードするのは同様ですが、ラジオボタンの選択肢はオプションに入力します。

フォームの作成

設問オブジェクト作成の準備が整ったら、フォームオブジェクトを作成して設問オブジェクトを選択します。

特定の設問前後にHTMLを挿入したい

通常はフォームオブジェクトで選択した設問を上から順にループ出力しますが、特定の入力項目の間に見出しなどを挿入したい場合は以下の手段が考えられます。

  • フォームのビューをカスタマイズして(<mt:If>タグなどで)HTMLを挿入
  • ダミー設問を作成してHTMLを挿入

今回はダミー設問で見出しを挿入します。

ダミー設問の作成例

設問タイプは指定なしとし、ビューに挿入するHTMLを入力します(複数のダミー設問を挿入する場合はモジュール化を検討)。

フォームオブジェクトにダミー設問の設定例

設問にダミー設問を選択して並び替えます。設問として作成するメリットとして追加・管理が容易なことが挙げられます。

デメリットは、コンタクトにダミー設問も保存されるため、コンタクトの情報を何らかに利用する場合は注意しましょう。

まとめ

設問のビューをモジュールとして作成することで、デザインの管理が行いやすくなります。実装時はモジュールをデザインに合わせて変更し、設問タイプに応じて設問のカラムに入力・設定することで、比較的楽にフォームが作成できます。 管理しやすいようにオリジナルの設問モジュールを作成されてはいかがでしょうか。

最近の記事

カテゴリ

アーカイブ

スタッフ別