WPForms – 사용이 편리하고 템플릿을 제공하는 워드프레스 컨택트 폼 플러그인

0

WPForms는 드래그 앤 드롭 방식으로 쉽게 문의 폼을 만들 수 있는 워드프레스용 컨택트 폼 플러그인입니다.

가장 많이 사용되는 무료 컨택트 폼 플러그인으로 Contact Form 7이 있습니다. Contact Form 7 플러그인은 HTML과 CSS를 조금 알면 원하는 레이아웃의 문의 폼을 만들 수 있지만, 초보자가 정교한 문의 폼을 만들기에는 쉽지 않을 수 있습니다.

WPForms 무료 버전은 현재 100만 개 이상 사이트에 설치되어 사용되고 있습니다. 무료 버전에서는 드래그 & 드롭 방식으로 컨택트 폼을 쉽게 만들 수 있고 기본적인 템플릿이 제공됩니다. 하지만 조건부 로직(Conditional Logic), 결제 통합(페이팔 등), 컨택트 폼 템플릿 등 추가 기능을 이용하려면 Pro 버전을 이용해야 합니다.

WPForms 플랜

WPForms Pro 버전

저는 WPFroms에서 조건부 로직을 적용해야 하는 작업 때문에 Basic을 최근 구입했습니다. Basic 버전에서는 사전 구성된 템플릿이 무료 버전보다 조금 많습니다. 하지만 생각보다는 그리 많지 않습니다. 상위 버전에서는 더 많은 템플릿이 제공되는 것 같습니다.

WPForms 둘러보기

WPForms를 설치하고 워드프레스 알림판 > WPForms > All Forms로 이동한 다음 Add New를 클릭하면 미리 구성된 템플릿 리스트 화면이 표시됩니다.

워드프레스 컨택트 폼 WPForms 플러그인

제공되는 템플릿 중 하나를 선택하거나 “blank form”을 클릭하여 내용이 없는 양식에서 시작할 수 있습니다.

무료 버전에서는 다음 네 가지 템플릿이 제공됩니다.

  • Blank Form (내용이 없는 양식)
  • Simple Contact Form (단순한 컨택트 폼)
  • Newsletter Signup Form (뉴스레터 가입 양식)
  • Suggestion Form (제안서)

Basic 플랜에서는 위의 네 가지 외에 다음 양식이 추가로 제공됩니다.

  • Request A Quote Form (견적 요청서)
  • Donation Form (기부 양식)
  • Billing / Order Form (대금청구서/주문서)

상위 버전에서는 이외에 다양한 템플릿이 제공된다고 하네요. 일부 폼에는 결제 기능에 통합되어 있습니다. 예를 들어, Billing/Order Form을 선택하면 다음과 같은 메시지가 표시됩니다.

결제 제공자 선택

Pro 버전에서는 페이팔, Stripe 등을 통해 결제를 받을 수 있습니다. 우커머스를 사용하지 않고 페이팔로 결제를 받으려는 경우에 유용할 것 같습니다.

WPForms 컨택트 폼

Billing/Order Form을 로드하면 위와 같은 편집 화면이 표시됩니다. 왼쪽에서 Standard Fields와 Fancy Fields에서 원하는 필드를 끌어다가 오른쪽으로 놓으면 됩니다.

필드를 수정하려면 수정할 필드를 마우스로 클릭하면 됩니다.

WPForms 필드 수정

라벨, 항목 이름 및 값을 수정할 수 있습니다. 각 필드에 Advanced OptionsConditionals 옵션이 제공됩니다.

WPForms 고급 옵션

Advanced Options(고급 옵션)에서는 필드 크기를 선택할 수 있고 Placeholder 텍스트와 CSS 클래스를 입력할 수 있습니다. 그리고 Hide Label 옵션이 제공됩니다.

필드 조건부 옵션 - WPForms

Conditionals에서는 해당 필드가 표시되거나 표시되지 않도록 하는 조건을 부여할 수 있습니다. 특정 선택을 하는 경우에 필드를 표시하거나 숨기려는 경우에 유용합니다.

Settings 페이지에는 일반적인 설정과 알림 설정, 그리고 양식 제출 후 동작에 대한 옵션을 설정할 수 있습니다.

WPForms 설정

Notifications 페이지에서는 알림을 수신할 이메일 주소 등을 설정할 수 있습니다.

WPForms 알림 설정

Send To Email Address에 문의 내용을 수신할 이메일 주소를 입력합니다. Email Subject, From Name 등도 지정합니다. From Email에서는 해당 도메인으로 된 이메일 주소를 입력해야 스팸으로 분류되지 않습니다. 예를 들어, example.com이 도메인인 경우 info@example.com과 같은 이메일 주소를 입력할 수 있습니다. 실제로 없는 이메일 주소라도 상관 없습니다.

Reply-To 필드: Show Smart Tags를 클릭하여 발신자의 이메일 주소를 추가하면 편리합니다. 그러면 수신된 이메일에서 곧바로 회신이 가능합니다.

Confirmation에서는 Confirmation Type을 선택할 수 있습니다.

WPForms Confirmation 설정

다음 세 가지 유형 중에서 선택할 수 있습니다.

  • Message – 양식 제출 후 메시지 표시
  • Show page – 양식 제출 후 페이지 표시. 이 옵션을 선택하면 표시할 페이지를 선택하는 드롭다운이 표시됩니다.
  • Go to URL (Redirect) – URL로 이동

설정을 저장하고 오른쪽 상단의 Embed를 클릭하면 쇼트코드가 표시됩니다.

WPForms 쇼트코드

이 쇼트코드를 원하는 페이지 등에 추가하면 양식이 표시됩니다. 아바다 테마Enfold 등 페이지 빌더를 사용하는 테마에서는 텍스트 요소에 입력하면 됩니다.

WPForms 쇼트코드 입력

Billing/Order Form 기본 템플릿을 그대로 사용할 경우 다음과 비슷하게 표시됩니다.

워드프레스 주문서 양식

주소 필드에서 Country United States of America로 기본적으로 선택되어 있네요. 이 옵션을 변경하는 방법은 WPForms에 문의해보아야겠습니다. (주소에서 영문으로 남겨진 부분은 Loco Translate 같은 플러그인을 사용하면 번역이 가능할 것입니다.)

구글 크롬에서 이름, 전화번호, 주소 등의 정보가 저장되어 있다면 저장된 설정을 선택하여 자동으로 정보를 입력할 수 있습니다.

WPForms 컨택트 폼

마치며

워드프레스에서는 다양한 컨택트 폼 플러그인이 있습니다. 무료 플러그인인 Contact Form을 이용하거나 WPForms의 무료 버전을 이용해볼 수 있습니다.

조건부 로직 기능과 사전 구성된 템플릿 등을 이용하려면 유료 버전을 고려해볼 수 있습니다. 이외에도 Quform, Gravity Forms 등 다양한 플러그인이 있습니다. 개인적으로는 Quform이 깔끔하고 꼭 필요한 기능이 탑재되어 있어서 자주 이용하고 있습니다.

참고:

*일부 글에 제휴링크가 포함될 수 있습니다.기부를 통해 블로그 운영을 후원하실 수 있습니다.

Related Posts

댓글 남기기