source

Form 7 문의 - 이메일 발송 시 커스텀 기능 추가

gigabyte 2023. 3. 20. 23:17
반응형

Form 7 문의 - 이메일 발송 시 커스텀 기능 추가

그냥 장난치고 있어Wordpress / Contact Form 7.

메일 보내기 이벤트 성공 시 커스텀 Javascript 기능을 추가할 수 있나요?

연락처 폼 설정 페이지 하단의 추가 설정에 이 내용을 기입합니다.

on_sent_ok: "some js code here"

업데이트: 다음과 같은 함수를 호출할 수 있습니다.

on_sent_ok: "your_function();"

또는 코드를 작성합니다(이 페이지는 감사 페이지로 리다이렉트 합니다).

on_sent_ok: "document.location='/thank-you-page/';"

Contact Form 7은 문서 오브젝트에 버블업되는 다수의 Javascript 이벤트를 내보냅니다.버전 4.1에서는 contact-form-7/includes/js/scripts.js에 있습니다.jQuery를 사용하는 경우 다음과 같은 이벤트에 액세스할 수 있습니다.

$(document).on('spam.wpcf7', function () {
    console.log('submit.wpcf7 was triggered!');
});

$(document).on('invalid.wpcf7', function () {
    console.log('invalid.wpcf7 was triggered!');
});

$(document).on('mailsent.wpcf7', function () {
    console.log('mailsent.wpcf7 was triggered!');
});


$(document).on('mailfailed.wpcf7', function () {
    console.log('mailfailed.wpcf7 was triggered!');
});

이것을 시험해 보세요.

$( document ).ajaxComplete(function( event,request, settings ) {
   if($('.sent').length > 0){
       console.log('sent');
   }else{
       console.log('didnt sent');
   }

});

예 1:

on_sent_ok: "location = 'http://mysite.com/thanks/';"

2: 형식 스크립트:

<div id="hidecform">
<p>You name<br />
    [text* your-name] </p>
...
</div>

그런 다음 관리 페이지의 "추가 설정" 아래에 다음을 입력합니다.

on_sent_ok: "document.getElementById('hidecform').style.display = 'none';"

on_sent_ok은 권장되지 않습니다.

현재 Contact Form 7은 다음과 같은 이벤트청취자를 사용하고 있습니다.

<script type="text/javascript">
  document.addEventListener( 'wpcf7mailsent', function( event ) {
      if ( '11875' == event.detail.contactFormId ) { // if you want to identify the form
       // do something
      }
  }, true );
</script>

그런 다음 이를 wp_footer 액션에 추가합니다.

이렇게.

add_action( 'wp_footer', 'wp1568dd4_wpcf7_on_sent' );

function wp1568dd4_wpcf7_on_sent() { 
  // the script above
}

언급URL : https://stackoverflow.com/questions/11333183/contact-form-7-add-custom-function-on-email-send

반응형