読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

WordPress ContactForm7 フォーム送信時に送信確認のチェックをリセットしたい

Contact Form 7 WordPress jQuery javascript

ContactForm7は送信前の確認したかのチェックボックスを設置することができます。
ただ、フォームを送信した後、エラーの有無にかかわらず送信確認がチェックされたままで、送信ボタンを押すことができる状態になったままになっています。
そこで、ContactForm7で用意されているtriggerのイベントを利用して、フォーム送信後に送信確認のチェックを外して送信ボタンをdisabledに戻すようにしてみました。

triggerを利用するので、サイトで使ってあるテーマのjsファイルなどに記述すればOKです。
利用するイベントについては、WordPress ContactForm7 フォーム送信時に任意のjsを実行したい。 - かもメモ を参照ください。

$(function() {
  var $form = $('.wpcf7-form');

  var onRresetAcceptance = function(evt) {
    var $form = evt.data.form,
        $submit = $form.find('input:submit');

    if( !$submit.length ) {
      return;
    }

    $form.find('input:checkbox.wpcf7-acceptance').each(function(i, elm) {
      var $acceptance = $(elm),
          is_invert = $acceptance.hasClass('wpcf7-invert'),
          is_checked = $acceptance.prop('checked');
      if( (is_invert && !is_checked)
       || (!is_invert && is_checked) ) {
          $acceptance.prop('checked', !is_checked).trigger('change');
          $submit.prop('disabled', true);
       }
    });
  };

  if( $form.length ) {
    $(document).on('submit.wpcf7', {form: $form}, onRresetAcceptance);
  }
});

フォーム送信時になぜか、submit.wpcf7が二回呼ばれてしまっているのですが、この様な感じでフォーム送信時に送信確認をリセットして送信ボタンをdisabledにする事ができました。


[参考]