PHPJavaScriptPlugins
ワードプレスでフォームを実装する際にリンク元のなにがしかの情報を引っ張ってきてあらかじめ表示したいケースがあるかと思います。例えば求人情報を掲載してフォームから応募していただくケースやイベントなどの申込みフォームもそうでしょう。プラグイン（MW WP Form）を利用してそうした機能を実装してみます。
2019年3月5日
フォームの完成形イメージ
お問い合わせフォームや応募フォームで利用することの多いプラグインMW WP Formを使って、リンク元ページからフォームにデータを引き継いで表示してみたいと思います。
例として下記のような応募フォームを想定し店舗と募集職種を応募フォームへ反映させます。ワードプレスで求人コンテンツを作成する際は一職種一募集要項が基本になりますので、どの店舗・職種の募集要項からの応募かがわかるようにする必要があります。応募フォームでユーザーに店舗・職種などをプルダウンなどで選んでもらうよりは、あらかじめフォームに反映させておく方が間違いもないですし、何よりユーザーに対して親切です。
■募集要項のスマートフォン版（レスポンシブ）
上記のフォームから応募フォームに遷移した場合はあらかじめ応募フォームに店舗と職種が反映されています。
■フォームのデスクトップ版
■フォームのスマートフォン版（レスポンシブ）
hiddenフィールドを使って値をフォームに送信
カスタムフィールドを使用した募集要項の記述
今回は募集要項と応募フォームを想定しています。募集要項についてはカスタムフィールド（プラグインAdvanced Custom Fields）を使用していますので以下のような記述になります。
<?php if(get_field('store_name')) : ?>
<div class="hole">
<div class="left">店舗</div>
<div class="right"><?php echo esc_html(get_field('store_name')); ?></div>
</div>
<?php endif; ?>
<?php if(get_field('job_name')) : ?>
<div class="hole">
<div class="left">募集職種</div>
<div class="right"><?php echo esc_html(get_field('job_name')); ?></div>
</div>
<?php endif; ?>
hiddenフィールドの記述
店舗と募集職種は応募フォームへ値を渡しますので、以下のようにhiddenフィールドにも同様に出力しておきます。したがって、応募フォームへのリンクはaタグによるリンクではなくsubmitボタンになります（aタグの場合は href属性に”javascript:form.submit()”を指定）。今回はデータの送り先として/form/でアクセスできる固定ページ（応募フォームのページ）としています。
<form method="post" name="form" action="<?php echo esc_url(home_url()); ?>/form/">
<input type="hidden" name="store_name" value="<?php echo esc_attr(get_field('store_name')); ?>">
<input type="hidden" name="job_name" value="<?php echo esc_attr(get_field('job_name')); ?>">
<button type="submit">応募フォームを開く <i class="fa fa-angle-right"></i></button>
</form>
■デスクトップ版
■スマートフォン版（レスポンシブ）
受け取った値をフィルターフックでフォームに挿入
フィルターフックを使用してデータを挿入
募集要項から送られてきたデータをフォームに挿入するには、プラグインMW WP Formが用意してくれているフィルターフック（mwform_value_mw-wp-form-xxx）を使用します。functions.phpに記述します。
・mwform_value_mw-wp-form-xxx | MW WP Form
■functions.php
function my_mwform_value_job_name($value, $name) {
if ($name === 'job_name' && !empty($_POST['job_name']) && !is_array($_POST['job_name'])) {
return $_POST['job_name'];
}
return $value;
}
add_filter( 'mwform_value_mw-wp-form-210', 'my_mwform_value_job_name', 10, 2 );
function my_mwform_value_store_name($value, $name) {
if ($name === 'store_name' && !empty($_POST['store_name']) && !is_array($_POST['store_name'])) {
return $_POST['store_name'];
}
return $value;
}
add_filter( 'mwform_value_mw-wp-form-210', 'my_mwform_value_store_name', 10, 2 );
データが挿入されたフォームの記述
フィルターフック（mwform_value_mw-wp-form-xxx）を使用してデータを挿入することで以下のような記述が生成されます。これでフォームにデータが反映されました。フィルターフックを使用することで安全かつ簡単にデータを挿入することができます。
<div class="hole">
<div class="left">応募店舗</div>
<div class="right"><input type="text" name="store_name" id="store_name" size="60" value="渋谷道玄坂店" /></div>
</div>
<div class="hole">
<div class="left">応募職種</div>
<div class="right"><input type="text" name="job_name" id="job_name" size="60" value="ホールスタッフ" /></div>
</div>
■フォームのデスクトップ版
■フォームのスマートフォン版（レスポンシブ）
JavaScriptで読み出し専用（readOnly）と文字色変更
フォームに反映されたデータをユーザーが変更できないようにするにはJavaScriptを使用します。
<div class="hole">
<div class="left">応募店舗</div>
<div class="right"><input type="text" name="store_name" id="store_name" size="60" value="渋谷道玄坂店" /></div>
</div>
<div class="hole">
<div class="left">応募職種</div>
<div class="right"><input type="text" name="job_name" id="job_name" size="60" value="ホールスタッフ" /></div>
</div>
disabled = trueという記述とreadOnly = trueという2種類の方法がありますが、disabled = trueは値をサーバに送信しませんので今回はreadOnly = trueを使用しています（別途hiddenフィールドを用意することでdisabled = trueを使用することもできます）。さらに、6行目、10行目の記述で文字色をグレーにすることで見た目にも変更できない感じを出しています。
<script>
'use strict';
{
const store_name = document.getElementById('store_name');
store_name.readOnly = true;
store_name.style.color = 'gray';
const job_name = document.getElementById('job_name');
job_name.readOnly = true;
job_name.style.color = 'gray';
}
</script>
■フォームのデスクトップ版
■フォームのスマートフォン版（レスポンシブ）
以上で「フォームにリンク元ページの情報を引っ張ってきて表示」の解説を終わります。
Tweet
