웹 양식을 사용자 정의하여 사용자 지정 이벤트를 트리거하는 방법?

적용 가능한 플랜

Sprout Blossom Garden EstateForest

리드 생성에 있어 웹 양식은 웹사이트 방문자를 캡처하고 리드로 전환하는 데 유용한 도구입니다. Freshsales를 사용하면 사용자가 웹 양식의 UI를 상대적으로 쉽게 설정하고 수정할 수 있습니다.

하지만 웹 양식의 커스터마이징은 단순한 UI 변경을 넘어섭니다. 웹 양식 이벤트에 접근함으로써 사용자는 웹 양식의 기능을 더 잘 제어할 수 있으며, 이를 통해 다음과 같은 기능을 구현할 수 있습니다:

필드 미리 채우기
필드 검증
UTM 매개변수 캡처
FreshChat 팝업과 같은 웹훅 트리거
Google 태그로 데이터 전송 등

개발자라면, 다음과 같이 진행할 수 있습니다 (작동 예제를 찾고 있다면 아래로 스크롤하세요).

총 단계: 3

최소 소요 시간: 20분

상세 단계:

참고:
다음 단계를 실행하려면 웹사이트에 웹 양식이 설치되어 있어야 합니다. 아직 웹 양식을 생성하지 않았다면, 생성 방법을 배우세요 진행하기 전에.

1. WordPress 계정에서 웹 양식 링크를 삽입한 대시보드로 이동합니다. 사이트의 푸터에 삽입했다면 경로는 다음과 같습니다:

My Site > Themes > Customize > Widgets > Footer > Custom HTML > Save

다음과 같이 나타납니다:

2. 기존 코드를 찾아 웹 양식 스크립트 전에 다음 코드를 통합하세요:

var WebFormEvent =
{

afterInstall: function()

{
console.log("설치 후 훅이 트리거되었습니다.");
}

beforeSubmit: function()

{

console.log("제출 전 훅이 트리거되었습니다.");
}

afterSubmit: function(event, data, error)

{
console.log("제출 후 훅이 트리거되었습니다.");
console.log("데이터 => ",data);
if(error)\{ console.log("오류 => ",error); }

}

}
</script>

새로운 코드는 다음과 같이 나타납니다:

이 스크립트는 개발자에게 세 가지 이벤트에 접근할 수 있게 합니다-

설치 후: 이 이벤트는 양식이 웹사이트에 생성된 직후에 트리거됩니다.
코드는 다음과 같이 보일 것입니다:

콘솔에서 출력은 다음과 같이 나타납니다:
제출 전: 이 이벤트는 제출 버튼이 눌린 직후, 데이터가 서버로 전송되기 전에 트리거됩니다.
코드는 다음과 같이 보일 것입니다:

콘솔에서 출력은 다음과 같이 나타납니다:
제출 후: 이 이벤트는 서버에 레코드가 생성된 후 트리거됩니다. 이 이벤트를 사용하여 사용자가 선택한 장소로 이 데이터의 사본을 보낼 수 있습니다.
코드는 다음과 같이 보일 것입니다:

콘솔에서 출력은 다음과 같이 나타납니다:

__________________________________

작동 예제:

각 이벤트에 대한 예제를 탐색해 봅시다. 전체 코드는 다음과 같이 나타납니다:

개별 이벤트:
1. 설치 후: 편집할 수 없는 미리 채워진 필드가 있는 양식을 생성하고자 한다고 가정해 봅시다. '설치 후' 기능을 사용하여 이러한 설정의 코드를 생성할 수 있으며 다음과 같이 나타납니다:

afterInstall: function()

{

console.log("설치 후 훅이 트리거되었습니다.");

WebForm.$('input[name="lead[first_name]"]').val('James').attr('disabled','disabled')

}

출력:

2. 제출 전: 양식이 서버로 전송되기 직전에 UTM 매개변수와 같은 값을 양식에 주입하고자 한다고 가정해 봅시다. '제출 전' 기능을 사용하면 제출 버튼이 클릭된 직후 이 값을 자동으로 주입할 수 있습니다. 이러한 설정의 코드는 다음과 같이 나타납니다:

beforeSubmit: function()

{

console.log("제출 전 훅이 트리거되었습니다.");

WebForm.$('<input>').attr({
type: 'hidden',
name: 'lead[custom_field][cf_utm_param]',
value: getQueryVariable('utm_param')
}).appendTo('.fs-webform-container form');
}

출력:

3. 제출 후: Freshchat과 양식을 통합하고 양식이 제출되자마자 개인화된 <이름>과 함께 채팅이 팝업되기를 원하는 시나리오를 고려해 봅시다. 이 경우 '제출 후' 이벤트는 서버에서 제출된 데이터의 사본을 원하는 장소로 보냅니다. 이 경우 웹훅은 Freshchat일 수 있습니다. 코드는 다음과 같이 나타납니다:

<script src="https://wchat.freshchat.com/js/widget.js"></script>

<script>

afterSubmit: function(event, data, error)

{

console.log("제출 후 훅이 트리거되었습니다.");

//데이터가 문자열로 주입되므로 json으로 변환해야 합니다

data = JSON.parse(data);

window.fcWidget.init({

token: "b38c7925-5edb-4bcc-bf4c-e4a3a2a711e3",

host: "https://wchat.freshchat.com"

});

var lastName = findData(data, 'lead[first_name]')+" "+findData(data, 'lead[last_name]');

window.fcWidget.user.setFirstName(lastName);

var email = findData(data, 'lead[email]');

window.fcWidget.user.setEmail(email);

console.log("데이터 => ",data);

if(error){ console.log("오류 => ",error); }

}

</script>

출력:

이 코드를 실행함으로써 이제 웹 양식의 작동 방식을 더 자율적으로 제어할 수 있습니다. 이를 통해 양식의 작동을 원하는 대로 맞춤화할 수 있습니다.

웹 양식을 사용자 정의하여 사용자 지정 이벤트를 트리거하는 방법?

같은 폴더의 문서

Freshsales AI 도우미