외부 웹사이트에서 HubSpot 양 식을 사용하여 리드를 캡처하고 연락처 데이터를 HubSpot 계정에 자동으로 동기화하세요. HubSpot에서 양식의 스타일을 지정하고 양식 임베드 코드를 사용하여 사이트에 추가할 수 있습니다. 또는 공유 링크를 사용하여 독립형 양식을 잠재 고객에게 보낼 수 있습니다.
양식을 임베드하면 연락처를 관리하고, 자동화를 트리거하고, 실적을 분석할 수 있는 HubSpot 계정에 제출물이 직접 동기화됩니다. 예를 들어, 회사 웹사이트의 제품 페이지에 HubSpot 양식을 추가하여 데모 요청을 캡처하고 자동화된 이메일로 후속 조치를 취할 수 있습니다.
양식이 레거시 양식 편집기에서 만들어진 경우 외부 사이트에서 레거시 양식을 설정하고 스타일을 지정하는 방법을 알아보세요.
시작하기 전에
이 기능으로 작업을 시작하기 전에 외부 사이트에서 양식을 사용하기 위한 기술 요구 사항 및 고려 사항을 검토하세요.
요구 사항
양식을 만들고 편집하려면 양식 권한이 필요합니다.
양식 스타일 지정
양식 및 양식 단계의 텍스트, 입력 필드, 버튼 및 배경을 사용자 지정하세요. 양식 스타일 사용자 지정은 모든 양식 단계에 적용됩니다. 개별 양식 단계의 스타일을 개별적으로 지정할 수는 없습니다.
- HubSpot 계정에서 마케팅 > 양식으로 이동합니다.
- 새 양식을 만들거나 기존 양식 위로 마우스를 가져가 편집을 클릭합니다 .
- 왼쪽 사이드바 메뉴에서 styles 스타일링 아이콘을 클릭합니다.
- 양식 스타일 패널에서 다음 구성 요소를 사용자 지정할 수 있습니다:
- 필드: 배경 및 테두리를 포함하여 필드를 사용자 지정합니다. 레이블의 글꼴, 글꼴 크기 및 색상은 물론 도움말 텍스트, 플레이스홀더 및 오류 텍스트의 색상을 사용자 지정할 수도 있습니다.
- 버튼: 버튼의 높이, 모서리 반올림, 배경, 그라데이션을 사용자 지정하고 버튼에 그림자를 추가할 수 있습니다. 버튼 텍스트의 글꼴, 글꼴 크기 및 색상을 사용자 지정할 수도 있습니다.
- 단락(서식 있는 텍스트): 본문 텍스트의 글꼴, 글꼴 크기 및 색상을 사용자 지정합니다.
- 제목: 제목의 글꼴과 텍스트 색상을 사용자 지정합니다. 헤더 텍스트에 그림자를 추가하도록 선택할 수 있습니다.
- 배경: 양식 및 양식 단계의 배경을 사용자 지정합니다. 배경 색상을 설정하거나 배경에 이미지를 사용하도록 선택할 수 있습니다. AI 어시스턴트를 사용하여 이미지를 생성할 수 있습니다. 양식의 테두리를 설정하도록 선택할 수도 있습니다.
- 진행률 표시줄: 진행률 표시줄의 색상과 진행률 표시줄의 글꼴을 포함하여 양식의 진행률 표시줄을 사용자 지정합니다.
독립형 양식 페이지 공유
공유 링크를 사용하여 독립형 페이지에 양식을 표시하세요. 공유 링크가 있는 사람은 누구나 양식에 액세스할 수 있습니다. 공유 링크는 숨기거나 비공개로 설정할 수 없습니다.
공유 링크를 복사하려면 다음과 같이 하세요:
- HubSpot 계정에서 마케팅 > 양식으로 이동합니다.
- 양식 위로 마우스를 가져간 다음 편집을 클릭합니다 .
- 오른쪽 상단에서 검토 및 업데이트를 클릭합니다.
- 오른쪽 패널의 아래쪽에서 업데이트를 클릭합니다.
- 대화 상자에서 공유 링크 복사를 클릭합니다.
- 하단에서 복사를 클릭합니다. 페이지의 웹 주소가 클립보드에 복사됩니다.
- 브라우저에서 새 창이나 탭을 열고 주소 표시줄에 페이지의 URL을 붙여넣어 로드합니다. 양식 페이지 URL을 다른 사람들과 직접 공유하여 다른 사람들이 양식에 액세스할 수 있도록 할 수도 있습니다.
양식 임베드 코드 복사하기
양식 임베드 코드를 복사하여 외부 페이지에 붙여넣어 양식을 외부 페이지에 임베드하세요. 임베드된 양식에 대한 애널리틱스를 추적하려면 HubSpot 양식을 임베드하는 외부 페이지에 HubSpot 추적 코드가 설치되어 있어야 합니다.
임베드 코드를 복사하려면 다음과 같이 하세요:
- HubSpot 계정에서 마케팅 > 양식으로 이동합니다.
- 양식 위로 마우스를 가져가 편집을 클릭합니다.
- 오른쪽 상단에서 검토 및 업데이트를 클릭합니다.
- 오른쪽 패널의 아래쪽에서 업데이트를 클릭합니다.
- 대화 상자에서 임베드 코드 가져오기를 클릭합니다.
- 임베드 코드 탭에서 복사를 클릭합니다.
- 임베드 코드를 외부 페이지의 HTML 모듈에 붙여넣습니다.
양식 개발자 코드에 액세스하려면 마케팅 허브 또는 콘텐츠 허브 프로페셔널 또는 엔터프라이즈 구독이 필요합니다.
양식을 임베드하고 외부 스타일시트에서 CSS를 사용하여 스타일을 사용자 지정합니다. 이 방법을 사용하면 기본 스타일을 재정의하고, 특정 양식 요소에 세분화된 스타일을 적용하고, 임베드된 양식 전체에 일관된 스타일을 적용하기 위한 전역 규칙을 설정할 수 있습니다. CSS를 사용하여 임베드된 양식의 사용자 정의 스타일을 정의하는 방법에 대해 자세히 알아보세요.
개발자 코드에 액세스하려면
- HubSpot 계정에서 마케팅 > 양식으로 이동합니다.
- 양식 위로 마우스를 가져가 편집을 클릭합니다.
- 오른쪽 상단에서 검토 및 업데이트를 클릭합니다.
- 오른쪽 패널의 아래쪽에서 업데이트를 클릭합니다.
- 대화 상자에서 임베드 코드 가져오기를 클릭합니다.
- 개발자 코드(고급) 탭을 클릭합니다.
- 외부에서 CSS 또는 JavaScript를 변경하면 양식이 손상될 수 있다는 위험에 동의하려면 위험을 이해합니다, 코드 표시 확인란을 선택합니다.
- 하단에서 복사를 클릭합니다.
- 외부 페이지에 양식 임베드 코드를 추가합니다. 양식을 임베드한 후에는 외부 스타일시트에서 CSS로 양식의 스타일을 지정할 수 있습니다.
- 재정의할 수 있는 CSS 변수는 이 문서에 나열되어 있습니다.
- 글로벌 스타일은 임베드된 모든 양식의 최상위 스타일을 재정의합니다. 양식 요소 행, 제출 버튼 또는 양식 제목과 같은 양식의 개별 요소를 대상으로 지정할 수도 있습니다.
Forms
