폼 임베드 요소: 만든 폼 연결하기

폼 빌더에서 상담 신청 폼을 만들었다면, 이제 그 폼을 내 페이지 안에 넣을 차례입니다. 에디터의 폼 임베드 요소는 만들어 둔 폼을 페이지의 원하는 자리에 불러와 보여 주는 요소입니다. 이 글에서는 요소를 넣고, 만든 폼을 연결하고, 연결한 폼을 다른 폼으로 바꾸는 방법을 순서대로 안내합니다. 폼 자체를 만드는 방법과 필드 편집, 설정 탭은 별도 글에서 다룹니다.

1. 폼 임베드 요소는 어디에 있나요

에디터 왼쪽 레일에서 요소 추가(+ 아이콘)를 눌러 요소 패널을 열면 콘텐츠 카테고리 안에 폼 임베드가 있습니다. 같은 카테고리의 리드폼과는 다른 요소입니다. 요소 패널 자체의 사용법은 별도 글에서 다룹니다.

이 요소는 플랜에 따라 잠겨 있을 수 있습니다. 잠금 배지는 별도 글에서 다룹니다.

2. 요소를 넣고 폼 연결하기

먼저 폼 빌더에서 연결할 폼이 만들어져 있어야 합니다. 그다음 에디터에서 폼을 넣을 섹션을 선택해 둔 채 폼 임베드를 누르면 그 섹션의 맨 아래에 요소가 들어갑니다. 아이콘 위에 마우스를 올리면 "드래그하여 삽입"이라고 나오므로 원하는 위치로 끌어다 놓아도 됩니다.

처음 들어간 요소는 점선 테두리 상자로 보이고, 안에 폼 임베드와 더블클릭하여 폼 선택이라는 안내가 적혀 있습니다. 아직 어떤 폼과도 연결되지 않은 상태입니다.

이 상자를 더블클릭하면 폼 선택 창이 열립니다. 창 위에는 "활성화된 폼을 선택하여 인라인으로 삽입합니다."라는 설명이 있고, 아래에 폼 이름과 공개 주소(/f/로 시작)가 한 줄씩 보입니다. 연결할 폼을 한 번 누르면 창이 닫히면서 상자가 선택한 폼으로 바뀝니다.

3. 연결된 폼은 캔버스에서 이렇게 보입니다

연결이 끝나면 폼의 입력 항목 이름과 입력칸, 제출 버튼이 캔버스에 그대로 나타납니다. 예를 들어 이름 필드와 이메일 필드가 있는 폼을 고르면 두 항목과 제출하기 버튼이 보입니다. 필드를 늘리거나 라벨을 고치는 일은 폼 빌더에서 하며, 에디터에서는 어떤 폼을 보여 줄지만 고릅니다.

연결된 폼 영역을 한 번 누르면 보라색 테두리가 생기고 오른쪽 위에 요소 메뉴 점이 나타납니다. 다른 요소처럼 이동, 복제, 삭제 버튼을 쓸 수 있으며, 이 메뉴의 사용법은 별도 글에서 다룹니다. 폼을 넣을 위치는 섹션 안의 다른 요소 사이에서 자유롭게 정하면 됩니다.

4. 연결한 폼 바꾸기

다른 폼으로 바꾸려면 캔버스의 폼 영역을 한 번 눌러 선택한 뒤 다시 더블클릭합니다. 처음과 같은 폼 선택 창이 열리고, 다른 폼을 누르면 화면의 폼이 그 폼으로 교체됩니다. 창에서 닫기를 누르면 기존 연결이 그대로 유지됩니다. 목록에는 지금 어떤 폼이 연결되어 있는지 따로 표시되지 않으니, 이름과 공개 주소로 구분해 주세요.

5. 이렇게 활용해 보세요

• 상담 신청, 뉴스레터 구독처럼 목적이 다른 폼을 만들어 두고, 페이지마다 알맞은 폼을 골라 넣을 수 있습니다.
• 같은 자리에 다른 폼을 번갈아 연결해 보며 어떤 항목 구성이 페이지 분위기에 맞는지 비교해 볼 수 있습니다.
• 페이지 문구를 먼저 정리한 뒤 폼 임베드를 맨 아래에 넣어 신청 흐름을 마무리해 보세요.

6. 알아 두실 점

• 폼 선택 창에는 폼 빌더에서 만든 폼이 목록으로 나옵니다. 폼이 하나도 없으면 폼 빌더에서 폼을 먼저 만들라는 안내가 나옵니다.
• 폼 임베드를 고른 뒤에는 상단의 저장을 눌러야 보관됩니다. 저장하고 새로고침해도 연결된 폼이 그대로 유지됩니다.
• 연결한 뒤 폼 빌더에서 필드를 추가하거나 고쳐도 에디터 안의 폼은 곧바로 바뀌지 않습니다. 같은 폼을 다시 더블클릭해 선택하면 최신 필드로 갱신됩니다.
• 이 글에서는 폼을 페이지에 연결하는 방법만 다룹니다. 제출된 내용이 어떻게 처리되는지는 리드폼 요소를 다루는 별도 글에서 안내합니다.

폼을 연결하는 방법을 익혔다면, 폼 빌더에서 필드를 구성하는 방법을 다룬 글도 함께 읽어 보세요.