LoginSignup
1
2

More than 5 years have passed since last update.

MW_WP_FORMで「利用規約に同意」カスタマイズ

Last updated at Posted at 2017-11-08

mw wp formで「利用規約に同意」のチェックボックスを作った時のメモ。

やりたいこと

固定ページから「個人情報保護方針」を読み込む
利用規約のチェックボックスを作る
バリデーションで必須に
エラーメッセージの文言変更
条件分岐「利用規約にチェックが入っていなければ、エラーページで利用規約を表示する」

1.固定ページから「個人情報保護方針」を読み込む・チェックボックスの作成

<div id="frame-privarypolicy"></div>
<p id="privacy-check">[mwform_checkbox name="利用規約" children="同意する"]</p>

...(</body>直前)
<script>
$(function() {
  $.ajax({
    url: '/privacypolicy',
    cache: false,
    success: function(html) {
      $(html).find('#privacypolicy').each(function() {
        $('#frame-privarypolicy').html($(this).html());
        return false;
      });
    }
  });
});
</script>

固定ページをそのまま読み込むと、headerなどの余計なものも入ってしまうので、id(#privacypolicy)だけを取り出して読み込んでいる。

バリデーションで必須に

スクリーンショット 2017-11-08 08.57.38.png

エラーメッセージの文言変更

functions.phpに記載

function add_mwform_validation_rule( $Validation, $data ) {
$Validation->set_rule( '利用規約', 'required', array(
        'message' => '個人情報保護方針を読み、同意してください。'
    ) );
   return $Validation;
  }
add_filter( 'mwform_validation_mw-wp-form-xxxx', 'add_mwform_validation_rule', 10, 2 );

条件分岐「利用規約にチェックが入っていなければ、エラーページで利用規約を表示する」

スクリーンショット 2017-11-08 09.05.46.png

エラー画面(xxx/error)で、「利用規約」にチェックが入っていなければ、個人情報を再表示。デフォルトはstyle.cssでdisplay:noneにしておく。

if($("#privacy-check input:checked").val()) {
}
else {
$('#frame-privarypolicy').css('display', 'block');
}

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2