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