마지막 업데이트 날짜: 2026년 8월 5일
외부 웹사이트에서 HubSpot 양식을 사용하여 리드를 확보하고, 연락처 데이터를 HubSpot 계정에 자동으로 동기화하세요. HubSpot에서 양식의 디자인을 설정한 후, 양식 삽입 코드를 사용하여 사이트에 추가할 수 있습니다. 또는 공유 링크를 사용하여 대상 고객에게 독립형 양식을 보낼 수도 있습니다.
양식을 삽입하면 제출된 내용이 HubSpot 계정으로 직접 동기화되므로, 해당 계정에서 연락처를 관리하고 자동화를 실행하며 성과를 분석할 수 있습니다. 예를 들어, 회사 웹사이트의 제품 페이지에 HubSpot 양식을 추가하여 데모 요청을 수집하고 자동 이메일을 통해 후속 조치를 취할 수 있습니다.
기존 양식 편집기에서 양식을 생성한 경우, 외부 사이트에서 기존 양식을 설정하고 스타일을 적용하는 방법을 확인해 보세요.
시작하기 전에
이 기능을 사용하기 전에, 외부 사이트에서 양식을 사용할 때의 기술적 요구 사항 및 고려 사항을 확인하십시오.
요구 사항
권한 필요 양식을 생성하거나 편집하려면 양식편집 권한이 필요합니다.
- 임베드된 양식의 분석 데이터를 추적하려면 외부 페이지에 HubSpot 추적 코드를 설치해야 합니다 .
- 외부 사이트에 HubSpot 양식을 삽입할 때는 추적 설정에 해당 사이트 도메인을 추가해야 합니다. 추가되지 않은 도메인에서 제출된 양식은 스팸으로 표시됩니다.
제한 사항 및 고려 사항
- 업데이트된 양식 편집기에서는 양식을 원시 HTML 양식으로 설정할 수 없습니다. 기존 양식 편집기를 사용하여 만든 양식만 원시 HTML로 설정할 수 있습니다.
- 양식 삽입 코드를 사용자 지정하려면 JavaScript를 다룰 줄 아는 개발자의 도움이 필요합니다. 더 고급 사용자 지정은 맞춤 제작된 양식과 HubSpot Forms API를 사용하여 수행할 수 있습니다.
양식 스타일 지정
양식 및 양식 단계의 텍스트, 입력 필드, 버튼, 배경을 사용자 지정할 수 있습니다. 양식 스타일 사용자 지정은 모든 양식 단계에 적용됩니다. 개별 양식 단계의 스타일을 따로 지정할 수는 없습니다.
- HubSpot 계정에서 더 보기를 클릭한 다음 마케팅 > 양식으로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 마케팅 > 양식으로 이동하세요.
- 새 양식을 만들거나 기존 양식 위에 마우스를 올린 후 ‘편집’을 클릭하세요 .
- 왼쪽 사이드바 메뉴에서 ‘ ’ 스타일 아이콘을 클릭하세요.
- '양식 스타일' 패널에서 다음 구성 요소를 사용자 지정할 수 있습니다.
- 필드: 배경 및 테두리를 포함하여 필드를사용자 지정할 수 있습니다. 또한 레이블의 글꼴, 글꼴 크기 및 색상은 물론, 도움말 텍스트, 자리 표시자 및 오류 텍스트의 색상도 사용자 지정할 수 있습니다.
- 버튼: 버튼의 높이, 모서리 둥글림, 배경, 그라데이션을 사용자 지정하고 버튼에 드롭 섀도우를 추가할 수 있습니다. 또한 버튼 텍스트의 글꼴, 글꼴 크기 및 색상을 사용자 지정할 수도 있습니다.
- 단락(서식 있는 텍스트): 본문 텍스트의 글꼴, 글꼴 크기 및 색상을 사용자 지정할 수 있습니다.
- 제목: 제목의 글꼴과 텍스트 색상을사용자 지정할 수 있습니다 . 제목 텍스트에 드롭 섀도우를 추가할 수도 있습니다.
- 배경: 양식 및 양식 단계의 배경을 사용자 지정할 수 있습니다. 배경색을 설정하거나 이미지를 배경으로 사용할 수 있습니다. AI 어시스턴트를 사용하여 이미지를 생성할 수도 있습니다. 또한 양식에 테두리를 설정할 수도 있습니다.
- 진행률 표시줄: 진행률 선의 색상과 진행률 표시줄의 글꼴을 포함하여 양식의 진행률 표시줄을 사용자 지정할 수 있습니다.
독립형 양식 페이지 공유
공유 링크를 사용하여 양식을 독립형 페이지에 표시할 수 있습니다. 공유 링크를 알고 있는 사람이라면 누구나 양식에 접근할 수 있습니다. 공유 링크 URL은 자동으로 생성되며, 편집하거나 사용자 지정할 수 없습니다.
공유 링크를 복사하려면:
- HubSpot 계정에서 더 보기를 클릭한 다음 마케팅 > 양식으로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 마케팅 > 양식으로 이동하세요.
- 양식 위에 마우스를 올린 다음 ‘편집’을 클릭하세요 .
- 오른쪽 상단에서 ‘검토 및 업데이트’를 클릭하세요.
- 오른쪽 패널 하단에서 ‘업데이트’를 클릭합니다.
- 표시되는 대화 상자에서 ‘공유 링크 복사’를 클릭하세요.
- 하단에서 ‘복사’를 클릭합니다. 그러면 페이지의 웹 주소가 클립보드에 복사됩니다.
- 브라우저에서 새 창이나 탭을 열고 주소 표시줄에 페이지 URL을 붙여넣어 페이지를 불러오세요. 양식 페이지 URL을 다른 사람과 직접 공유하여 양식에 대한 액세스 권한을 부여할 수도 있습니다.
양식 삽입 코드 복사
양식 삽입 코드를 복사하여 외부 페이지에 붙여넣어 양식을 삽입하세요. 삽입된 양식의 분석 데이터를 추적하려면, HubSpot 양식을 삽입하는 외부 페이지에 HubSpot 추적 코드가 설치되어 있어야 합니다.
임베드 코드를 복사하려면:
- HubSpot 계정에서 더 보기를 클릭한 다음 마케팅 > 양식으로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 마케팅 > 양식으로 이동하세요.
- 양식 위에 마우스를 올리고 ‘편집’을 클릭하세요.
- 오른쪽 상단에서 ‘검토 및 업데이트’를 클릭하세요.
- 오른쪽 패널 하단에서 ‘업데이트’를 클릭합니다.
- 표시되는 대화 상자에서 ‘임베드 코드 가져오기’를 클릭하세요.
- '임베드 코드 ' 탭에서 '복사'를 클릭합니다.
- 외부 페이지의 HTML 모듈에 삽입 코드를 붙여넣으세요.
양식 개발자 코드에 액세스하기
구독 필요 양식 개발자 코드에 액세스하려면 Marketing Hub 또는 Content Hub Professional 또는 Enterprise 구독이 필요합니다.
양식을 삽입하고 외부 스타일시트의 CSS를 사용하여 스타일을 사용자 지정하세요. 이 방법을 사용하면 기본 스타일을 재정의하고, 특정 양식 요소에 세부적인 스타일을 적용하며, 삽입된 모든 양식에서 일관된 스타일을 유지하기 위한 전역 규칙을 설정할 수 있습니다. CSS를 사용하여 삽입된 양식에 사용자 지정 스타일을 정의하는 방법에 대해 자세히 알아보세요.
개발자 코드에 액세스하려면:
- HubSpot 계정에서 더 보기를 클릭한 다음 마케팅 > 양식으로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 마케팅 > 양식으로 이동하세요.
- 양식 위에 마우스를 올리고 ‘편집’을 클릭하세요.
- 오른쪽 상단에서 ‘검토 및 업데이트’를 클릭하세요.
- 오른쪽 패널 하단에서 '업데이트'를 클릭합니다.
- 표시되는 대화 상자에서 ‘임베드 코드 가져오기’를 클릭하세요.
- '개발자 코드(고급) ' 탭을 클릭합니다.
- CSS 또는 JavaScript에 대한 외부 변경으로 인해 양식이 제대로 작동하지 않을 수 있는 위험을 감수하려면 '위험을 이해했으며 코드를 표시해 주세요' 확인란을 선택합니다.
- 하단에서 ‘복사’를 클릭합니다.
- 양식 삽입 코드를 외부 페이지에 추가합니다. 양식을 삽입한 후에는 외부 스타일시트에서 CSS를 사용하여 양식의 스타일을 지정할 수 있습니다.
- 재정의할 수 있는 CSS 변수는 이 문서에 나열되어 있습니다.
- 전역 스타일은 삽입된 모든 양식에 적용된 최상위 스타일을 재정의합니다. 또한 양식 요소 행, 제출 버튼 또는 양식 제목과 같은 양식의 개별 요소를 대상으로 지정할 수도 있습니다.
