source

제출 후 연락 양식 7 방향 전환

ittop 2023. 10. 24. 21:33
반응형

제출 후 연락 양식 7 방향 전환

연락처 양식 7을 사용하고 있으며 연락처 양식 제출에 성공한 후 다른 페이지로 리디렉션하려고 합니다.

연락처 양식 7 – 성공 페이지 리디렉션(https://nl-be.wordpress.org/plugins/contact-form-7-success-page-redirects/) 을 사용해 보았지만 플러그인이 테마와 호환되지 않고 일부 오류가 발생합니다.

해당 플러그인을 사용하지 않고 리디렉션하는 다른 방법이 있습니까?저도 이 https://contactform7.com/redirecting-to-another-url-after-submissions/ 을 찾았지만 구현할 수가 없습니다.또한 사이트의 모든 연락처 양식이 아닌 하나의 연락처 양식에만 리디렉션이 필요합니다.

감사해요!

j.

저도 같은 답변을 꽤 많이 봤습니다.중요한 질문은 양식 10개와 감사 페이지 10개가 있는데 이 솔루션이 작동하지 않을 때 나타납니다.

이것에 대한 해결책이 있습니다.

1단계: 양식에 숨겨진 필드를 만들고 그 안에 감사 페이지 URL을 추가합니다.

[hidden thankyouURL id:thankyouURL default:http://example.com/thank-you/ "http://example.com/thank-you/"]

2단계: DOM 이벤트에서 필드에서 감사 URL을 가져와 사용자를 리디렉션합니다.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    var thankyouURL = document.getElementById("thankyouURL").value;
    location = thankyouURL;
}, false );
</script>

바로 그겁니다.

functions.php에 아래 코드 추가 (테마에 위치 -> 테마 이름 폴더)

add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( e ) {
    var str = window.location.href;
    if( str.includes("flp") ){
        window.location.href = "http://www.YourWebsite.com/facebook-thank-you";
    } else if( str.includes("glp") ){
        window.location.href = "http://www.YourWebsite.com/google-thank-you";
    }
}, false );
</script>
<?php
}

저도 같은 일을 하려고 하지만 성공하지 못합니다.on_sent_ok은 더 이상 권장되지 않습니다.페이지 끝에 있는 이 페이지 DOM Events를 확인하면 특정 양식에 대한 코드를 찾을 수 있습니다.

같은 페이지에 여러 양식이 있으면 어떻게 합니까?현재 답변을 사용하면 문제가 될 수 있습니다(예를 들어 ID가 고유해야 하거나 리디렉션 ID가 페이지에 있지만 사용자가 다른 양식을 제출하는 경우).

아래 코드에서는 이러한 잠재적인 문제를 해결하려고 합니다.이 답변은 CF7의 숨겨진 폼 필드를 사용하지만, 새 폼을 만들 때마다 JS 코드를 편집할 필요 없이 각 폼에 대한 고유한 리디렉션 URL을 가질 수 있습니다(아래 코드와 같이 "url_redirect"와 같은 일관된 이름만 사용).

연락처 양식 7:

[hidden url_redirect "http://customurl.com?customvar=1"]

자바스크립트:

document.addEventListener( 'wpcf7mailsent', function( e ) {

    var url_redirect = '';

    var inputs = e.detail.inputs;
    for ( var i = 0; i < inputs.length; i++ ) {

        if( 'url_redirect' == inputs[i].name ) {//used for misc forms
            url_redirect = inputs[i].value;//set the redirect value from current submitted form
        }

    }

    //Check for redirect 
    if( url_redirect ){
        location = url_redirect;
    }

}, false );  

****쉬운 솔루션****

EventListener 스크립트를 사용하는 옵션은 제게 효과가 없었지만 아주 간단한 해결책을 찾았습니다.연락처 양식 7에 대한 리디렉션이라는 워드프레스 플러그인을 추가하면 됩니다(아래 스크린샷 보기).

enter image description here

플러그인을 설치한 후 작성한 연락처 양식(2번째 스크린샷 보기) 안으로 들어가면 "Redirect Settings"라는 탭이 새로 나타납니다.여기서 프로젝트의 이미 존재하는 사용자 지정 페이지 중 하나를 리디렉션 url로 설정하거나 목적을 위한 외부 url을 설정할 수 있습니다.리디렉션 지연 설정 등의 다른 옵션도 있습니다.

enter image description here

언급URL : https://stackoverflow.com/questions/43707576/contact-form-7-redirect-after-submission

반응형