お知らせ・ブログ
【Snow Monkey Forms カスタマイズ】フックを使ってフォーム要素に値を自動でセットする
『Snow Monkey Forms』はシンプルながら使い勝手がよく、さくさくとフォームを作れるWordPress用のブロックエディタ対応メールフォームプラグインです。
今回はURLクエリ(?xxx=yyy&zzz…)を元にフォーム要素に自動で値をセットするカスタマイズ方法をご紹介します。
上記のプラグイン開発は終了しており、Snow Monkey Formsにシフトする とのこと。
Snow Moneky Formsへの変更も検討してみてください。確認画面、ありますよ!
URLのクエリを元に、フォームに自動で値をセットする
v1.2.0でフィルターフックを使ってフォームの属性値を変更できるようになりました!
公式ブログのサンプルコードを参考に書いていきます。
※テキストエリア、selectボックスはdisabledやreadonlyなどの属性値の設定は可能ですが、この方法でのテキスト入力・選択はできません。JavaScriptを利用する必要があります。(割愛)
追記:
selectボックスもいけました!
【2023年11月1日追記】
Snow Monkey Forms v6.1.0現在、ラジオボタン・チェックボックスの初期値設定が動作しなくなっています。(attributesのname値などが取得できなくなっているため)こちらは随時確認します。
【2021年3月23日追記】
Snow Monkey Forms v1.5.0がリリースされ、テキストアリア・セレクトボックスもvalue属性での値セットが可能になりました!
text, textarea, email要素など文字列をセット(基本のカタチ)
add_filter(
'snow_monkey_forms/control/attributes',
function( $attributes ) {
// name属性を持つブロック かつ nameがtelの時
if ( isset( $attributes['name'] ) && $attributes['name'] === 'tel' ) {
// URLクエリから?telの値を取得
$tel = filter_input( INPUT_GET, 'tel' );
// ?telの値があれば、valueにセット
if ( !is_null( $tel ) ) {
$attributes['value'] = $tel;
}
}
return $attributes;
}
);
テキストエリアはv1.5.0以降でのみ設定が可能です。
ラジオボタン、チェックボックスを選択
add_filter(
'snow_monkey_forms/control/attributes',
function( $attributes ) {
// ラジオボタンの場合
if ( isset( $attributes['name'] ) && $attributes['name'] === 'radio' ) {
$radio = filter_input( INPUT_GET, 'radio' );
if ( !is_null( $radio ) ) {
// value値とクエリの値が同じだったらcheckedにする
if( $attributes['value'] === $radio ) {
$attributes['checked'] = 'checked';
}
}
}
// チェックボックスの場合
// 配列になるのでname値の比較に注意
if ( isset( $attributes['name'] ) && $attributes['name'] === 'checkbox[]' ) {
// 配列を取得するために引数を設定。
$vals = filter_input( INPUT_GET, 'checkbox', FILTER_DEFAULT, FILTER_REQUIRE_ARRAY );
if ( !is_null( $vals ) ) {
foreach ($vals as $val) {
// 複数選択されている可能性があるので配列をループして1つずつ確認し、
// value値とクエリの値が同じだったらcheckedにする
if( $attributes['value'] === $val ) {
$attributes['checked'] = 'checked';
}
}
}
}
return $attributes;
}
);
セレクトボックスを選択(v1.5.0以降の場合)
add_filter(
'snow_monkey_forms/control/attributes',
function( $attributes ) {
if ( isset( $attributes['name'] ) && 'select' === $attributes['name'] ) {
$select = filter_input( INPUT_GET, 'select' );
if ( !is_null( $select ) ) {
$attributes['value'] = $select;
}
}
return $attributes;
}
);
value属性に、選択させたいoption項目の値(<option value=”xxxx”>ラベル</option>のxxxxの部分)をセットします。基本のカタチと同じように、シンプルに記述ができるようになりました。
セレクトボックスを選択(v1.4.1以前の場合)
add_filter(
'snow_monkey_forms/control/attributes',
function( $attributes ) {
// selected値がある=selectのoption要素と判別
if ( isset( $attributes['selected'] ) ) {
$select = filter_input( INPUT_GET, 'select' );
if ( !is_null( $select ) ) {
// value値とクエリの値が同じだったらselectedをtrueにする。(selectedを入れてもOK)
if( $attributes['value'] === $select ) {
$attributes['selected'] = true;
}
}
}
return $attributes;
}
);
v1.4.1以前の場合はこちらを利用します。option要素にはname属性はないため、selected属性があるもの=selectボックスのoption要素として判別しています。
まとめ
この便利なフックを使えば、より使いやすく・親切なフォームを作ることが可能です。少しの手間は質を大きく変える!
post_idを渡して記事タイトルを取得してみたり、不具合報告用にUAを取得してOSやブラウザ情報を入れてみたり…と使い所は色々ありそうですね。
今後もちょっとしたカスタマイズ方法をシリーズ化してお届けしたいと思います。