폼 임베드 코드(인라인)

퍼널체인저스에서 만든 폼은 공개 주소로 나누는 방법 외에, 이미 운영 중인 다른 웹사이트의 페이지 안에 그대로 끼워 넣을 수도 있습니다. 폼 편집 화면에는 복사해서 붙여 넣기만 하면 되는 임베드 코드가 준비되어 있습니다. 이 글에서는 인라인 방식(iframe)으로 폼을 내 사이트에 삽입하는 방법과, 삽입된 폼이 어떻게 보이는지 정리합니다.

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

폼 빌더 > 폼 목록에서 폼의 편집을 눌러 편집 화면을 열고, 상단 탭에서 랜딩페이지 & 공유를 선택합니다. 왼쪽 아래 공유 카드의 맨 아래에 다른 사이트에 삽입 (임베드 코드) 항목이 접혀 있으니 제목을 눌러 펼칩니다.

2. 코드를 복사해 붙여 넣기

펼치면 임베드는 헤드라인 없이 폼만 표시됩니다.라는 안내와 함께 인라인 (iframe) 코드 상자가 나타납니다. 상자 오른쪽 위의 복사를 누르면 버튼이 복사됨으로 바뀌며 코드가 클립보드에 담깁니다. 그 코드를 내 사이트에서 폼을 놓고 싶은 위치의 HTML에 붙여 넣으면 됩니다. 워드프레스·아임웹 같은 사이트 도구라면 HTML 삽입 블록이나 사용자 코드 칸에 넣으시면 됩니다.

코드를 구성하는 값은 다음과 같습니다.

• src: 폼의 공개 주소 뒤에 임베드 표시가 붙은 주소입니다. 이 표시 덕분에 폼만 깔끔하게 나옵니다.
• style: 가로 100%, 테두리 없음, 모서리 둥글게로 지정되어 있습니다. 내 사이트의 디자인에 맞게 값을 바꿔도 됩니다.
• height: 기본은 600입니다. 폼이 길어 더 필요하면 붙여 넣은 코드의 이 값을 직접 키우시면 됩니다.
• loading: lazy로 되어 있어, 방문자가 폼 위치 가까이 스크롤할 때 폼을 불러옵니다.
• title: 폼 이름이 들어가며 화면 낭독 프로그램이 이 이름으로 폼을 안내합니다.

3. 삽입하면 이렇게 보입니다

붙여 넣은 자리에 폼 카드가 나타나고, 방문자는 내 사이트를 떠나지 않고 그 자리에서 입력하고 제출합니다. 아래는 예시 사이트의 안내 글 아래에 코드를 붙여 넣은 모습입니다.

좁은 화면에서는 카드가 사이트의 폭에 맞춰 줄어들고 입력칸이 세로로 이어집니다.

4. 공개 주소로 열 때와 무엇이 다른가요

임베드 화면은 폼 안의 입력 항목과 제출 버튼만 보여 줍니다. 공개 주소로 열었을 때 맨 위에 나오는 폼 제목과 설명, 랜딩페이지 탭에서 정한 로고·대표 이미지·배경, 시작 화면 방식의 소개 화면은 임베드에서는 나오지 않습니다. 제목과 소개 문구는 삽입하는 내 사이트의 본문에 직접 쓰시면 됩니다.

5. 이렇게 활용해 보세요

• 이미 운영 중인 사이트의 소개 글 끝에 신청 폼을 붙여, 방문자가 다른 페이지로 이동하지 않고 바로 신청하게 해 보세요.
• 폼 이름이 코드의 title에 들어가므로, 임베드할 폼은 방문자에게도 뜻이 통하는 이름으로 정해 두세요.
• 임베드한 폼의 카드와 버튼도 폼 디자인 설정을 따르므로, 내 사이트의 색에 맞게 디자인을 먼저 다듬어 보세요.
• 제목과 안내 문구는 내 사이트의 디자인에 맞춰 폼 바로 위에 자유롭게 써 두세요.
• 붙여 넣은 뒤에는 내 사이트의 실제 페이지를 데스크톱과 휴대전화 폭으로 열어 폼이 알맞은 높이로 보이는지 확인해 보세요.

6. 알아 두실 점

• 임베드 코드 상자는 게시 전에도 보이지만, 폼의 공개 URL 게시를 하기 전에는 삽입한 자리에서 폼이 열리지 않습니다. 게시한 뒤에 사이트에 붙여 넣으세요. 게시하는 방법은 공유 링크를 다룬 글에서 설명합니다.
• 나중에 공개 URL 해제를 하면 이미 붙여 넣은 사이트에서도 폼이 열리지 않습니다. 폼을 비활성화하거나 접수 기간이 지났을 때는 폼 대신 안내 화면이 나옵니다.
• 코드 안의 폼 주소는 폼을 만들 때 정해진 주소이며, 폼을 바꿔서 쓰려면 해당 폼의 코드를 새로 복사해 교체해야 합니다.
• 퍼널체인저스 에디터로 만든 페이지에 폼을 넣을 때는 코드를 붙이지 않고 에디터의 폼 요소에서 폼을 연결합니다. 그 방법은 별도 글에서 다룹니다.