워드프레스 Contact Form 7 데이터 표시하기

워드프레스 Contact Form 7 문의 양식을 제출한 후 이메일로 문의 사항이 전송됩니다. 이와는 별도로 문의 제출 시 사용자가 제출한 데이터를 프런트엔드에 표 형식으로 표시되도록 하고 싶은 경우가 있을 수 있습니다. 개발자라면 비교적 쉽게 이런 기능을 쉽게 구현할 수 있겠지만 일반 사용자라면, Contact Form 7에서 단순히 보여주기 위한 목적으로 프런트엔드에 제출 항목을 테이블 형식으로 표시하고 싶은 경우 Contact Form 7 Views 플러그인을 활용할 수 있습니다.

워드프레스 Contact Form 7 데이터를 프런트엔드에 표시하는 방법

워드프레스 Contact Form 7 데이터를 프런트엔드에 표시하기

컨택트 폼을 통해 고객들로부터 견적 의뢰나 서비스 의뢰를 받는 경우 고객들의 문의가 많다는 것을 보여주기 위한 목적이라면 워드프레스에서는 Contact Form 7 플러그인과 함께 CF7 Views 플러그인을 사용할 수 있습니다.

이와 관련하여 컨택트 폼으로 제출된 데이터를 케이보드 게시판에 자동으로 게시되도록 하는 방법을 원하시는 분들이 계셔서 이런 작업을 종종 수행했습니다. 하지만 단순히 보여주기 위한 목적이라는 굳이 KBoard 게시판을 사용하지 않고 Contact Form 7 Views를 사용하는 것도 괜찮은 것 같습니다.

CF7 Views의 무료 버전에서는 필터링 기능이 제공되지 않고 데이터를 테이블 형식으로만 나열할 수 있습니다.

다음은 플러그인 개발자가 밝힌 주요 기능입니다.

주요 기능:

  • 직관적인 사용자 인터페이스
  • 쉬운 사용 - 드래그 & 드롭
  • View에 표시할 폼 필드 설정 옵션
  • 테이블 제목의 라벨 사용자 정의 옵션
  • 페이지에 표시할 제출 항목 개수 설정 옵션
  • 테이블 (표) 위나 아래에 페이지 번호 추가
  • 페이지네이션 정보 표시
  • View 내에 사용자 정의 HTML 추가

하지만 무료 버전에서는 사용자 정의 HTML 추가하는 옵션은 찾을 수가 없습니다.

PRO 버전의 기능

PRO 버전에서는 무료 버전의 기능 외에 다음과 같은 기능을 이용할 수 있습니다.

  • 리스트 뷰 형식 (List View Format)
  • View의 위나 아래에 검색 폼(Search Form)을 추가하여 필드 값에 따라 제출 항목을 필터링/검색 가능
  • 필드 값 기준으로 제출 항목 필터링
  • 필터 값을 통해 Contact Form 7 제출 항목 정렬

또한, 무료 버전에서는 해당 문의 폼을 통해 제출된 모든 문의 항목이 표에 표시되지만, 유료 버전에서는 Display only Approved Submissions? (승인된 제출 항목만 표시?) 옵션이 제공됩니다.

Contact Form 7 Views 설치

워드프레스 관리자 페이지에서 플러그인 > 새로 추가에서 'Contact Form 7 Views – Drag & Drop Form Submissions View builder for Contact Form 7'를 검색하여 플러그인을 설치할 수 있습니다. 플러그인을 찾을 수 없으면 검색 옵션에서 '글쓴이'로 설정하고 'Webholics'로 검색하면 찾을 수 있을 것입니다.

이 플러그인을 설치하고 활성화하면 대시보드에 CF7 Views라는 메뉴가 추가됩니다. CF7 Views > Add New를 클릭하여 새로운 뷰를 만들 수 있습니다.

워드프레스 CF7 Views 플러그인 - Contact Form 7 데이터 표시하기

사용은 직관적이라서 조금 다루어보면 쉽게 활용이 가능할 것입니다.

Select View Source (①)에서 불러올 컨택트 폼 7 폼을 선택하도록 합니다.

Select View Type (②)에서 프런트엔드에 데이터 표시되는 포맷을 선택할 수 있습니다. 무료 버전에서는 Table (표) 유형만 선택이 가능합니다. 유료 버전에서는 List (목록) 유형을 선택할 수 있습니다. 그리고 DataTable이라는 항목이 있지만 여기에 대해서는 별다른 설명이 없네요.

Before Submission List (③)와 위의 그림에서는 보이지 않지만 After Submission List에서는 테이블 위 아래에 페이지네이션 (페이지번호 매김)을 표시하도록 선택할 수 있습니다.

Submission List (④)에서는 표에 표시할 컨택트 폼 필드를 선택할 수 있습니다. 레이블은 사용자 지정이 가능합니다.

워드프레스 CF7 Views - 컨택트 폼 데이터 표시하기

After Submission List (⑤)에서는 표 아래에 페이지네이션과 페이지네이션 정보를 표시할 수 있습니다.

Advance Settings (⑥)에서는 페이지 당 표시할 항목 개수, 정렬 방향 (오름차순, 내림차순)을 설정할 수 있으며, PRO 버전의 경우 필터링 옵션과 Display only Approved Submissions? (승인된 제출 항목만 표시) 옵션을 선택할 수 있습니다.

실제 작동을 다음 영상에서 확인할 수 있습니다.

참고로 이 플러그인을 사용하려면 Flamingo 플러그인을 함께 설치해야 합니다. Flamingo는 Contact Form 7 양식을 통해 제출된 정보를 DB에 저장하는 역할을 합니다.

다른 방법

Gravity Forms를 사용하는 경우 GravityView를 사용하여 Gravity Forms 양식을 통해 제출한 데이터를 프런트엔드에 표시하는 것이 가능합니다.

또 다른 방법으로, wpDataTables 플러그인을 사용하여 컨택트 폼 양식을 통해 제출된 데이터를 프런트엔드에 표시하는 것도 가능합니다. 이 플러그인을 사용할 경우 컨택트 폼 플러그인의 종류에 관계 없이 컨택트 폼 플러그인에서 제출한 데이터가 DB에 저장이 되면 데이터베이스에서 데이터를 끌어와서 표시할 수 있습니다.

아래 영상은 Quform으로 제출한 데이터를 DB에 저장한 다음, wpDataTables 플러그인을 사용하여 프런트엔드에 표시하는 예를 보여줍니다.

wpDataTables는 가격이 제법 비싸지만 개발자들에게 유용한 툴일 수 있습니다. Gravity Forms 등 많은 플러그인이 연간 요금제이지만 wpDataTables는 코드캐년(Codecanyon)에서 판매되기 때문에 1개 사이트에서 영구적으로 사용이 가능하고 업데이트도 받을 수 있습니다. 특히, MySQL 데이터베이스에서 데이터를 추출할 때 유용하게 활용할 수 있습니다.

마치며

문의나 서비스 의뢰가 많다는 것을 보여 주기 위한 목적으로 문의 양식을 통해 고객이 문의를 제출했을 때 실시간으로 리스트로 표시되도록 하고 싶은 경우에 위에서 소개한 플러그인을 사용할 수 있습니다.

참고


댓글 남기기

* 이메일 주소는 공개되지 않습니다.