외부 사이트에서 HubSpot 양식 설정 및 스타일 지정하기
마지막 업데이트 날짜: 2월 12, 2025
명시된 경우를 제외하고 다음 구독 중 어느 것에서나 사용할 수 있습니다.
|
HubSpot에서 양식을 만든 후에는 이를 HubSpot 페이지 또는 HubSpot 외부에서 만든 페이지에 추가할 수 있습니다. 양식을 HubSpot에서 호스팅하지 않는 외부 사이트에서 공유할 수 있습니다:
- 기존 페이지에 양식 코드 임베드하기.
- 링크할 수 있는 독립형 양식 페이지를 만듭니다.
어느 방법을 사용하든 HubSpot의 양식 도구에서 양식을 변경하면 외부 사이트의 라이브 양식에 자동으로 반영됩니다. 양식을 추가한 후에는 양식 편집기에서 외부 페이지에 임베드된 HubSpot 양식의 스타일을 지정하거나 외부 스타일시트에서 CSS를 사용하여 스타일을 지정할 수 있습니다.
워드프레스를 사용하는 경우 워드프레스 글이나 페이지에 양식을 삽입하는방법을 알아보세요 .
참고: 2024년 5월 16일부터 외부 페이지에 양식 임베드 코드를 추가할 때 해당 페이지의 도메인을 사이트 도메인으로 추가해야 신뢰할 수 있는 도메인으로 취급됩니다. 그렇지 않으면 양식 제출도 스팸 제출로 필터링됩니다.
양식 임베드 코드 추가하기
양식 임베드 코드에 액세스하려면 다음과 같이 하세요:- HubSpot 계정에서 마케팅 > 양식으로 이동합니다.
- 양식 위에 마우스를 갖다 대고 작업 > 공유를 클릭합니다.
- 대화 상자에서 양식을 제출하는 연락처를 Salesforce 캠페인에 추가하려면 Salesforce 캠페인에 연락처 추가 드롭다운 메뉴를 클릭하고 캠페인을 선택합니다. Salesforce 캠페인을 양식과 연결하면 양식의 임베드 코드가 변경됩니다. 이 경우 외부 사이트에 임베드 코드를 다시 추가해야 합니다.
- 복사를 클릭합니다.
- 임베드 코드를 외부 페이지의 HTML 모듈에 붙여넣습니다. 양식에 대한 애널리틱스를 추적하려면 HubSpot 양식을 배치하는 외부 페이지에 HubSpot 추적 코드가 설치되어 있어야 합니다.
독립형 양식 페이지 만들기
공유 링크를 통해 양식을 공유할 수도 있습니다. 공유 링크에서 양식은 독립형 페이지에 자체 URL로 표시됩니다. 이 공유 링크는 숨기거나 비공개로 설정할 수 없습니다. 공유 링크가 있는 사람은 누구나 양식에 액세스할 수 있습니다.
- HubSpot 계정에서 마케팅 > 양식으로 이동합니다.
- 양식 위로 마우스를 가져가 작업 > 공유를 클릭합니다.
- 대화 상자에서 링크 공유 탭을 클릭합니다.
- 복사를 클릭하여 양식 페이지의 URL을 클립보드에 복사합니다.
- 브라우저에서 새 창이나 탭을 열고 주소창에 양식 페이지의 URL을 붙여넣어 로드합니다. 양식 페이지 URL을 다른 사람들과 직접 공유하여 다른 사람들이 양식에 액세스할 수 있도록 할 수도 있습니다.
양식 편집기에서 임베드된 양식 스타일 지정하기
HubSpot 양식 편집기로 임베드된 양식의 스타일을 지정할 때 테마를 사용하거나 사용자 지정 스타일을 적용할 수 있습니다.
참고: 양식 편집기에서 설정한 테마와 스타일은 임베드된 양식 또는 독립형 양식 페이지에만 적용됩니다. HubSpot 페이지의 양식은 콘텐츠 편집기의양식 모듈 스타일 옵션으로만 스타일을 지정할 수 있습니다.
테마로 양식 스타일 지정
사용자 지정 코드를 작성하지 않고 양식의 스타일을 지정하려는 경우 임베드된 양식 또는 독립형 양식 페이지에 미리 설정된 테마를 적용할 수 있습니다. 이러한 테마는 전역 양식 스타일 설정 외에도 양식에 더 많은 사용자 지정 옵션을 추가합니다.
테마로 양식 스타일을 지정하려면 다음과 같이 하세요:
- HubSpot 계정에서 마케팅 > 양식으로 이동합니다.
- 양식 위로 마우스를 가져가 편집을 클릭합니다.
- 양식 편집기에서 스타일 및 미리보기 탭을 클릭합니다.
- 레거시 양식을 편집하는 경우 왼쪽 창에서 이전 테마 유지 확인란의 선택을 취소합니다. 이렇게 하면 이 양식에 적용된 이전의 기본 HubSpot 스타일이 제거됩니다. 양식에 추가한 사용자 지정 CSS 또는 JavaScript는 더 이상 작동하지 않습니다. 이 확인란은 계정에서 만든 새 양식에는 적용되지 않습니다.
- 테마를 선택합니다.
- 오른쪽 상단에서 게시 또는 업데이트를 클릭합니다.
사용자 지정 스타일 사용
마케팅 허브 스타터, 프로페셔널 또는 엔터프라이즈에 HubSpot 계정을 구독하는 경우 임베드된 양식의 스타일을 보다 세분화된 수준에서 지정할 수도 있습니다.
사용자 지정 스타일을 적용하려면 다음과 같이 하세요:
- HubSpot 계정에서 마케팅 > 양식으로 이동합니다.
- 양식 위로 마우스를 가져간 다음 편집을 클릭합니다.
- 양식 편집기에서 스타일 및 미리보기 탭을 클릭합니다.
- 왼쪽 창에서스타일 섹션을 클릭합니다. 여기에서 양식 필드 너비, 글꼴 모음, 글꼴 크기, 글꼴 색상 및 양식 버튼을 구성할 수 있습니다. 이러한 스타일은 개별 양식 기준으로 설정되며 전역 양식 스타일 설정을 재정의합니다.
- 양식을 사용자 지정한 후 오른쪽 상단에서 게시 또는 업데이트를 클릭합니다.
외부 스타일시트에서 CSS로 임베드된 양식 스타일 지정하기
마케팅 허브, 콘텐츠 허브 프로페셔널 또는 엔터프라이즈에 HubSpot 계정이 있는 경우 양식을 원시 HTML 양식으로 임베드한 다음 외부 스타일시트에서 이 임베드된 양식의 스타일을 CSS로 지정할 수 있습니다.
임베드된 양식의 스타일을 CSS로 지정하려면 다음과 같이 하세요:
- HubSpot 계정에서 마케팅 > 양식으로 이동합니다.
- 양식 위로 마우스를 가져가 편집을 클릭합니다.
- 양식 편집기에서 스타일 및 미리 보기 탭을 클릭합니다.
- 원시 HTML 양식으로 설정 스위치를 클릭하여 전환합니다. 양식은 iframe 내부가 아닌 외부 페이지에서 원시 HTML 요소로 렌더링되며 양식에 적용된 모든 기본 HubSpot 스타일링이 제거됩니다.
- 오른쪽 상단에서 게시 또는 업데이트를 클릭합니다.
- 외부 페이지에 양식 임베드 코드를 추가합니다. 이미 양식을 임베드한 경우에는 기존 임베드 코드를 스타일이 적용되지 않은 새 버전으로 교체해야 합니다. 양식을 임베드한 후
- 외부 스타일시트에서 CSS로 양식의 스타일을 지정할 수 있습니다.
- 양식 임베드 코드를 수정하여 추가 양식 사용자 지정을 할 수도 있습니다. HubSpot 양식은 HTML이 아닌 JavaScript로 구축되었으므로 양식 임베드 코드를 사용자 지정하려면 JavaScript로 작업하는 방법을 알고 있는 개발자의 도움이 필요합니다.