워드프레스 Contact Form 7 문의 양식 제출 후 다른 URL로 이동하기

Last Updated: 2020년 11월 14일 | | 댓글 남기기

Contact Form 7은 워드프레스에서 사용자들로부터 문의를 받을 때 사용되는 인기 컨택트 폼 플러그인입니다. Contact Form 양식 제출 후 다른 URL로 이동시키고 싶은 경우가 있습니다. 그런 경우 개발자가 소개하는 자바스크립트를 사용하거나 플러그인을 사용하여 양식 제출 후 다른 페이지나 URL로 리디렉션시킬 수 있습니다.

워드프레스 Contact Form 7 양식 제출 후 다른 URL로 이동하기

워드프레스 Contact Form 7 문의 양식 제출 후 다른 URL로 이동하기

사이트에서 방문자나 고객이 문의를 제출하면 감사 페이지(Thank You Page)가 표시되는 경우가 많습니다. 많은 워드프레스 컨택트 폼 플러그인에서 양식 제출 후 표시할 페이지나 URL을 지정할 수 있는 옵션을 제공합니다. Contact Form 7에는 그런 기능이 기본적으로 내장되어 있지 않지만 간단한 스크립트를 사용하거나 플러그인을 사용하여 문의 제출 후 다른 페이지나 URL로 리디렉션시키는 것이 가능합니다.

Javascript 사용

Contact Form 7 개발자는 가장 간단한 방법으로 Contact Form 7의 커스텀 DOM 이벤트를 사용하여 자바스크립트를 실행하는 것을 제시하고 있습니다.

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

위의 스니펫을 테마의 템플릿 파일에 추가하도록 합니다. 보통 footer.php 파일의 </body> 태그 바로 위에 추가할 수 있습니다. 하지만 이 경우 전체 사이트에서 위의 스크립트가 실행되므로 바람직하지 않은 것 같습니다. 페이지 템플릿을 만들어 컨택트 폼 양식이 사용되는 페이지에만 적용하도록 하면 사이트에 미치는 영향을 최소화할 수 있을 것입니다.

또는, "워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법"을 참고하여 특정 페이지에서만 위의 스크립트를 실행하도록 할 수 있습니다.

기존의 on_sent_ok 및 on_submit 후크는 보안 문제로 Contact Form 7 5.0 버전부터 제거되었습니다.

출처:

플러그인 사용하기: Redirection for Contact Form 7 애드온

위의 방법을 활용하는 데 어려움을 겪는 경우 플러그인을 사용할 수 있습니다. 이런 기능을 위해 플러그인을 사용하는 것이 그리 바람직하지는 않을 수 있지만 초보자가 쉽게 이용할 수 있는 방법입니다.

워드프레스 Redirection for Contact Form 7 애드온 플러그인

Redirection for Contact Form 7은 Contact Form 7용 애드온 플러그인으로 이메일을 성공적으로 전송한 후에 설정된 페이지로 리디렉션시켜주는 옵션을 추가합니다.

워드프레스 관리자 페이지에서 플러그인 > 새로 추가로 이동하여 'Redirection for Contact Form 7'을 검색하여 플러그인을 설치하고 활성화하면 연락처 양식 편집 화면(연락처 > 새로 추가에서 새 양식을 만들거나 연락처 > 연락처 양식에서 기존 양식 선택)에 Redirect Settings 탭이 추가됩니다.

워드프레스 Contact Form 7 양식 제출 후 감사 페이지 등으로 리디렉션시키기

Redirect Settings (리다이렉트 설정)에서 연락처 양식 제출 후 이동할 페이지로 사이트 내의 다른 페이지를 지정하거나 Use external URL (외부 URL 사용)을 체크하고 External URL에 직접 외부 URL을 입력할 수 있습니다.

이 플러그인에는 양식의 필드를 URL 쿼리 파라미터(parameter)로 전달하는 기능도 제공합니다. URL 파라미터 활용 방법은 워드프레스 Quform/Gravity Forms에서 URL로 파라미터를 전달하는 방법을 참고해보세요. 이 기능을 잘 활용하면 URL에 특정 정보를 파라미터로 추가하여 전달할 수 이어 매우 유용합니다.

그리고 Here you can add scripts to run after form sent successfully 아래에 양식 제출 후 실행할 스크립트를 추가하는 것도 가능합니다.

이 플러그인은 2020년 8월 현재 20만 개 이상의 사이트에 설치되어 사용되고 있습니다. Redirection for Contact Form 7은 무료 버전과 프로 버전이 있습니다.

Redirection for Contact Form 7의 Pro 버전

유료 버전에서는 다음과 같은 기능이 추가로 제공됩니다.

  • 회원가입 양식
  • 로그인 양식
  • Mailchimp (메일침프) 리스트에 추가
  • 조건부 오류 관리
  • 리다이렉트 규칙
  • 각 액션(action)에 대한 조건부
  • 조건부 로직으로 이메일 알림 관리
  • 조건부 로직으로 커스텀 JavaScript 이벤트 실행
  • 원격 서버로 데이터 전송 (서드파티 통합)
  • 리모트 서버로 RESTful Json/XML 전송
  • 리모트 서버로 RESTful POST/GET 전송
  • 페이스북 컨버전 픽셀(Facebook conversion pixels) 관리
  • 구글 애드워즈 컨버전 픽셀 (Google Adwords conversion pixels) 관리
  • Leads Manager - 리드(잠재 고객)를 데이터베이스에 저장
  • 페이팔 통합

마치며

Quform이나 WPForms와 같은 컨택트 폼 플러그인에서는 문의 제출 후 이동할 페이지나 URL을 지정할 수 있지만, Contact Form 7에서는 자바스크립트를 이용하거나 플러그인을 사용하여 양식 제출 후 다른 페이지나 URL로 사용자를 리디렉션시킬 수 있습니다.

Contact Form 7은 HTML을 사용하여 문의 폼을 만들 수 있어 커스텀하기에 좋은 무료 컨택트 폼 플러그인 같습니다. 사용이 쉬운 문의 플러그인을 원하는 경우 WPForms나 유료 플러그인인 Quform을 사용할 수 있습니다.

참고

댓글 남기기

Leave a Comment