웹 폼 공유하기

1. 웹 폼 링크 공유하기

공유를 희망하는 웹 폼의 상세 화면으로 이동합니다. 공유 탭에서 공유 링크를 복사하면, 웹 폼 링크가 클립보드에 저장되어 원하는 위치에 붙여넣을 수 있습니다.

2.웹 빌더에 웹 폼 임베드하기

Framer, webFlow, Wix 등 웹 빌더에 웹 폼을 임베드하는 경우를 알아봅니다.

2-1. Framer에 웹 폼 임베드하기

1. 임베드 코드 복사

공유를 희망하는 웹 폼의 상세화면의 공유 탭에서 임베드 코드를 복사합니다.

2. Framer에서 임베드 컴포넌트 추가

Framer에서 Embed 컴포넌트를 선택해 웹페이지에 추가합니다. WebFlow 등 다른 웹 빌더를 사용하는 경우에도 외부 코드를 추가할 수 있는 컴포넌트를 선택하세요.

3. HTML 코드 삽입

Embed 컴포넌트 내에 HTML 코드를 추가할 수 있는 영역에, 복사한 웹폼의 임베드 코드를 붙여넣습니다. 이렇게 하면 웹폼이 성공적으로 임베드됩니다.

2-2. Notion에 웹 폼 임베드하기

Notion의 경우 세일즈맵 웹 폼의 HTML 임베드 코드를 노션에 적합한 URL로 변형해 주는 중간 작업이 필요합니다.

1. Apption에서 변환

apption.co에 접속해, 세일즈맵 웹폼의 임베드 코드를 붙여넣습니다. Apption이 이 코드를 Notion에 적합한 URL로 변환해줍니다.

2. Notion에 URL 임베드

생성된 URL을 복사해 Notion 페이지에 붙여넣으면 웹 폼이 임베드됩니다.

3. UTM 파라미터 추가 (선택 사항)

만약 트래킹을 위해 UTM 파라미터를 추가하고 싶다면, 다음과 같이 생성된 URL 뒤에 원하는 UTM 정보를 입력하면 됩니다.

ex)<https://apption.co/embeds/95028348?utm_source=apption&utm_campaign=C0001>

2-3. Wix에 웹 폼 임베드하기

1. Wix에서 웹 폼을 임베드 할 섹션 선택

웹 폼을 임베드하실 섹션을 선택합니다.

2. '코드 삽입 - HTML 삽입' 요소 추가

3. HTML 코드 삽입

세일즈맵에서 복사해온 임베드 코드를 붙여넣습니다.

4. 완료 확인

5. 제출 완료 유형을 '외부 링크로 이동'으로 설정한 경우

Wix에서는 기본적으로 외부 링크로 이동을 차단하고 있기 때문에 별도의 설정이 필요합니다.

6. 개발자 모드 클릭

7. 웹 폼이 임베드 된 페이지로 이동

8. 코드 교체

기존 코드를 제거하고 아래 코드를 그대로 붙여넣습니다.

// Velo API 레퍼런스: https://www.wix.com/velo/reference/api-overview/introduction
import wixLocation from 'wix-location-frontend';
$w.onReady(function () {
    $w('#salesmap-web-form').onMessage((event) => {
        let data = event.data;
        if (data.redirect) {
        wixLocation.to(data.redirect);
        }
    });
});

9. 웹 폼 ID 교체

세일즈맵 웹 폼 요소를 클릭하고 ID를 salesmap-web-form으로 교체합니다.

10. 작동 확인

웹 폼 제출 시 페이지 이동이 잘 작동하는지 확인합니다. 일시적으로 캐시가 남아 이동이 안되는 현상이 발생할 수 있으니 시크릿 모드에서 테스트합니다.