워드프레스 컨택트폼 플러그인 Contact Form 7 발송 페이지 전환

간단한 워드프레스 컨택트폼 수정 작업 의뢰 ( 발송 페이지 전환 )가 들어왔습니다.
상담문의 메일 발송 후 원래 페이지가 아닌 별도의 발송 완료 페이지로 전환이 될 수 있게 해달라는 것이었습니다.
Contact Form 7 의 경우 메일이 발송되고 나면 발송 성공 메시지만 나오고 다른 페이지로 이동을 하지 않기 때문에,
가끔씩 마케팅을 위해 구글 어날리틱스나 페이스북 픽셀 전환 코드를 삽입할 때 어려움을 겪으시는 경우가 있습니다.
이런 경우 별도의 발송완료 페이지를 만들어 그 페이지에 전환 추적 코드를 넣는 경우가 있으신데,
저는 단순히 다른 페이지로 전환 될수 있도록 설정만 해드렸기 때문에 확실치는 않지만 이번에도 그런 의도였던 것 같습니다.

컨택트폼7에서 발송 후 다른 페이지로 이동을 하게 하는 방법은 여러가지가 있습니다. 플러그인을 이용해도 되고, 코드를 이용해도 됩니다. 플러그인을 이용하는 것이 가장 쉬운 방법이고, 플러그인 설치가 싫으신 분들은 function.php ( 함수 파일 ) 에 아래 코드를 붙여 넣어주시면 됩니다.

1. 플러그인 이용 발송 페이지 전환

Contact Form 7 Redirection 이 플러그인을 설치하면 컨택트폼 편집 화면에 [Redirection] 탭이 생깁니다. 거기서 원하는 페이지 주소를 넣어주면 됩니다.
Contact Form 7 – Success Page Redirects ( 구버전 )

워드프레스 컨택트폼7 발송 페이지 전환

2. 코드이용 ( 컨택트폼7 4.9 버전 이상 )

아래 코드를 function.php 파일 하단에 붙여 넣어주면 됩니다.

[wpsm_codebox style=”1″]add_action( ‘wp_footer’, ‘mycustom_wp_footer’ ); function mycustom_wp_footer() { ?> script type=”text/javascript”>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
location = ‘이동할 페이지 url 주소’;
}, false );
<?php }[/wpsm_codebox]

3. 컨택트폼 기본 설정 이용 ( 컨택트폼 구버전 일때 사용. 최신버전에서는 지원 안함. )

z컨택트폼7 구버전일 때는 기본 설정에서 [Additional Settings] 탭에 아래 코드만 삽입을 해줘도 쉽게 페이지 전환이 됩니다.

[wpsm_codebox style=”1″]on_sent_ok: “location = ‘이동하고자하는 페이지 주소'”;[/wpsm_codebox]

4. 자바스크립트 코드 이용

1번 방법과 거의 동일하지만 자바스크립트 코드를 그냥 헤더 파일이나 해당 페이지 빌더에 붙여넣어주면 되서 가장 단순합니다.

[wpsm_codebox style=”1″]script>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
location = ‘이동하고자하는 페이지 주소’;
}, false );
[/wpsm_codebox]

그 외 좀더 복잡한 경우들도 있습니다. 예를 들어 각 폼마다 다른 완료 페이지로 이동을 하게 한다거나 하나의 폼에서 경우에 따라 다른 완료 페이지로 이동을 하게 하는 경우들입니다. 이런 경우는 많이 없기는 하지만, 위 1번 플러그인을 이용을 하거나, 아래 페이지들의 내용을 참고하시면 됩니다.