워드프레스에서 WPForms를 사용하여 온라인 주문 양식 만들기

Last Updated: 2021년 05월 25일 6개 댓글

워드프레스에서 WPForms 플러그인을 사용하면 심플한 온라인 주문 양식으로 방문자나 고객으로부터 주문을 받을 수 있습니다.

워드프레스에서는 우커머스 (WooCommerce) 플러그인을 사용하여 전자 쇼핑몰을 만들 수 있지만, 간단한 주문을 받는 용도로는 과한 측면이 있습니다. 상품이나 서비스에 대하여 심플한 주문서 양식을 원하는 경우 컨택트 폼 플러그인을 활용할 수 있습니다.

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

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

WPForms는 드래그 앤 드롭 방식으로 쉽게 워드프레스 사이트에서 문의 양식을 만들 수 있는 플러그인으로 현재 300만 개가 넘는 사이트에 설치되어 사용되고 있습니다.

워드프레스용 컨택트 폼 플러그인으로 Contact Form 7이 잘 알려져 있지만, CF7으로 문의 양식을 만들려면 HTML과 CSS를 조금 알아야 원하는 레이아웃으로 문의 양식을 만들 수 있습니다.

WPForms는 필드를 끌어서 원하는 곳에 놓는 방식으로 쉽게 문의 폼을 만들 수 있어 사용자가 점점 늘어나고 있습니다. 워드프레스에서 심플한 문의 양식을 만들고 싶은 경우 이 두 플러그인 중 하나를 선택할 수 있습니다. 이외에도 Quform, Gravity Forms 등과 같은 유료 컨택트 폼 플러그인도 있습니다.

워드프레스에서 WPForms를 사용하여 온라인 주문 양식 만들기

WPForms는 Stripe, Authorize.Net, PayPal과 통합되므로 WPForms 플러그인을 사용하여 복잡한 과정 없이 주문을 받을 수 있습니다. 다만, 우리나라에서는 국내 페이팔 계정 간 송금이 정부에 의해 금지되어 있습니다. 이 때문에 사용에 제약이 있습니다. 만약 해외를 대상으로 하거나, 또는 해외 페이팔 계정이 있다면 복잡한 우커머스 플러그인을 사용하지 않고도 비교적 수월하게 결제를 받을 수 있습니다.

결제를 받으려면 WPForms 유료 버전이 필요합니다. WPForms 유료 버전에 대한 자세한 내용은 WPForms 사이트를 참고해보세요.

WPForms를 설치하고 활성화하였다면 다음과 같은 단계에 따라 주문 양식을 만들 수 있습니다.

단계 1: 주문 양식 만들기

WPForms에는 미리 만들어진 템플릿이 제공됩니다. 워드프레스 관리자 페이지 > WPForms > Add New를 클릭합니다.

주문서를 만들려는 경우 빈 양식(Blank Form)에서 시작해도 되지만, 미리 만들어진 Billing / Order Form 템플릿을 사용하면 편리합니다.

주문서 양식을 로드한 후에 양식을 원하는 대로 수정할 수 있습니다. 판매할 상품이나 서비스는 Available Items 부분에서 구성할 수 있습니다.

오른쪽의 Available Items 부분을 클릭하면 왼쪽에 라벨과 품목을 설정할 수 있도록 화면이 바뀝니다.

각 품목에 이미지를 표시하고 싶은 경우 Use image choices를 선택할 수 있습니다.

이 옵션을 선택하면 품목 이름과 함께 이미지를 업로드할 수 있습니다. 그러면 사용자들은 사진을 보고 품목을 주문할 수 있습니다.

필드를 추가하려면 왼쪽의 필드를 끌어다 오른쪽의 적절한 위치에 놓으면 됩니다. 양식을 완성했다면 상단의 SAVE 버튼을 클릭하여 양식을 저장합니다.

단계 2: 주문 양식 알림 구성하기

주문 양식 필드를 완성했다면 알림 (Notifications) 설정과 양식 제출 후 동작 (Confirmations) 설정을 구성해야 합니다.

알림 설정은 Settings > Notifications에서 설정할 수 있습니다.

From Email (발송자 이메일)은 해당 사이트의 도메인으로 된 이메일 주소를 설정해야 메일 배달 사고가 발생하지 않습니다. 예를 들어, example.com 사이트에 이 양식을 사용한다면 [email protected]과 같은 이메일 주소를 입력할 수 있습니다. 이 이메일을 없는 이메일이어도 상관 없습니다. (회신하지 말라는 의미로 noreply@도메인주소로 설정하는 것도 가능합니다.)

만약 회신을 받는 이메일 주소를 설정하고 싶다면 Reply-To에 이메일 주소를 입력하도록 합니다.

여러 명이 받도록 알림을 구성하고 싶은 경우에는 워드프레스 WPForms에서 여러 명의 수신자에게 알림 이메일 보내기를 참고하시기 바랍니다.

주문서를 제출한 주문자에게 확인 이메일을 보내는 것이 일반적일 것입니다. 수신자 메일 주소에 주문자의 이메일 주소를 추가하려면 Send To Email Address 필드의 Show Smart Tags를 클릭합니다.

그러면 수신자 이메일 주소 필드에 사용 가능한 필드가 표시됩니다. 아래의 경우 Email을 클릭하면 해당 필드가 수신자 이메일 주소로 설정됩니다.

유료 버전에서는 여러 개의 알림(Notification)을 설정할 수 있습니다. 수신자에 따라 다른 내용을 전달하고 싶은 경우 여러 개의 알림을 구성할 수 있습니다.

단계 3: 주문 양식 제출 후 동작 설정

Settings > Confirmations에서 사용자가 주문서를 제출한 후에 메시지를 표시할 것인지, 아니면 감사 페이지나 다른 URL가 표시되도록 할 것인지를 설정할 수 있습니다.

Confirmation Type에서 다음 세 가지 옵션 중에서 선택할 수 있습니다.

  • Message (메시지). WPForms에서 기본 확인 유형입니다. 고객이 주문 양식을 제출하면 여기에서 설정한 문구가 표시되어 주문이 처리된 것으로 확인할 수 있게 됩니다.
  • Show Page (페이지 표시). 해당 사이트 내의 특정 페이지를 표시합니다. 예를 들어, 감사 페이지 (Thank You Page)를 만들어 지정할 수 있습니다.
  • Go to URL (Redirect). 주문 후에 다른 사이트로 사용자가 이동하게 됩니다(리디렉션).

Message를 선택하면 아래에 메시지를 직접 입력할 수 있습니다. Show Page 옵션을 선택하면 사이트 내의 페이지를 선택할 수 있는 드롭다운이 나타납니다. 세 번째 옵션을 선택하면 사용자가 리디렉션될 URL을 직접 입력할 수 있습니다.

단계 4: 결제 설정하기

마지막으로 고객으로부터 비용을 결제 받을 수 있도록 결제 방법을 설정해야 합니다.

결제 방법으로 PayPal Standard, Stripe, Authorize.Net을 이용할 수 있습니다. 신용카드로 결제를 받으려면 Stripe(스트라이프)를 이용하면 되지만, 우리나라에서는 이용할 수 없고 미국 통장이 개설되어 있어야 신청이 가능하다고 합니다.

우리나라에서는 페이팔을 이용할 수 있습니다. 하지만, 위에서 언급했듯이 우리나라에서는 규정 때문에 국내 페이팔 계정 간에는 송금이 금지되어 제한적으로 사용이 가능합니다.

결제 옵션을 선택하지 않고 무통장 입금 방식으로도 가능합니다.

단계 5: 페이지에 주문서 삽입하기

이제 WPForms로 만든 주문서를 페이지에 추가하여 사이트에 표시할 수 있습니다. WPForms는 블록 에디터용 위젯을 제공하므로 블록 에디터(구텐베르크)에서 쉽게 주문서를 페이지에 추가할 수 있습니다.

그리고 숏코드를 복사하여 원하는 곳에 붙여넣는 방식으로 주문서를 추가하는 것도 가능합니다. 위젯이 제공되지 않는 페이지 빌더를 사용하는 경우에 숏코드 방식으로 추가하면 됩니다.

일부 페이지 빌더에서는 WPForms 위젯이 지원됩니다. 확인해보니 엘리멘터 페이지 빌더(Elementor Page Builder)Beaver Builder에서는 위젯이 제공되므로 요소 검색에서 "wpforms"를 검색하여 WPForms 양식을 곧바로 추가할 수 있습니다.

참고


6 개 댓글

Leave a Comment

  1. 안녕하세요 항상 도움만 받고 있어서..죄송하고 감사해 하고 있습니다. 제품 주문하는 시스템을 만들려고 합니다. 방식은 엑셀 셀(WPDATATABLE)처럼 화면에 나오고 프런트엔드방식으로 한셀을 클릭하면 검색창이 나오고 제품을 검색 클릭하면 선택셀에 품목이 들어가고, 발주 수량 넣고, 다음셀을 클릭하면 다시 제품 검색창이 나오고, 발주가 끝나면 send버튼을 누르면 발주를 넣는 시스템을 만들려고 합니다. 워드프레스 플러그인에서 찾아봤지만 마땅하게 없고, 혹시 플러그인 추천이나, 아니시면 개발 의뢰가 가능하면 대략 개발 비용은 얼마나 할지 문의드립니다.

    응답
  2. 유익한 글 감사합니다.
    이 오더폼 제작 시 상품항목을 넣을 때
    [상품명] [가격] 그리고 수량까지 선택할 수 있도록은 불가할까요?
    제품 다중선택은 되는데 수량 설정이 없네요... ㅠㅠ 한개씩만 살 수 있는 폼구성인가요 ㅠㅠ

    응답