お問い合わせ
blog

お知らせ・ブログ

【Snow Monkey Forms カスタマイズ】フックを使ってフォーム要素に値を自動でセットする

『Snow Monkey Forms』はシンプルながら使い勝手がよく、さくさくとフォームを作れるWordPress用のブロックエディタ対応メールフォームプラグインです。
今回はURLクエリ(?xxx=yyy&zzz…)を元にフォーム要素に自動で値をセットするカスタマイズ方法をご紹介します。

同じ制作者が提供している『MW WP Form』を使っている人も多いかと思います。
上記のプラグイン開発は終了しており、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やブラウザ情報を入れてみたり…と使い所は色々ありそうですね。

今後もちょっとしたカスタマイズ方法をシリーズ化してお届けしたいと思います。

TOP