お知らせ・ブログ
【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やブラウザ情報を入れてみたり…と使い所は色々ありそうですね。
今後もちょっとしたカスタマイズ方法をシリーズ化してお届けしたいと思います。