お知らせ・ブログ
【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ボックスもいけました！
【2021年3月23日追記】
Snow Monkey Forms v1.5.0がリリースされ、テキストアリア・セレクトボックスもvalue属性での値セットが可能になりました！
text, textarea, email要素など文字列をセット（基本のカタチ）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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以降でのみ設定が可能です。
ラジオボタン、チェックボックスを選択
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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以降の場合）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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以前の場合）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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やブラウザ情報を入れてみたり…と使い所は色々ありそうですね。
今後もちょっとしたカスタマイズ方法をシリーズ化してお届けしたいと思います。