컨택트 폼에서 문의 양식 제출 후 특정 페이지로 리디렉션시키는 방법 (업데이트)

이전 글에서 Contact Form 7과 Quform에서 문의 양식 제출 후 특정 페이지(가령: 감사 페이지)로 이동시키는 방법을 설명했습니다. 하지만 Contact Form 7에서는 on_sent_ok 후크를 2017년 말까지만 지원하고 현재는 지원이 중단되었습니다.

컨택트 폼 제출 후 Thank you 페이지 등 특정 페이지로 이동시키려는 경우 다음과 같은 방법을 사용할 수 있습니다.

Quform의 경우 이전에 설명한 방법을 이용하면 됩니다. "Contact Form 7/Quform에서 양식 제출 후 다른 페이지로 이동시키기"의 "Quform에서 양식 제출 후 이동하는 페이지 지정하기 (업데이트)" 부분을 참고해보세요.

[ 이 글은 2022년 2월 5일에 최종 업데이트되었습니다. ]

Contact Form 7의 커스텀 DOM 이벤트 사용하기

Contact Form 7에서는 제시하는 방법은 다음 자바스크립트를 사용하는 방법입니다.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/';
}, false );
</script>

http://example.com/은 원하는 페이지 URL로 대체하도록 합니다.

페이지 템플릿을 만들어 적용하기

위의 스크립트를 여러 가지 방법으로 적용할 수 있습니다. 페이지 템플릿을 만들어서 컨택트 폼이 삽입되는 페이지에만 적용할 수 있습니다. (혹은 스크립트를 enqueue시키는 방법도 가능합니다. 특정 페이지에만 스크립트를 로드하도록 설정하면 바람직할 것 같습니다.)

페이지 템플릿을 만드는 방법은 다음 글을 참고해보세요.

워드프레스에서 페이지 템플릿 만들기

스크립트를 </body> 바로 위에 추가하면 됩니다. </body> 태그는 보통 footer.php 파일에 있습니다. 그러므로 footer.php 파일을 하나 복사하여 footer-contact.php 파일로 바꾸어서 차일드 테마 폴더로 업로드하시고, 새로 만든 페이지 템플릿(가령 page-contact.php) 파일에서 get_footer('') 부분을 get_footer('contact')로 바꾸면 새로운 템플릿에서 푸터를 footer-contact.php 파일을 로드합니다. 이 경우 스크립트를 footer-contact.php 파일 내의 </body> 바로 위에 붙여넣습니다.

이 부분에 대한 세부 설명은 get_header() 사용법을 참고해보시기 바랍니다. get_footer()도 동일한 원칙이 적용됩니다. (이 부분이 잘 이해가 안 되시면 아래에 소개한 플러그인을 사용하면 편리합니다.)

그런 다음 컨택트 폼이 추가되는 페이지에서 페이지 템플릿을 스크립트가 포함된 템플릿으로 지정하도록 합니다.

페이지를 저장한 후에 테스트를 해보면 지정된 페이지로 리디렉션되는 것을 확인할 수 있을 것입니다. 저튼 테스트해보니 Submit 버튼을 누르면 "문의 폼이 전송되었다"(예: THANK YOU FOR YOUR MESSAGE. IT HAS BEEN SENT.)는 메시지가 매우 짧게 표시되었다가 지정한 페이지로 이동하네요.

테마 함수 파일에 후크로 추가하기

테마 함수 파일에 다음과 같은 코드를 넣는 것도 가능합니다. 차일드 테마를 만드시고 차일드 테마(자식 테마) 내의 함수 파일에 추가하세요.

add_action( 'wp_footer', 'redirect_cf7' );
 
function redirect_cf7() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
       location = 'https://www.example.com/thank-you/';
}, false );
</script>
<?php
}

여러 개의 폼을 사용하는 경우에는 다음과 같은 코드를 사용할 수 있습니다.

add_action( 'wp_footer', 'redirect_cf7' );
 
function redirect_cf7() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
   if ( '947' == event.detail.contactFormId ) { // 폼 947
    location = 'https://www.example.com/thank-you-1/';
    } else if ( '1070' == event.detail.contactFormId ) { // 폼 1070
        location = 'https://www.example.com/thank-you-2/';
    } else { // 이외의 모든 폼
        location = 'https://www.example.com/thank-you-3/';
    }
}, false );
</script>
<?php
}

플러그인 사용하기

페이지 템플릿을 만들어서 작업하려면 FTP에 접속해야 합니다. 그런 작업이 귀찮거나 편하지 않은 경우 Contact Form 7 Redirection 같은 플러그인을 사용할 수 있습니다.

가능하면 플러그인을 최소화하는 것이 좋지만, 필요한 경우 이 플러그인을 설치하여 테스트해보시기 바랍니다. 이 플러그인은 현재 7만 개 이상 사이트에 설치되어 사용되고 있습니다.

이 플러그인을 설치하면 컨택트 폼 편집 페이지에 "Redirect Settings" 탭이 추가되어 특정 페이지나 외부 URL을 지정할 수 있습니다.

페이지를 새 탭에서 열 수 있는 기능 등 몇 가지 추가 기능이 제공됩니다.