리캐치 사용 가이드

thumbnail

Framer / 프레이머

리캐치2024-08-08

설치 전에 꼭 확인하세요!

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

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

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

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

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

Custom Form Code 생성 및 삽입

  1. Assets 탭을 선택하세요.

  2. Code 섹션의 + 버튼을 클릭하세요.

  3. Create Code File 모달 창에서 이름을 입력하세요. (ex: MyForm)

  4. New Component 옵션을 선택하세요.

  5. Create 버튼을 클릭하세요.

  1. 기본 생성된 코드에서 태그 네임을 div에서 form으로 변경하세요.

  2. 사용할 className을 삽입하세요. (ex: my-form)

  3. form 태그 내부에 페이지에서 사용될 인풋들을 추가해주시고(ex: <input name='name' />) 제출 버튼에는 type=submit 을 추가해주세요.

페이지에서 필요한 위치에 코드 파일(ex: MyForm)을 드래그앤드랍으로 사용하세요.

Head Code 삽입

  1. Page Settings 에 접근하세요.

  2. Custom Code 섹션의 Start of <head> tag 코드 블럭 내에 리캐치 스크립트를 붙여넣으세요.

  3. 이때, 빨간색 박스로 표시된 부분은 Custom Form Code를 생성할 때 삽입한 className과 동일해야하세요. (ex: my-form)