WordPress 양식에서 웹훅을 사용하는 방법

WordPress 양식을 다른 웹 응용 프로그램 및 서비스와 통합하시겠습니까?

WordPress 양식에서 바로 웹 애플리케이션의 데이터를 보내는 간단한 방법이 필요한 경우 웹훅이 완벽한 솔루션입니다. 웹훅 양식을 사용하면 Zapier와 같은 타사 커넥터의 도움을 받을 필요가 없습니다.

이 게시물에서는 WordPress 양식에서 웹훅을 사용하여 즐겨 사용하는 앱 및 서비스에 실시간 데이터를 쉽게 보낼 수 있는 방법을 보여줍니다.

그러나 먼저 초보자를 위해 웹훅이 무엇이고 왜 중요한지 다룰 것입니다. 오늘 사용할 방법에는 코딩 기술이 필요하지 않습니다.

웹훅이란 무엇입니까?

Webhook을 사용하면 두 웹 애플리케이션이 서로 통신할 수 있습니다. 예를 들어 누군가 웹사이트에서 구매 주문 양식을 제출하면 해당 데이터를 Slack 채널로 보내 주문이 완료되었음을 제품 팀에 업데이트할 수 있습니다. 새로운 리드나 구독자가 생겼을 때도 이 작업을 수행할 수 있습니다.

기술적인 측면에서 웹훅은 소스 시스템의 이벤트에 의해 트리거되고 대상 시스템으로 전송되는 사용자 정의 HTTP 콜백입니다.

즉, 웹사이트에서 이벤트나 트리거가 발생하면 연결된 서비스로 자동화된 메시지가 전송됩니다. 트리거는 블로그 댓글, 제품 구매 사용자 등록, 양식 제출 등이 될 수 있습니다.

웹훅을 사용해야 하는 이유가 궁금하다면 다음과 같은 이점이 있습니다.

• 두 서비스/앱 간에 자동으로 정보 전송
• 작업 자동화 및 관리 시간 단축
• Zapier 및 Hubspot과 같은 커넥터 서비스를 사용하여 앱에서 데이터를 처리하는 비용을 줄입니다.

Webhook은 개발자와 기술에 정통한 WordPress 사용자에게 매우 유용합니다.

이제 WordPress에서 웹훅 양식을 만드는 방법에 대한 단계별 가이드를 시작하겠습니다.

WordPress에서 Webhook 양식 만들기 [쉬운 방법]

웹후크를 사용하여 WordPress 양식 제출을 다른 웹 응용 프로그램으로 보낼 수 있는 여러 가지 방법이 있습니다.

초보자를 포함하여 누구나 쉽게 사용할 수 있는 Webhooks Addon을 제공하므로 이 튜토리얼에서는 WPForms를 사용할 것입니다. 코딩이 전혀 필요하지 않습니다.

WPForms는 WordPress 사이트를 위한 최고의 양식 빌더 플러그인입니다. 그리고 알아야 할 것은 모든 유형의 WordPress 양식을 만들 수 있는 수많은 미리 만들어진 템플릿과 바로 사용할 수 있는 양식 필드를 제공한다는 것입니다. 여기에는 제품 주문, 등록, 약속 예약, 간단한 문의 양식 등이 포함됩니다.

WPForms에는 양식 사용자 정의를 케이크 조각으로 만드는 끌어서 놓기 양식 빌더가 함께 제공됩니다. 이메일, 결제 및 마케팅 앱에 연결하는 데 사용할 수 있는 수많은 애드온과 통합이 있습니다.

Webhooks Addon을 사용하면 WordPress를 모든 서비스 또는 앱에 쉽게 연결할 수 있습니다. 몇 번의 클릭만으로 이 기능을 활성화할 수 있습니다.

또한 WPForms를 사용하면 조건부 규칙을 사용하여 사용자의 양식 응답을 기반으로 웹훅 작업을 트리거할 수 있습니다. 따라서 필드 값이 충족되는 경우에만 웹훅이 실행됩니다. 이렇게 하면 어떤 데이터를 보내고 어떤 앱으로 보낼지 더 잘 제어할 수 있습니다.

수많은 앱과 서비스에 연결할 수 있습니다. 이 자습서에서는 Slack에 연결하는 방법을 보여줍니다. 그러나 동일한 단계를 사용하여 다른 앱 및 엔드포인트에도 연결할 수 있음을 기억하십시오.

1단계: 새 Slack 앱 만들기

웹훅 양식을 Slack에 연결하면 웹사이트에서 Slack 채널로 메시지와 정보를 자동으로 보낼 수 있습니다. 사람이 양식을 제출하거나 양식을 포기하는 등의 작업을 수행하면 팀 구성원이나 부서를 업데이트할 수 있습니다.

이제 웹훅을 사용하여 WordPress에서 다른 서비스로 데이터를 보내려면 두 앱 사이에 브리지를 만들어야 합니다. 따라서 Slack에 연결하려면 Slack 앱(브리지)을 만들어야 합니다.

이 작업이 처음이더라도 걱정하지 마십시오. 매우 쉽기 때문에 단계별로 안내해 드리겠습니다. 먼저 Slack API 페이지를 열고 앱 만들기 버튼을 클릭해야 합니다.

다음 팝업 창에서 Slack으로 앱을 만드는 방법을 선택할 수 있습니다. 두 가지 옵션이 있습니다.

• 기스로부터
• 앱 매니페스트에서.

여기에서는 처음부터 Slack 앱을 만들 것입니다. 많은 작업처럼 들리지만 실제로는 몇 번의 클릭만 하면 됩니다.

그러면 앱 이름을 추가하고 Slack 작업 공간을 선택할 수 있는 팝업이 표시됩니다. 완료되면 앱 만들기 를 클릭합니다.

기본 정보 페이지가 열립니다. 여기에서 수신 웹훅 옵션을 클릭해야 합니다.

다음 화면에서 들어오는 Webhooks 활성화 설정을 활성화합니다. 이를 통해 외부 서비스에서 Slack에 메시지를 게시할 수 있습니다.

활성화되면 페이지 의 작업 영역 섹션에 대한 Webhook URL 이 표시됩니다.

이제 WordPress 양식에서 정보를 가져오려면 새 웹훅을 만들어야 합니다. 따라서 작업 공간에 새 Webhook 추가 버튼을 클릭합니다.

다음으로 Slack 채널을 선택하여 양식 제출을 게시할 수 있는 팝업을 볼 수 있습니다.

Slack 채널을 선택한 후 허용 을 클릭합니다.

이제 Slack 앱의 새 웹훅 URL을 볼 수 있습니다.

이제 Webhook URL을 복사하기만 하면 됩니다. 몇 단계 후에 필요합니다.

2단계: WPForms 설치 및 활성화

웹훅 URL이 있으면 WordPress 양식에 추가할 수 있습니다.

시작하려면 WPForms 웹사이트에서 계정을 등록하세요.

플러그인의 무료 버전이 있지만 웹훅과 같은 고급 양식 기능에 액세스하려면 프리미엄 버전이 필요합니다. WPForms는 100% 무위험 환불 보장과 함께 제공되므로 약정하기 전에 서비스를 사용해 볼 수 있습니다.

가입 후 다운로드 탭에서 플러그인 다운로드 파일과 라이선스 키를 찾을 수 있습니다.

이제 WordPress 대시보드로 이동하여 플러그인을 설치합니다. 더 자세한 정보를 원하시면 WordPress 플러그인 설치 방법에 대한 가이드를 확인하세요.

사이트에 WPForms를 설치하고 활성화한 후 모든 프리미엄 기능과 애드온을 사용하려면 라이센스 키를 입력해야 합니다.

양식 작성을 시작하기 전에 Webhooks Addon을 설치해야 합니다.

이를 위해 WPForms » 애드온 탭으로 이동하면 WordPress 양식의 기능을 확장하는 데 도움이 되는 수많은 애드온을 찾을 수 있습니다. 여기에서 Webhooks Addon용 Install Addon 버튼을 클릭합니다.

이제 WordPress에서 웹훅 양식을 만들 준비가 되었습니다.

3단계: 웹훅 양식 만들기

새 양식을 만들려면 WPForms » 새로 추가 페이지로 이동하여 미리 만들어진 템플릿 목록을 볼 수 있습니다. 이러한 템플릿에는 양식의 목적에 따라 필요한 필드가 미리 채워져 있습니다. 템플릿 라이브러리에는 다음이 포함됩니다.

• 간단한 문의 양식
• 견적 요청
• 기부 양식
• 청구/주문 양식
• 설문조사 양식
• 제안서

…그리고 더! 이 자습서에서는 이전 단계에서 사용자 피드백을 위한 Slack 앱을 만들었으므로 제안 양식 템플릿을 선택합니다. 귀하에게 가장 적합한 것을 자유롭게 선택하십시오.

페이지 상단에서 양식에 이름을 지정하기만 하면 됩니다. 그런 다음 필요에 따라 템플릿을 선택하거나 빈 템플릿을 선택하여 처음부터 시작할 수 있습니다.

템플릿을 선택하면 다음 창에 끌어서 놓기 양식 작성기가 표시됩니다.

필드를 더 추가하려면 왼쪽 메뉴에서 새 필드를 양식 미리보기로 끌어다 놓기만 하면 됩니다.

WPForms는 많은 사용자 정의 옵션을 제공하므로 필드를 클릭하여 편집할 수 있습니다. 필드 이름, 설명 및 고급 설정을 변경할 수 있습니다.

양식 필드 추가가 완료되면 저장 버튼을 클릭합니다.

다음 단계에서는 이 양식에 대한 웹훅을 설정하고 Slack 앱을 연결하는 방법을 배웁니다.

4단계: Slack용 Webhook 설정

웹훅이 양식에서 작동하려면 설정 » 웹훅 탭으로 이동하여 웹훅 활성화 옵션을 클릭해야 합니다.

Slack 통합을 설정하기 위해 편집할 수 있는 새 웹훅이 생성됩니다.

먼저 웹훅의 이름을 변경할 수 있습니다. 이것은 나중에 인식하는 데 도움이 됩니다.

이제 1단계에서 Slack 앱에서 복사한 Webhook URL을 기억하십니까? 요청 URL 옵션에 여기에 붙여넣어야 합니다. 이렇게 하면 WordPress 양식을 Slack과 같은 다른 서비스와 연결할 수 있습니다.

그런 다음 웹훅을 설정하기 위한 다양한 설정이 표시됩니다. 여기에서 각각이 수행하는 작업과 이러한 필드에 추가할 항목에 대해 논의할 것입니다.

• 요청 방법: 연결된 서비스와 생성하려는 연결 유형을 선택할 수 있습니다. 생성하려는 연결 유형에 따라 사용할 수 있는 HTTP 메소드 유형이 많이 있습니다.
  • GET : 제출된 양식에서 데이터를 가져와 연결된 앱으로 세부정보를 보냅니다.
  • POST : 데이터를 보조 서비스로 보냅니다. 양식에서 Slack 채널로 데이터를 게시해야 하므로 HTTP POST 요청을 사용합니다.
  • PUT : 웹훅이 실행될 때 데이터를 업데이트할 수 있습니다.
  • PATCH : 웹훅이 실행될 때 데이터를 교체할 수 있습니다.
  • DELETE : 이 특정 웹훅이 실행될 때 정보를 삭제할 수 있습니다.
• 요청 형식: 이 옵션은 전송 중인 콘텐츠 유형을 서버에 표시합니다. 이것은 약간 기술적이지만 기본적으로 사용 가능한 두 가지 다른 요청 형식 유형이 있습니다.
  • JSON : 데이터 형식을 application/json 형식으로 지정하고 콘텐츠 유형을 charset=utf-8 로 설정합니다.
  • FORM : 데이터를 application/x-www-form-urlencoded 형식으로 지정하고 콘텐츠 유형을 charset=utf-8 로 설정합니다.
• 비밀: 개발자이고 인증을 위해 자체 API를 통합하려는 경우 비밀 키를 사용할 수 있습니다. 그러나 자습서에서는 이 옵션이 필요하지 않으므로 이 옵션을 비워 둡니다.
• 요청 헤더: 요청이 앱으로 전송될 때 특정 값을 전송합니다. 웹훅이 실행되면 필드가 자동으로 생성됩니다. 이 필드도 비워 둡니다.
• 요청 본문: 이 옵션의 경우 메시지 유형을 설정하고 메시지를 게시할 필드를 선택해야 합니다. 사용자가 텍스트 형식으로 제안을 입력할 것이기 때문에 Key 를 Text 로 설정합니다. 그런 다음 사용자가 메시지를 입력할 필드를 선택합니다.

웹훅 요청 설정이 끝나면 저장 버튼을 클릭합니다.

5단계: 양식 알림 설정

다음으로 WordPress 양식에 대한 이메일 알림을 설정할 수 있습니다. 이를 통해 관리자, 모든 팀 구성원 및 고객/사용자가 양식을 제출하면 자동화된 이메일을 보낼 수 있습니다.

이러한 이메일 워크플로를 설정하려면 설정 » 알림 탭으로 이동하여 알림 활성화 옵션을 선택하여 기본 설정을 확인하십시오.

여기에서 알림 설정을 사용자 정의하고 수신자 이메일 주소를 추가할 수 있습니다.

WPForms를 사용하면 양식 사용자에게도 자동화된 이메일 알림을 보낼 수 있습니다. 이를 설정하려면 페이지의 오른쪽 상단 모서리에 있는 새 알림 추가 버튼을 클릭하십시오.

그런 다음 스마트 태그 표시 옵션을 사용하고 이메일 을 선택해야 합니다. 이 태그를 사용하면 WPForms는 사용자가 양식에 입력한 이메일 주소를 자동으로 감지합니다.

이메일 메시지 섹션에서 사용자 정의 메시지를 추가하고 {all_fields} 스마트 태그를 사용하여 사용자가 입력한 모든 양식 데이터를 표시할 수 있습니다.

마지막에 설정을 저장하는 것을 잊지 마십시오.

6단계: 확인 메시지 사용자 지정

WPForms를 사용하면 사용자가 양식을 성공적으로 제출한 후 사이트 프런트 엔드에 확인 메시지를 표시할 수도 있습니다.

설정 » 확인 탭에 확인 설정이 표시됩니다. 기본적으로 확인 유형은 '메시지'로 설정되지만 이 메뉴에는 3가지 옵션이 있습니다.

• 메시지: 고객이 주문을 제출한 후 프런트엔드에 표시되는 확인 메시지를 추가합니다.
• 페이지 표시: 사이트의 모든 페이지로 사용자를 리디렉션합니다.
• URL로 이동(리디렉션): 사용자를 특정 URL로 보냅니다.

이에 대해 자세히 알아보려면 양식 알림 및 확인을 올바른 방법으로 설정하는 방법에 대한 가이드를 확인하세요.

설정이 끝나면 저장 버튼을 클릭합니다.

WPForms를 사용하면 Constant Contact 및 Mailchimp와 같은 선호하는 이메일 서비스와 통합할 수 있다는 점도 언급해야 합니다.

마케팅 탭에서 여기에 액세스하고 화면 지침에 따라 이메일 계정을 연결하기만 하면 됩니다. 대부분의 경우 이메일 제공업체를 통해 생성할 수 있는 API 키를 제공해야 합니다.

온라인 양식을 지불 게이트웨이에도 연결하려면 여기에서 방법을 배울 수 있습니다. 온라인 주문 양식을 만드는 방법

이제 WordPress 사이트에 웹훅 양식을 게시하기만 하면 됩니다.

7단계: 사이트에 웹훅 양식 게시

양식 제출을 외부 서비스로 보내기 시작하려면 먼저 웹훅 양식을 게시해야 합니다. WPForms 사용자 정의 블록을 사용하면 WordPress 사이트의 모든 페이지 또는 게시물에 양식을 추가할 수 있습니다.

이 자습서에서는 사이트의 새 페이지에 양식을 추가합니다. 따라서 WP 관리자 패널에서 페이지 » 새로 추가 탭으로 이동합니다. 블록 편집기 화면에서 새 블록을 추가하고 'WPForms'를 검색합니다.

페이지에 WPForms 블록을 추가하면 방금 만든 웹훅 양식을 선택할 수 있는 드롭다운 메뉴가 표시됩니다.

그런 다음 사이트에 페이지를 게시할 수 있습니다.

WordPress 클래식 편집기를 사용하는 경우 편집기의 양식 추가 버튼을 사용하여 양식을 추가할 수 있습니다.

바닥글이나 사이드바와 같은 위젯 준비 영역에 웹훅 양식을 삽입할 수도 있습니다. 이렇게 하려면 모양 » 위젯 탭으로 이동하여 WPForms 위젯을 오른쪽의 사이드바 또는 바닥글 메뉴로 끌어다 놓습니다.

그런 다음 드롭다운 메뉴에서 생성한 양식을 선택하고 변경 사항을 저장할 수 있습니다.

이제 웹훅 양식이 사이트에 게시됩니다. 사용자가 양식을 작성하고 제출하면 웹사이트에서 Slack 알림을 받게 됩니다.

이와 같이 WPForms를 사용하여 웹훅 URL을 사용하여 다른 앱에 연결할 수 있습니다. 가져오고 다른 앱으로 보내려는 데이터를 완전히 제어할 수 있습니다.

그게 다야! 이 게시물이 WordPress 양식에서 Webhook을 사용하는 방법을 배우는 데 도움이 되었기를 바랍니다. WPForms를 사용하면 웹훅 양식을 만들고 쉽게 타사 서비스에 연결할 수 있습니다.

또한 주문 양식, 예약 양식, 등록 양식 등과 같은 다른 전문 WordPress 양식을 만드는 데 사용할 수도 있습니다.

다음 단계를 위해 다음 리소스를 확인할 수 있습니다.

• WordPress 양식에 '저장하고 나중에 계속하기' 옵션을 추가하는 방법
• 양식 포기를 줄이고 전환율을 높이는 방법
• WordPress용 최고의 이메일 캡처 도구 및 양식 빌더

이 게시물은 WordPress 양식에 저장 및 재개 기능을 추가하고 양식 포기율을 줄이는 데 도움이 됩니다. 마지막 것은 이메일 마케팅 목록을 늘리는 데 도움이 됩니다.