리캐치 사용 가이드

thumbnail

webflow / 웹플로우

리캐치2024-08-08

설치 전에 꼭 확인하세요!

  1. 리드 라우터를 아직 생성하지 않으셨나요? 리드 라우터를 생성해주신 후 설치 페이지로 돌아와주세요.

  2. 리캐치를 연동하실 폼의 버튼 type 을 submit 으로 설정해주세요.

    1. 폼 제출 시 submit 이벤트가 발생하면 됩니다.

  3. 예약페이지 또는 리드 라우터 설치 시<form class>를 꼭 동일하게 설정해주세요.

    1. <form class>를 찾는 방법은여기(클릭)를 참고해주세요!

<head>에 커스텀 코드 삽입

  1. 웹플로우로 생성하신 페이지의 설정 페이지로 진입해 <head>에 복사하신 리캐치 설치 코드를 삽입하세요.

  1. 사용한 form class 이름을 기억하세요! 위 예시에서 사용된 form class 는 my-form 입니다.

도움말: 위 이미지에서 붉은색 줄로 밑줄친 부분입니다.

Form Block 추가하기

이미 사용 중인 form이 있다면 이 단계는 건너 뛰고 진행해 주세요.

  1. Add 탭을 클릭해서 Forms 섹션을 찾습니다.

  2. Form Block을 페이지에 추가해줍니다.

Form Class 적용

  1. 위에서 사용한 form class 이름을 이미 존재하거나 새로 추가한 Form의 Style selector에 (아래 사진 참고) 추가합니다. 아래 예시에서는 Style selector에 my-form 을 추가했습니다.

    도움말: 아래 이미지를 더블클릭하여 줌인 후, 붉은색으로 표시된 부분을 확인해주세요

혹시 리드 라우터가 아닌 예약페이지를 설치 중이신가요?

이미 웹사이트 내 웹폼에서 미리 받고있는 정보를 리캐치와 미리 연동하기 위해 이름, 이메일, 전화번호의 <input> 필드 name을 다음과 같이 설정하세요:

이름: <input name = name>

이메일: <input name = email>

전화번호: <input name = phone-number>

웹플로우에서 추가하는 방법은 아래에 설명되어 있습니다.

  1. 웹플로우의 왼쪽 패널에서 Name을 적용할 Input Field 클릭 후, 오늘쪽 패널에서 설정(톱니바퀴) 탭을 클릭하세요.

  1. "Text Field Settings" 섹션에서 "Name" 부분을 다음과 같이 적용하세요:

이름: <input name = name>

이메일: <input name = email>

전화번호: <input name = phone-number>

  1. 변경사항 적용 후, 오른쪽 상단에 있는 Publish 버튼을 클릭하시면 웹사이트에서 작동하는 모습을 확인하실 수 있습니다.

  2. 설치가 원활하게 이뤄지지 않는 경우, 여기(클릭)로 문의해주세요.