웹 폼 및 삽입

웹 폼은 웹사이트 방문자를 자동으로 리드로 전환합니다. 제출할 때마다 선택한 퍼널과 단계에 리드가 생성(또는 업데이트)되므로 팀이 바로 후속 조치를 할 수 있습니다. 폼은 구성 > 양식에서 관리합니다(양식 열기).

참고: 폼 목록은 누구나 열 수 있습니다. 폼 생성, 편집, 보관은 워크스페이스 관리자, 영업 관리자, 마케팅 사용자가 할 수 있습니다.

폼 만들기

1. 구성 > 양식을 열고 새 양식 만들기를 클릭합니다.
2. 상단의 제목 없는 양식을 알기 쉬운 이름으로 바꿉니다(예: "웹사이트 문의 폼").
3. 새 폼은 오른쪽 패널의 양식 탭이 열린 상태로 시작합니다. 리드 라우팅 섹션의 **이 폼에서 생성된 새 리드는 이 퍼널로 들어갑니다.**에서 퍼널을 선택합니다. 활성 퍼널만 표시됩니다.
4. 새 리드의 기본 단계에서 새 리드가 들어갈 단계를 선택합니다(대개 첫 번째 단계).
5. 필드를 조정한 다음(아래 참조) 폼 테스트를 클릭하고 보고된 문제를 수정합니다.
6. 폼 저장을 클릭합니다. 폼이 활성 상태로 저장되어 내 폼에 표시됩니다.

새 폼에는 다섯 가지 기본 리드 필드인 이름, 이메일, 전화, 주소, 메시지가 이미 포함되어 있습니다. 이 필드는 해당 리드 필드에 매핑되어 있으므로 데이터가 리드의 올바른 위치에 저장됩니다.

경고: 퍼널과 단계가 없는 폼은 저장할 수 없습니다. 목록에서 이러한 폼에는 **게시하기 전에 퍼널과 단계를 선택하세요.**가 표시됩니다.

편집기는 세 영역으로 이루어져 있습니다. 왼쪽의 폼 필드 팔레트, 가운데의 캔버스, 오른쪽의 설정 패널(필드, 양식, 삽입 탭)입니다. 캔버스 위에서 편집과 실시간 미리보기를 전환하고(실시간 미리보기에서는 데스크톱과 휴대폰 너비도 전환), 폼의 필드 수("필드: 6")를 확인할 수 있습니다. 상단의 미리보기 버튼은 여전히 폼을 창으로 엽니다.

필드와 필드 설정

폼 필드 패널에서 필드를 캔버스로 끌어다 놓거나, 팔레트의 필드를 클릭해 폼 끝에 추가합니다. 기존 필드를 끌어서 순서를 바꿉니다.

• 리드 필드: 텍스트 필드, 이메일, 전화, 숫자, 텍스트 영역, 날짜, 시간, 드롭다운, 체크박스, 라디오 버튼, 슬라이더, 파일 업로드, 주소, 숨겨진 필드.
• 레이아웃 및 추적: 로고, 구분선, Google 태그, Meta Pixel.
• 이 퍼널의 사용자 정의 필드: 선택한 퍼널에 정의된 사용자 정의 필드입니다. 추가를 클릭하면 폼에 넣을 수 있습니다.

캔버스에서 필드를 클릭하면 오른쪽 패널이 필드 설정이 있는 필드 탭으로 전환됩니다. 선택한 필드가 없으면 탭에 "캔버스에서 필드를 선택하면 라벨, 매핑, 옵션을 편집할 수 있습니다."가 표시됩니다. 필드 유형에 따라 레이블, 필드 키, 리드 필드에 매핑, 자리 표시자, 기본값, 필수 필드, 드롭다운/체크박스/라디오 버튼의 옵션, 행 수, 허용 파일 형식, 파일 크기를 설정할 수 있습니다. Google 태그와 Meta Pixel에는 추적 ID(예: G-XXXXXXXX)만 붙여 넣으면 됩니다. 사용자 정의 스크립트는 허용되지 않습니다.

팁: 숨겨진 필드를 사용해 리드의 유입 경로를 태그하세요(예: landing-page-spring). 기본적으로 리드 소스에 매핑됩니다.

게시하기 전에 폼 테스트하기

폼 테스트는 빠른 점검을 실행합니다. 퍼널과 단계를 확인하고, 중복된 필드 키, 누락된 레이블이나 옵션, 누락된 추적 ID, 누락된 로고 이미지를 찾습니다. 또한 기본 필드(이름, 이메일, 전화, 주소, 메시지) 중 하나가 없거나 매핑되지 않은 경우 경고합니다. 모든 것이 정상이면 폼 테스트 통과가 표시되고, 그렇지 않으면 문제 목록과 함께 폼에 주의가 필요합니다가 표시됩니다.

미리보기는 방문자에게 보일 폼의 모습을 보여 줍니다. 테스트는 실제 제출을 보내지 않습니다. 전체 흐름을 시험해 보려면 승인된 페이지에 폼을 삽입하고 한 번 제출해 보세요.

웹사이트에 폼 삽입하기

1. 먼저 폼을 저장합니다. 저장하지 않은 폼에는 **삽입 코드를 생성하려면 먼저 양식을 저장하세요.**가 표시됩니다.
2. 편집기에서 오른쪽 패널의 삽입 탭을 열고 보안 iframe 삽입 아래의 코드 복사를 클릭합니다. "이 코드는 저장된 양식의 코드입니다. 변경 사항을 게시하려면 저장하세요."라는 안내가 저장하지 않은 수정 사항은 아직 게시되지 않았음을 알려 줍니다. 내 폼에서 폼 카드의 코드 복사를 클릭하거나, 미리보기를 열고 보안 iframe 삽입 옆의 코드 복사를 사용할 수도 있습니다.
3. 폼을 표시할 위치의 웹사이트 HTML에 코드를 붙여 넣습니다(대부분의 사이트 빌더에서는 "HTML" 또는 "삽입 코드" 블록).

복사한 코드는 iframe이며 다음과 같은 형태입니다.

<iframe src="https://YOUR-NEXTCRM-ADDRESS/api/forms/FORM_ID/embed?token=EMBED_TOKEN" title="NextCRM form" style="width:100%;min-height:520px;border:0;display:block;" loading="lazy" sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-top-navigation-by-user-activation" referrerpolicy="strict-origin-when-cross-origin"></iframe>

경고: 코드를 수정하지 말고 그대로 붙여 넣으세요. token은 폼마다 고유하며, referrerpolicy 속성은 NextCRM이 웹사이트를 인식하는 데 사용됩니다. 이 속성을 제거하거나 사이트가 리퍼러를 전혀 보내지 않으면 승인된 도메인의 제출도 거부될 수 있습니다.

style 속성으로 크기를 변경할 수 있습니다(예: 더 큰 min-height).

승인된 웹사이트 도메인

양식 탭의 승인된 웹사이트 도메인 섹션에 폼을 표시하고 제출할 수 있는 사이트를 한 줄에 하나씩(또는 쉼표로 구분하여) 입력합니다.

example.com
www.example.com
*.example.com

• *.example.com은 모든 하위 도메인(예: shop.example.com)을 포함하지만 example.com 자체는 포함하지 않으므로, 필요하면 둘 다 추가하세요.
• 목록이 비어 있으면 폼은 어떤 웹사이트에서든 작동합니다. 테스트하는 동안에만 비워 두세요.
• 목록에 없는 사이트의 방문자에게는 "Form access restricted"가 표시되며 제출이 거부됩니다.

스팸 방지

폼은 여러 단계로 보호됩니다.

• 허니팟: 실제 방문자는 절대 입력하지 않는 보이지 않는 필드입니다. 이 필드를 입력하는 봇은 차단됩니다.
• 속도 제한: 기본적으로 같은 방문자(IP 주소)는 폼을 분당 최대 5회, 시간당 최대 20회까지 제출할 수 있습니다.
• 보안 검사: 리드가 생성되기 전에 제출된 텍스트에 악성 콘텐츠가 있는지 검사합니다.
• Google reCAPTCHA 보호: 편집기의 양식 탭에서 폼별로 켤 수 있는 선택 사항입니다. Google 키와 점수 임계값은 NextCRM 운영자가 중앙에서 관리합니다.

참고: NextCRM 설치 환경에 reCAPTCHA가 설정된 경우에만 Google reCAPTCHA 보호를 켜세요. 사용할 수 있는 키가 없으면 삽입된 폼 대신 "Form temporarily unavailable"이 표시됩니다. 켠 후에는 폼을 테스트하세요.

방문자가 제출한 후

양식 탭의 전송 후 작업 섹션에서 방문자에게 보여 줄 화면을 결정합니다. (제출 버튼 텍스트와 팝업 및 오류 메시지의 방문자 언어는 같은 탭의 제출 버튼 및 언어 섹션에서 설정합니다.)

• 개인화된 감사 팝업 표시: 제목, 메시지, 선택 사항인 버튼(레이블 및 URL), 몇 초 후 팝업을 닫는 선택 사항인 팝업 자동 닫기를 설정합니다.
• 웹사이트 / 감사 페이지 열기: 리디렉션 URL, 리디렉션 동작(동일한 iframe/페이지, 허용된 경우 상위 페이지, 새 탭), 지연 시간, 리디렉션 전 메시지를 설정합니다.

팝업과 리디렉션 텍스트에는 {first_name}, {last_name}, {name}, {email}, {company} 자리 표시자를 사용할 수 있습니다. URL은 http:// 또는 https://로 시작해야 합니다.

참고: NextCRM은 폼 제출 후 방문자에게 자동 확인 이메일을 보내지 않습니다. 이메일로 후속 조치를 하려면 리드에서 직접 보내거나 이메일 캠페인을 사용하세요.

제출 후 처리 방식

• 제출할 때마다 선택한 퍼널과 단계에 새 리드가 생성됩니다.
• 이메일 주소가 같은 리드가 이미 있으면 중복 리드를 만드는 대신 해당 리드에 제출 내용이 추가됩니다. 리드의 빈 필드가 채워지고, 파이프라인에서 제거되었던 리드는 다시 복원됩니다.
• 리드 활동에 폼 이름과 함께 "New form submission created this lead."(또는 제출 내용이 추가되었다는 메시지)가 표시됩니다.
• 워크스페이스 구독이 만료되면 폼이 일시 중지되어 제출을 받지 않습니다.

폼을 중지하려면 카드의 삭제 아이콘을 클릭하고 양식 보관을 확인합니다. 폼은 새 제출 수집을 중단하며, 기존 제출 내용은 리드에 그대로 연결되어 있습니다.

관련 문서

• 퍼널과 단계
• 리드와 파이프라인
• 이메일 캠페인
• 문제 해결