이번 포스트에서는 WPForms 워드프레스 폼빌더 사용법 을 알아보겠습니다. 웹사이트에서 필수 기능 중에 하나가 문의 게시판 폼, 예약 폼 혹은 설문조사 폼 등의 폼을 작성하고 그 내용를 메일로 보내는 기능일 겁니다. 워드프레스 폼빌더 플러그인으로는 오래된 Contact Form 7 부터 WPForms, 닌자 폼 등이 가장 많이 사용되고 있는데요. WPForms 은 제가 사용해봤지만, 아래와 같은 장점이 있어 초보자들도 쉽게 사용할 수 있게 되어 있더군요.
드래그 앤 드롭 방식
예제 템플릿을 이용한 쉬운 폼 작성
모바일 반응형 디자인
쉬운 메일 제목/내용 편집
1. WPForms 워드프레스 폼빌더 설치
WPForms 워드프레스 폼빌더 를 우선 설치 해보겠습니다.
- 워드프레스 관리자화면의 왼쪽메뉴에서 ‘플러그인’ > ‘설치된 플러그인’ 메뉴 선택.
- ‘플러그인’ 화면의 위의 ‘새로 추가’ 버튼 클릭.
- ‘플러그인 추가’ 화면의 오른쪽에 있는 검색란에 ‘WPForms’를 입력.
- 검색된 목록에서 ‘Contact Form by WPForms’ 의 ‘지금 설치’ 버튼 클릭.
- 설치 완료된 후 ‘활성화’ 버튼을 클릭.
2. 간단한 문의 폼 만들기
설치가 완료 되었으면, 간단한 문의 폼을 만들어 볼까요.
왼쪽 메뉴에서 ‘WPForms’> ‘Add New’ 메뉴를 선택하면 폼 선택 화면이 나타납니다.
무료 사용자에게 제공되는 폼 템플릿은 4가지 종류가 있네요.
- Blank Form
- Simple Contact Form
- Newsletter Signup Form
- Suggestion Form
저희는 가장 많이 사용되는 Simple Contact Form을 선택해보겠습니다. 위의 그림처럼 ‘Form Name’에 원하는 폼 제목을 입력한 후, ‘Simple Contact Form’을 선택합니다.
2.1 입력 필드 추가
폼빌더 화면에서 입력 필드를 추가 해보죠.
왼쪽 ‘Standard Fields’에 있는 ‘Single Line Text’를 드래그 한 후에 오른 쪽 폼의 원하는 위치에 드롭하면 필드가 추가 됩니다. 쉽죠?^^
위에서 추가한 입력 필드를 클릭하면 왼쪽 패널이 필드 수정화면으로 변경되고, 필드의 이름을 변경할 수 있습니다. ‘Telephone’이라고 할까요.
2.2 입력 필드 이동
입력 필드의 위치를 변경하고 싶으면 그 입력 필드를 드래그 한 후 원하는 위치로 드롭하면 위치가 변경됩니다.
2.3 입력 필드 삭제
입력 필드를 삭제 하고 싶은 경우에는 필드의 오른쪽 위에 있는 ‘쓰레기통’ 아니콘을 클릭한 후, 팝업창에서 ‘OK’ 버튼를 클릭하면 됩니다.
2.4 폼 저장
마지막으로 이제까지 변경한 내용을 저장하기 위해서 화면 오른쪽 위의 ‘SAVE’ 버튼을 클릭합니다.
3. Notification 메일
폼의 목적은 문의 내용을 메일로 보내는 것 일텐데요. 그럼 이번에는 이 전송 메일(Notification)의 내용을 변경해 보겠습니다.
왼쪽 메뉴에서 ‘Settings’ 메뉴 선택한 후 그 옆의 하위 메뉴에서 ‘Notifications’를 선택합니다.
Notification 메일에서는 아래의 내용을 변경할 수 있습니다.
- Send To Email Address: 수신자 이메일
- Email Subject: 메일 제목
- From Name: 메일에 표시되는 발신자 이름
- From Email: 발신자 이메일
- Reply-To: 메일을 답신할 경우, 답신 메일의 수신자 이메일
- Message: 메일의 내용
3.1 ‘Show Smart Tags’
메일 내용의 오른쪽 위에보면 ‘Show Smart Tags’라는 글씨가 보입니다.
클릭해볼까요.
밑에 그림은 ‘Message’에 있는 ‘Show Smart Tags’를 클릭한 화면입니다.
‘Available Fields’에 보이는 항목들은 문의 폼의 입력 항목들입니다.
이 ‘Smart Tags‘는 문의 폼에서는 주로 ‘Message’ 내용을 변경할 때 많이 사용하게 됩니다. 기본 값으로 있는 {all_fields} 대신 ‘Available Fields’의 항목들을 클릭한 후 아래와 같이 메세지 내용을 편집할 수도 있습니다.
4. Confirmation 메세지/페이지
Confirmation은 사용자가 작성한 폼을 전송한 후의 보여줄 메세지 또는 페이지를 이야기 하는 건데요. 크게 두가지 방법이 있겠죠.
- 메일이 잘 전달되었다는 메세지를 표시.
- 메일을 보낸 후 다른 페이지로 이동.
다른 페이지로 이동하는 경우에는 ‘Subscription(구독)‘ 한 후 구독자에게만 특별한 컨텐츠를 제공하는 경우에 많이 사용하게 됩니다. 그럼 Confirmations의 내용을 변경해보죠.
왼쪽의 하위 메뉴에서 ‘Confirmations’를 선택합니다.
위의 그림처럼 Confirmation Type을 ‘Message’로 선택하면 메세지를 편집할 수 있는 화면이 나타납니다.
아니면 위의 그림처럼 ‘Show Page’ Type로 선택하면, 이동할 웹사이트의 페이지를 선택할 수 있습니다.
5. Marketing, Payment
‘프로’ 사용자들에게만 제공되는 기능이 대부분이지만 어떤 기능이 있는지 간단히 확인해보죠.
5.1 Mailchimp, Constant Contact
Email 마케팅이 널리 사용되고 있는 웹사이트가 Mailchimp, Constant Contact 일 겁니다. Mailchimp 가 제일 많이 사용되는 웹사이트로 알고 있는데, 유료인게 좀 아쉽네요.
이 기능은 ‘Newsletter Signup Form‘ 템플릿에서 많이 사용하는데요. 이메일만 입력하고 전송을 하면 그 이메일을 Mailchimp 와 같은 이메일 마케팅 웹사이트 웹사이트 API를 이용해서 해당 웹사이트에 등록을 할 수 있습니다. 그러면 등록된 이메일로 ‘Newsletter’나 광고성 메일을 보낼 수 있고, 메일 수신자들이 얼마나 메일을 오픈했는지도 알 수 있는 등 다양한 마케팅 데이터를 수집할 수 있어서, 많은 이메일 마켓팅 회사에서 이용하고 있습니다.
5.2 Paypal, Stripe
Paypal 은 설명이 필요없이 널리 사용되는 온라이 지불 방식인데요. Stripe도 상당히 많은 웹사이트에서 서비스를 제공해주고 있는 온라인 지불 방식 중에 하나 입니다. 아쉽게 역시 둘다 유료회원용이네요.
6. WPForms 폼을 페이지에 넣기
지금까지 WPForms 워드프레스 폼을 만들어 보았는데요. 궁극적으로 목적은 이 폼을 페이지에 보여주는 것이니까, 이번에는 만들어진 폼을 페이지에 넣는 방법 을 알아보겠습니다.
워드프레스 5.0 부터 적용된 구텐베르크 편집기에서 WPForms은 위젯으로 제공되고 있습니다.
관리자 화면의 ‘글’ 또는 ‘페이지’ 메뉴에서 원하는 화면을 선택하여 구텐베르크 편집기 화면으로 이동합니다.
블럭을 추가하기 위해서 ‘Add Block’을 선택하고, ‘위젯’ 그룹을 선택하면, 아래 그림과 같이 ‘WPForms’라는 위젯을 볼 수가 있습니다.
‘WPForms’ 를 선택하면 아래와 같이 드롭다운 메뉴에 우리가 작성한 ‘문의 폼’이 있습니다.
‘문의 폼’을 선택하면 아래와 같이 페이지 안으로 ‘문의 폼’이 삽입이 됩니다.
참고로 워드프레스 플러그인 Elementor에서도 WPForms 폼 을 넣을 수 있는데요. 그 사용방법은 아래 포스트에서 자세히 확인해보세요.
워드프레스 플러그인 Elementor 사용법
이것으로 간단히 워드프레스 폼빌더 WPForms 의 기본 기능들을 간단히 알아 보았는데요. 기본 온라인 폼을 간단히 만들 수 있고, 웹페이지에 넣는 기능도 무척 심플해서 처음써보는 저로서도 큰 문제 없이 사용을 해본 것 같습니다. 좀 더 자세한 사용법이나 Contact Form 7, 닌자 폼 플러그인 과의 비교는 다른 포스트에서 다뤄볼까 합니다.
사용하기 편하셨나요? 다른 폼들도 한번 만들어 보세요. Good Luck!
WPForms 워드프레스 폼빌더 웹사이트 https://wpforms.com/
