WordPress プラグイン【MW WP Form】3題

WordPress

(1)条件分岐を追加する。(チェックボックスとラジオボタン)
(2)出力された表示要素を改行する。
(3)チェックボックスON/OFF で要素を開閉する。

「mw wp form validate」条件分岐を追加

「MW WP Form」の問合せフォームで条件を追加する場合、条件分岐の備忘です。チェックボックスとラジオボタンで、処理が微妙に異なります。

プラグインに依存すると、フォームのソースを書かないので「あれ?」ってなります。

functions.php

ルール追加:「その他」選択で「textbox」の入力必須

/* mw wp form validate */
function my_validation_rule( $Validation, $data ) {

  if ( isset( $data['趣味']['data'] ) && is_array( $data['趣味']['data'] ) ) {
      if ( in_array( 'その他', $data['趣味']['data'] ) ) {
          $Validation->set_rule( 'その他', 'noEmpty', array(
            'message' => '未入力です。'
          ) );
      }
  }

  if ( $data['ジャンル'] === 'その他' ) {
      $Validation->set_rule( 'その他', 'noEmpty', array(
        'message' => '未入力です。'
      ) );
  }
  return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-123', 'my_validation_rule', 10, 2 );

取得した要素の全角空白を<br>に置換する

これも「MW WP Form」に関連しての備忘です。

「MW WP Form」からチェックボックスを作成したとき、表示される値に改行<br>が入らないので、全角空白を入れておいて、ループで要素を置換しました。

<script>
var f_text = document.getElementsByClassName('mwform-checkbox-field-text');
 
//取得した要素の全角空白を<br>に置換する
for(var i=0;i<f_text.length; i++){
f_text[i].innerHTML =  f_text[i].innerHTML.replace(' ', '<br> &nbsp;');
}
</script>

PCはそのまま、一行で表示
指定画面サイズ以下の時は、改行して表示

<script>
var f_text = document.getElementsByClassName('mwform-checkbox-field-text');
var mW = window.innerWidth;

//取得した要素の全角空白を<br>に置換する
if(mW<450){
	for(var i=0;i<f_text.length; i++){
	f_text[i].innerHTML =  f_text[i].innerHTML.replace(' ', '<br> &nbsp;');
	}
}
</script>

レスポンシブに追従させるなら、こちらを参照ください。PC/スマホの決め打ちでいいので、ここでは作ってません。

チェックボックス ON/OFF で要素を開閉

コメント

タイトルとURLをコピーしました