폼 7 AJAX 콜백 문의

폼 7 AJAX 콜백 문의

한동안 이것저것 찾아봤지만, 내가 무엇을 달성하고 싶은지 개략적으로 설명하는 문서가 떠오르지 않는다.

워드프레스와 Contact Form 7 플러그인을 사용하고 있습니다.모든 것이 완벽하게 동작하고 있습니다.제가 원하는 것은 폼을 제출할 때 특정 javascript를 실행하는 것입니다.추가 설정에서 "on_sent_ok:"를 사용할 수 있다는 것을 알고 있습니다만, 이것은 폼이 실제로 송신되었을 경우에만 실행됩니다.

제가 하고 싶은 것은 폼이 OK를 제출하지 않았을 때 다른 javascript를 하는 것입니다.그 결과, 검증되지 않은 섹션으로 돌아갑니다.

다음 코드를 사용하여 폼 제출 중 1.7s를 클릭한 후 실행할 수 있지만 사용자가 느린 연결로 실행하고 있는 것처럼 약간 엉성합니다. 폼이 제대로 제출되기 전에 실행될 수 있습니다.

 $('.wpcf7-submit').click(function() {
setTimeout(function() {
    if ($('.fs1 input,.fs1 textarea').hasClass('wpcf7-not-valid')) {
        $('.pop-up-form').removeClass('pustep2').removeClass('pu-closing');
        $('.form-step').hide();
        $('.fs1').show();

    }
    if ($('.fs2 *').hasClass('wpcf7-not-valid')) {
        alert('error on page 2 - take user back to the area with issues')
    }
}, 1700);
});

폼 AJAX가 완성되었을 때 JS를 실행하기 위해 사용할 수 있는 기능이나 후크가 있습니까?

감사합니다!

버전 3.3에서는 새로운 jQuery 커스텀이벤트 트리거가 도입되었습니다.

신규: 5개의 새로운 jQuery 커스텀 이벤트 트리거 소개

• wpcf7: 개요
• wpcf7: 스팸
• wpcf7: 메일 수신자
• wpcf7: 메일 실패
• wpcf7: 개요

사용할 수 있습니다.wpcf7:invalid다음 예시와 같습니다.

$(".wpcf7").on('wpcf7:invalid', function(event){
  // Your code here
});

이 토픽에 대한 다양한 반응을 보면 플러그인 개발자는 5분마다 어떻게 동작해야 하는지에 대해 생각을 바꾸는 것 같습니다.현재(2017년 1분기) 작업 방법은 다음과 같습니다.

document.addEventListener( 'wpcf7mailsent', function( event ) {
  alert( "Fire!" );
}, false );

유효한 이벤트는 다음과 같습니다.

• wpcf7invalid - Ajax 양식 제출이 성공적으로 완료되었지만 입력이 잘못된 필드가 있기 때문에 메일이 발송되지 않았을 때 호출됩니다.
• wpcf7 spam: Ajax 양식 제출이 성공적으로 완료되었지만 가능한 스팸 활동이 탐지되어 메일이 전송되지 않았을 때 호출됩니다.
• wpcf7mailsent :Ajax 폼 전송이 정상적으로 완료되어 메일이 송신되었을 때 기동됩니다.
• wpcf7mailfailed - Ajax 양식 전송이 정상적으로 완료되었지만 메일 전송에 실패했을 때 호출됩니다.
• wpcf7submit : 다른 사고에 관계없이 Ajax 폼 전송이 정상적으로 완료되었을 때 기동됩니다.

소스 : https://contactform7.com/dom-events/

Martin Klasson이 지적한 바와 같이, '제출' 이벤트만 작동하는 경우가 있는데, 이는 대부분 폼에 의해 트리거되어 선택된 오브젝트에 버블이 표시되기 때문입니다.또한 제가 이해한 바로는, 이벤트에는 "비활성화"와 같은 다른 이름이 있습니다.wpcf7", "메일 발송"wpcf7" 등즉, 다음과 같이 동작합니다.

jQuery('.wpcf7').on('invalid.wpcf7', function(e) {
    // your code here
});

자세한 설명은 이쪽:문의 양식 7에서 오류에 대한 추가 설정을 추가하려면 어떻게 해야 합니까?

이 코드는 5.8.x 버전부터 기능합니다.

$('.wpcf7').on('wpcf7invalid wpcf7spam wpcf7mailsent wpcf7mailfailed', function () {  
   // your code here
});

난 이 일을 꽤 시도했고, 내가 발견한 것은 오직 그 순간에만Submit이벤트는 효과가 있습니다.이것은, 테마에 js의 문제/충돌이 있는 것을 의미합니다.

커스텀 테마의 경우는, jQuery와 jQuery의 이행이 모두 이 순서로 로드되어 있는지, 및 연락처 폼 7 js도 푸터에 로드되어 있는지 확인해 주세요.

있어야 합니다.wp_head , , , , 입니다.wp_footerphp 템플릿에 있습니다.

DOM 이벤트가 기능하려면 폼이 Ajax 모드여야 합니다.송신시에 페이지가 새로고침 되는 경우는, DOM 이벤트를 잊으십시오.URL에 폼 ID가 표시되어 있는 경우에도 마찬가지입니다.연락처 양식 JS가 로드되지 않았고 jQuery Migrate도 로드되지 않았기 때문에 처음에는 폼이 Ajax 모드가 아니었습니다.

DOM 이벤트가 올바르게 기동하려면 , 이 페이지에 표시된 대로 폼이 동작할 필요가 있습니다.그걸 손에 넣으면 효과가 있을 거예요.

이를 jQuery 3.3.1 및 Migrate 3.0.1에서 테스트한 결과 다음 이벤트청취자가 작동합니다.

document.addEventListener( 'wpcf7mailsent', function( event ) {
    console.log('mail sent OK');
    // Stuff
}, false ); 

테마가 원인인지 확인하려면 Wordpress의 기본 테마를 사용하여 폼을 테스트합니다. 문제가 해결되면 개발 문서에는 거의 나와 있지 않습니다.

dom 이벤트 동작을 wordpress contact form 7 플러그인으로 구현하려고 했지만, 여러 포럼에서 수정으로 제공되는 수많은 방법을 시도한 후 나만의 방법을 구현했습니다.

아래에 방법을 설명하겠습니다.이 방법에는 다음과 같은 몇 가지 단계가 포함됩니다.

1. 연락처 양식 작성
2. 이벤트 트리거와 폼 데이터를 캡처하기 위한 연락처 폼의 스크립팅
3. 스크립트 로드

1. 연락처 폼 작성

<label> Your name
    [text* cform7-name id:cform7-name autocomplete:name] </label>

<label> Your Number
    [tel* cform7-contact id:cform7-contact] </label>

<label> Course You are interested (Press Ctrl + Select to select Mutiple)
    [select* cform7-courses id:cform7-courses multiple "JAVA" "Python" "C#" "Others"] </label>

<label> Your message (optional)
    [textarea cform7-submit id:cform7-message] </label>

[submit id:cform7Submit "Submit"]

위의 샘플스크립트에서는 JS를 사용하여 이들 요소를 DOM 트리에서 쉽게 검색할 수 있습니다.[필드의 ID는 필요에 따라 변경할 수 있습니다]

2. 이벤트 트리거와 폼 데이터를 캡처하기 위한 연락처 폼의 스크립트 작성

document.addEventListener('DOMContentLoaded', function() {
   var frmButton = document.getElementById('cform7Submit');
   
   frmButton.addEventListener( 'click', function( event ) {
   var data = {
        name: document.getElementById('cform7-name').value,
        contact: document.getElementById('cform7-contact').value,
        courses: document.getElementById('cform7-courses').value,
        comment: document.getElementById('cform7-message').value
   };
        event.preventDefault();
        console.log('Event Data ', event);
        console.log('Data ', data);

   }, false );

}, false);

위 스크립트를 워드프레스 전개 다이렉토티에 저장합니다.는, 자체에 하고 있습니다( 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 。<worpress-root-directory>했습니다.cform7.js::/var/www/wordpress-site/cform7.js

이 작업을 마치면 스크립트를 로드해야 합니다.

3. 스크립트 로드

function cform7_script() { 
    wp_enqueue_script( 'cform7-js', '/cform7.js'); 
} 
add_action('wp_enqueue_scripts', 'cform7_script');

를 「아까운 사람」에.<worpress-root-directory>/wp-includes/functions.php

!!! 폼버튼 클릭 시(폼 송신 버튼)cform7-submit를 확인해야 콘솔에 기록된 데이터를 확인해야 합니다.

언급URL : https://stackoverflow.com/questions/27798264/contact-form-7-ajax-callback