特定のページからフォームのページに遷移したときに、遷移前のページのデータを自動で入力フィールドに入力するカスタマイズ

公開日:

目次

この記事は、a-blog cms Advent Calendar 2021 の19日目の記事でもあり、お誕生日エントリーでもありますです。

皆さんこんにちは。今年も寒くなってきましたね…。今年が初めてとなる a-blog cms Advent Carendar で何を書こうかすごく迷ったのですが、最近採用フォームの実装をしたのでそのときに実装したカスタマイズのことについて書こうと思います。

概要

たとえば、採用サイトを実装するにあたって、採用のためのエントリーフォームを設置することになると思います。そして、エントリーフォームには希望勤務地や希望職種などの情報を入力するための項目を設置することになるでしょう。

また、サイト構造として、求人内容の詳細ページを各職種や勤務地毎にエントリーで実装することにしていたとします。

上記の前提で実装する場合、サイト閲覧者が求人詳細ページからエントリーフォームに遷移した場合は、遷移前のページの情報（各職種や勤務地）を遷移後のエントリーフォームのページでは自動で入力されるようにしたくないでしょうか？したいですよね？（強引）

今回は、上記のような場面に対応するべく、題して 「特定のページからフォームのページに遷移したときに、遷移前のページのデータを自動で入力フィールドに入力するカスタマイズ 」の実装方法を紹介します。

実装方法

実装手順は以下の2ステップになります。

  1. 遷移後のページのフォームに固定の値を入力できる
  2. 遷移後のページのフォームに動的に値を入力できる

遷移後のページのフォームに固定の値を入力できる

まずは、詳細ページからエントリーフォームのページに遷移した場合に、勤務地と職種の情報を固定で、フォームの項目に入力した状態にできるようにしましょう。

例えば、以下のように勤務地の情報を入力するフォームがあったとしましょう。希望職種は occupation、希望勤務地は area というカスタムフィールドで実装しています。

<ul class="p-form__group">
	<li class="p-form__item">
		<div class="p-form__label-box">
			<div class="p-form__label-box-inner">
				<label for="occupation" class="p-form__label">希望職種</label><span class="c-label-required">必須</span>
			</div>
		</div>
		<div class="p-form__control-box">
			<div class="p-form__control">
				<select id="occupation" class="c-form-select" name="occupation" data-validator="occupation">
					<option value=""<!-- BEGIN_IF [{occupation}/em] --> selected="selected"<!-- END_IF -->>選択してください</option>
					<option value="ディレクター"{occupation:selected#ディレクター}>ディレクター</option>
					<option value="エンジニア"{occupation:selected#エンジニア>エンジニア</option>
					<option value="デザイナー"{occupation:selected#デザイナー}>デザイナー</option>
					<option value="マーケター"{occupation:selected#マーケター}>マーケター</option>
				</select>
				<input type="hidden" name="field[]" value="occupation">
				<input type="hidden" name="occupation:v#required" id="occupation-v-required">
				<div role="alert" aria-live="assertive">
					<div data-validator-label="occupation-v-required" class="validator-result-{occupation:v#required}">
						<p class="c-error-text"><i class="fas fa-exclamation-triangle c-error-text__ico" aria-hidden="true"></i>希望職種を選択してください。</p>
					</div>
				</div>
			</div>
		</div>
	</li>
	<li class="p-form__item">
		<div class="p-form__label-box -items-start">
			<div class="p-form__label-box-inner">
				<label for="area" class="p-form__label">希望勤務地</label><span class="c-label-required">必須</span>
			</div>
		</div>
		<div class="p-form__control-box">
			<div class="p-form_control">
				<div class="c-form-check-group -vertical">
					<div class="c-form-check">
						<input type="checkbox" name="area[]" value="東京都" {area:checked#東京都} id="input-checkbox-area-東京都" class="c-form-check-input" >
						<label for="input-checkbox-area-東京都" class="c-form-check-label">東京都</label>
					</div>
					<div class="c-form-check">
						<input type="checkbox" name="area[]" value="愛知県" {area:checked#愛知県} id="input-checkbox-area-愛知県" class="c-form-check-input" >
						<label for="input-checkbox-area-愛知県" class="c-form-check-label">愛知県</label>
					</div>
					<div class="c-form-check">
						<input type="checkbox" name="area[]" value="大阪府" {area:checked#大阪府} id="input-checkbox-area-大阪府" class="c-form-check-input" >
						<label for="input-checkbox-area-大阪府" class="c-form-check-label">大阪府</label>
					</div>
					<div class="c-form-check">
						<input type="checkbox" name="area[]" value="福岡県" {area:checked#福岡県} id="input-checkbox-area-福岡県" class="c-form-check-input" >
						<label for="input-checkbox-area-福岡県" class="c-form-check-label">福岡県</label>
					</div>
					<div class="c-form-check">
						<input type="checkbox" name="area[]" value="沖縄県" {area:checked#沖縄県} id="input-checkbox-area-沖縄県" class="c-form-check-input" >
						<label for="input-checkbox-area-沖縄県" class="c-form-check-label">沖縄県</label>
					</div>
				</div>
				<input type="hidden" name="field[]" value="area">
				<input type="hidden" name="area:v#required" id="area-v-required">
				<div role="alert" aria-live="assertive">
					<div data-validator-label="area-v-required" class="validator-result-{area:v#required}">
						<p class="c-error-text"><i class="fas fa-exclamation-triangle c-error-text__ico" aria-hidden="true"></i>希望勤務地を選択してください。</p>
					</div>
				</div>
			</div>
		</div>
	</li>
</ul>

このページに遷移したときに occupation と area のカスタムフィールドに自動的に値をセットするためには遷移前のページで以下のようにソースコードを記述します。

<form action="/entryform/" method="post" enctype="multipart/form-data">
        <input type="hidden" name="field[]" value="occupation">
        <input type="hidden" name="occupation" value="エンジニア">

        <input type="hidden" name="field[]" value="area">
        <input type="hidden" name="area" value="愛知県">

        <input type="hidden" name="id" value="recruitForm" />
        <button type="submit" name="ACMS_POST_Form_Chain" class="c-btn-primary">エントリーする</button>
</form>

上記のコードのように ACMS_POST_Form_Chain を動作させるフォーム内に hidden で値を渡してあげることで、遷移後のエントリーフォームで hidden で渡してあげたカスタムフィールドの値が保持されます。上記の例では、希望職種にエンジニアが、希望勤務地に愛知県が選択された状態に自動でなります。

form タグの action 属性にはエントリーフォームのURLを設定してあげることと、フォームIDを設定するのを忘れないようにしましょう。

また、ここでのポイントは name="ACMS_POST_Form_Chain" とすることで Form_Chain のポストモジュールを動かしている点です。 というのも name="ACMS_POST_Form_Confirm" として、Form_Confirm モジュールを指定しても動作自体は問題なくできるのですが、フォームの管理画面内の設定により、サーバーサイド側でバリデートを指定している状態で Form_Confirm モジュールを動作させると、遷移後のページでバリデーションが動作してしまいます。そのため、サーバーサイド側で必須入力などのバリデーションを設定している場合、バリデーションを指定しているフォーム部品のエラーメッセージがすべて表示されてしまいます。

バリデーションを動作させずにフォームのページに遷移するためには Form_Chain の方のポストモジュールを使用する必要があります。

遷移後のページのフォームに動的に値を入力できる

先程のままでは、どのページからエントリーフォームに遷移した場合でも希望職種にエンジニアが、希望勤務地に愛知県が選択された状態になります。これを動的に設定できるようにしましょう。たとえば、勤務地が福岡県の求人詳細ページから遷移した場合は希望勤務地に福岡県が選択された状態のフォームに遷移する。デザイナーの求人詳細ページから遷移した場合には希望職種にデザイナーが選択された状態にするといった具合です。

Entry_Summary や Entry_Body 、Entry_Field などのモジュール内に先程のフォームのソースコードを記述することで、そのエントリーやそのエントリーが属するカテゴリーやブログのカスタムフィールドを使用することができますので、その仕組を利用します。

以下は Entry_Body で表示させる例です。

<!-- BEGIN_MODULE Entry_Body id="hogehoge" -->
<div>
  <!-- BEGIN notFound -->
  <p>ただいまページを準備しております。もうしばらくお待ちください。</p>
  <!-- END notFound -->

  <!-- BEGIN entry:loop -->
  @include("/admin/entry/revision-info.html")

  <div class="acms-page-header">
    <!-- BEGIN pageHubHeader:veil -->
    <div>
      <p><!-- BEGIN date:veil --><time datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年{date#m}月{date#d}日</time>
      <!-- END date:veil --><!-- BEGIN category:loop -->
        <span class="acms-label"><a href="{url}">{name}</a></span>
        <!-- BEGIN glue -->
        <
        <!-- END glue -->
        <!-- END category:loop --><!-- BEGIN new -->
      <span class="acms-label acms-label-warning">NEW</span>
      <!-- END new --></p>
    </div><!-- END pageHubHeader:veil -->
    @include("/admin/entry/title.html")
    <!-- BEGIN title:veil -->
      <h2><a href="{titleUrl}">{title}</a></h2>
    <!-- END title:veil -->
  </div>
  <div>
    <div>
      <!-- BEGIN unit:veil -->
      <div class="acms-entry">
        <div class="acms-grid-r">
        @include("/include/unit.html")
        </div>
      </div>
      <hr class="clearHidden">
      <!-- END unit:veil -->

      <form action="/path/to/entryFrom/" method="post" enctype="multipart/form-data" class="p-confirm-modal__btn">
        <input type="hidden" name="field[]" value="occupation">
        <input type="hidden" name="occupation" value="{occupation}">

        <input type="hidden" name="field[]" value="area">
        <input type="hidden" name="area" value="{area}">

        <input type="hidden" name="id" value="recruitForm" />
        <button type="submit" name="ACMS_POST_Form_Confirm" class="c-btn-primary">エントリーする</button>
      </form>

      @include("/admin/entry/edit-%{IS_ADMIN}.html")

      @include("/admin/entry/action.html")
    </div>
  </div>
  <!-- END entry:loop -->
  </div>

  <!-- END_MODULE Entry_Body -->

こうすることで、表示したいエントリーのカスタムフィールド及び、エントリーが属するカテゴリーやブログのカスタムフィールドを hidden の値にセットすることができます。注意点として、モジュールIDのカテゴリーIDとエントリーIDの引数にチェックをつけるのを忘れないようにしましょう。！

まとめ

今回紹介した「特定のページからフォームのページに遷移したときに、遷移前のページのデータを自動で入力フィールドに入力するカスタマイズ」は記事中に紹介したような採用フォームだけでなく、PDFをダウンロードさせるようなフォームでも有効です。たとえば、何種類かあるPDFの中で1つのPDFを選択してダウンロードフォームに遷移すると、そのダウンロードフォーム内のフォーム部品には先程選択したPDFが入力された状態のフォームが表示されると言った具合です。このように意外と使いどころのあるカスタマイズかと思いますので皆様良ければ参考にしていただけると嬉しいです。

明日の a-blog cms Advent Calendar 2021 20日目 は、水越佑介さんの記事です。お楽しみに?