[워드프레스] Quform에서 양식 제출 후 팝업 창 띄우기

Last Updated: 2018년 11월 20일 3개 댓글

Quform은 워드프레스에서 사용되는 프리미엄 문의 폼 플러그인입니다. Quform을 사용하면 드래그 앤 드롭(Drag & Drop) 방식으로 편리하게 필드를 추가할 수 있고, 사전 설정된 템플릿도 이용할 수 있어 보다 편리하게 고품질(High Quality)의 문의 양식을 만들 수 있습니다. 특히 사용자가 웹에서 제출한 내용이 이메일로 통지될 뿐만 아니라 관리자 페이지에서도 확인할 수 있어 이메일 오류로 인한 문제를 어느 정도 방지할 수 있습니다.

Quform 양식을 제출한 후에 사용자에게 메시지를 출력하려는 경우 iphorm_post_process 후크를 이용하면 편리합니다.

2018년 11월 업데이트: Quform이 업데이트되면서 이 글에서 설명하는 방법이 더 이상 작동하지 않습니다. 새로운 방법을 다음 글에 설명되어 있으니 새로운 방법을 참고해보시기 바랍니다.

워드프레스 Quform 문의 폼 제출 후 팝업 창으로 메시지 표시하기 [업데이트]

다음과 같은 코드를 테마 함수 파일에 추가하도록 합니다.

/* Quform에서 양식 제출 후 사용자에게 메시지 표시하기 */
/* Display "Thank you" message to users who submit messages in Quform forms */
function my_post_to_another_script($form)
{
$message = "감사합니다. 검토 후에 연락드리겠습니다!";
echo "<script type='text/javascript'>alert('$message');</script>";
}
add_action('iphorm_post_process_1', 'my_post_to_another_script', 10, 1);

위에서 iphorm_post_process_1에서 숫자 부분은 해당 양식의 Form ID로 대체하거나 iphorm_post_process처럼 Form ID 없이 사용할 수도 있습니다.

참고로 팝업 메시지를 띄우는 것은 간단한 javascript 스크립트를 적용했습니다.

// This is in the PHP file and sends a Javascript alert to the client (Source: stackoverflow)
// PHP에서 자바스크립트를 사용하여 경고 팝업 창 띄우기
$message = "사용자 메시지";
echo "<script type='text/javascript'>alert('$message');</script>";

그러면 아래와 같이 양식 제출 후에 메시지가 팝업 창 형식으로 표시됩니다.

Quform popup message - Quform에서 팝업 메시지 표시하기무료 컨택트 폼으로 Contact Form 7이 많이 사용되지만 보다 편리하게 레이아웃을 조정하고 프리미엄 기능을 이용하려면 Quform을 추천합니다.

참고:


3 개 댓글

Leave a Comment

  1. 안녕하세요! 정성스럽게 적어주신 내용을 토대로 시도해보았는데 제가 초보라 도움이 필요할 것 같아 댓글 남깁니다..!
    팝업창을 띄우기 위해 위에 적어주신 코드를 입력 후 사용자 메세지를 "정상적으로 접수 되었습니다. 감사합니다" 라는 메세지로 수정하여 적용시켰는데 양식 제출 후 팝업이 뜨는게 아니라 문의 접수 페이지를 들어가자마자 저 팝업이 뜹니다 ㅜㅜ 도와주세요...

    응답
    • 안녕하세요?

      위의 내용은 이전 버전에서 작동되고 새로운 버전에서는 작동하지 않는 것 같습니다.
      제가 시간이 날 때 글을 업데이트해보도록 하겠습니다.
      우선 QuformConfirmation 설정에서 컨택트 폼 제출 후 동작을 설정해보시기 바랍니다.

      Quform 컨택트 폼 제출 후 동작

      사용자/고객이 컨택트 폼을 제출하면 Thank you 페이지를 표시하는 등 여러 가지 옵션을 선택할 수 있습니다.

      응답
      • 아하.. 새로운버전에서는 작동이 안되는군요..! 친절한 답변 너무 감사합니다.
        말씀해주신 방법대로 일단은 제출 후 메인페이지로 이동시켜놓았습니다!
        추후 업데이트해주시는 내용으로 변경해놔야겠네요! 감사합니다!