외부 사이트에 레거시 양식을 설정하고 스타일을 지정하기

HubSpot에서 양식을 생성한 후에는 HubSpot 페이지나 HubSpot 외부에서 직접 만든 페이지에 해당 양식을 추가할 수 있습니다. HubSpot에서 호스팅하지 않는 외부 사이트에서 양식을 공유하려면 다음 방법 중 하나를 사용할 수 있습니다:

• 기존 페이지에 양식 코드를 삽입하는 방법.
• 링크를 걸 수 있는 독립형 양식 페이지를 생성하는 방법.

두 방법 모두 HubSpot 양식 도구에서 양식을 수정하면 외부 사이트의 실제 양식에 변경 사항이 자동으로 반영됩니다. 양식을 추가한 후에는 양식 편집기를 사용하거나 외부 스타일시트의 CSS를 통해 외부 페이지에 삽입된 HubSpot 양식의 스타일을 조정할 수 있습니다. WordPress를 사용 중이라면, WordPress 게시물이나 페이지에 양식을 삽입하는 방법을 알아보세요.

참고: 이 문서는 레거시 편집기로 제작된 기존 양식에만 해당됩니다. 양식을 생성하고 관리할 때는 업데이트된 양식 편집기를 사용하는 것이 좋습니다. 외부 사이트에서 양식의 스타일을 지정하고 삽입하는 방법을 알아보세요.

시작하기 전에

외부 페이지에 양식 삽입 코드를 추가할 경우, 해당 페이지의 도메인이 사이트 도메인으로 등록되어 있어야 신뢰할 수 있는 도메인으로 처리됩니다. 그렇지 않으면 양식으로 전송된 제출 내용도 스팸 제출물로 분류됩니다.

양식 삽입 코드 확인하기

1. HubSpot 계정에서 더 보기를 클릭한 다음 마케팅 > 양식으로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 마케팅 > 양식으로 이동하세요.
2. 양식 위에 마우스를 올린 다음 ‘작업’ > ‘공유’를 클릭합니다.
3. 대화 상자에서 양식을 제출한 연락처를 Salesforce 캠페인에 추가하려면 ‘Salesforce 캠페인에 연락처 추가’ 드롭다운 메뉴를 클릭하고 캠페인을 선택하세요. 양식에 Salesforce 캠페인을 연결하면 양식의 삽입 코드가 변경됩니다. 이 경우 외부 사이트에 삽입 코드를 다시 추가해야 합니다.
4. '복사'를 클릭합니다.
5. 임베드 코드를 외부 페이지의 HTML 모듈에 붙여넣으세요. 양식의 분석 데이터를 추적하려면 HubSpot 양식을 배치하는 외부 페이지에 HubSpot 추적 코드가 설치되어 있어야 합니다.

독립형 양식 페이지 만들기

공유 링크를 통해 양식을 공유할 수도 있습니다. 공유 링크를 통해 양식은 별도의 URL을 가진 독립형 페이지에 표시됩니다. 이 공유 링크는 숨기거나 비공개로 설정할 수 없습니다. 공유 링크를 가진 사람이라면 누구나 양식에 액세스할 수 있습니다.

1. HubSpot 계정에서 더 보기를 클릭한 다음 마케팅 > 양식으로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 마케팅 > 양식으로 이동하세요.
2. 양식 위에 마우스를 올린 다음 ‘작업’ > ‘공유’를 클릭합니다.
3. 대화 상자에서 ‘공유 링크’ 탭 을 클릭하세요.
4. '복사'를 클릭하여 양식 페이지의 URL을 클립보드에 복사합니다.
5. 브라우저에서 새 창이나 탭을 열고 주소 표시줄에 양식 페이지의 URL을 붙여넣어 페이지를 불러오세요. 양식 페이지 URL을 다른 사람에게 직접 공유하여 양식에 대한 액세스 권한을 부여할 수도 있습니다.
   
   

양식 편집기에서 삽입된 양식의 스타일을 지정하세요

HubSpot 양식 편집기를 사용하여 삽입된 양식의 스타일을 지정할 때는 테마를 사용하거나 직접 사용자 지정 스타일을 적용할 수 있습니다.

참고: 양식 편집기에서 설정한 테마와 스타일은 임베디드 양식이나 독립형 양식 페이지에만 적용됩니다. HubSpot 페이지에 있는 양식의 스타일은 콘텐츠 편집기의양식 모듈 스타일 옵션을 통해서만 설정할 수 있습니다.

테마를 사용하여 양식 스타일 지정하기

사용자 정의 코드를 작성하지 않고 기존 양식의 스타일을 지정하려면, 삽입된 양식이나 독립형 양식 페이지에 미리 설정된 테마를 적용할 수 있습니다. 이러한 테마는 전체 양식 스타일 설정 외에도 양식에 더 많은 사용자 지정 옵션을 제공합니다.

테마를 사용하여 양식 스타일을 지정하려면:

1. HubSpot 계정에서 더 보기를 클릭한 다음 마케팅 > 양식으로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 마케팅 > 양식으로 이동하세요.
2. 양식 위에 마우스를 올린 다음 ‘편집’을 클릭합니다.
3. 양식 편집기에서 ‘스타일 및 미리 보기’ 탭을 클릭합니다.
4. 구형 양식을 편집하는 경우, 왼쪽 창에서 ‘기존 테마 유지’ 확인란의 선택을 해제하세요. 이렇게 하면 이 양식에 적용되었던 이전 HubSpot 기본 스타일이 제거됩니다. 양식에 추가한 사용자 지정 CSS나 JavaScript는 더 이상 작동하지 않습니다. 이 확인란은 계정에서 새로 생성된 양식에는 적용되지 않습니다.
5. 테마를 선택하세요.
6. 오른쪽 상단에서 ‘게시 ’ 또는 ‘업데이트’를 클릭하세요.

사용자 지정 스타일 사용

또한 양식의 스타일을 더 세밀하게 지정할 수도 있습니다.

사용자 정의 스타일을 적용하려면:

1. HubSpot 계정에서 더 보기를 클릭한 다음 마케팅 > 양식으로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 마케팅 > 양식으로 이동하세요.
2. 양식 위에 마우스를 올리고 ‘편집’을 클릭합니다.
3. 양식 편집기에서 ‘스타일 및 미리보기’ 탭을 클릭합니다.
   • 왼쪽 창에서‘스타일’ 섹션을 클릭합니다. 여기에서 양식 필드 너비, 글꼴 종류, 글꼴 크기, 글꼴 색상 및 양식 버튼을 설정할 수 있습니다. 이러한 스타일은 개별 양식 단위로 설정되며, 전체 양식 스타일 설정을 재정의합니다.
   • 양식을 사용자 정의한 후, 오른쪽 상단의 ‘게시’ 또는 ‘업데이트’를 클릭하세요.

외부 스타일시트에서 CSS를 사용하여 임베드된 양식의 스타일을 지정하기 (구식)

레거시 양식을 사용하는 경우, 양식을 원시 HTML 양식으로 삽입할 수 있습니다. 그런 다음 외부 스타일시트의 CSS를 사용하여 이 삽입된 양식의 스타일을 지정할 수 있습니다.

참고: 레거시 양식만 원시 HTML로 설정할 수 있습니다. 업데이트된 양식 편집기에서 CSS를 사용하여 삽입된 양식의 스타일을 지정하는 방법에 대해 자세히 알아보세요.

CSS를 사용하여 삽입된 양식의 스타일을 지정하려면:

1. HubSpot 계정에서 더 보기를 클릭한 다음 마케팅 > 양식으로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 마케팅 > 양식으로 이동하세요.
2. 양식 위에 마우스를 올려놓고 ‘편집’을 클릭하세요.
3. 양식 편집기에서 ‘스타일 및 미리 보기’ 탭을 클릭합니다.
4. '원시 HTML 양식으로 설정' 스위치를 클릭하여 켜십시오. 그러면 양식이 iframe 내부가 아닌 외부 페이지에서 원시 HTML 요소로 렌더링됩니다. 양식에 적용된 HubSpot의 기본 스타일은 모두 제거됩니다.
5. 오른쪽 상단에서 ‘게시 ’ 또는 ‘업데이트’를 클릭하세요.
6. 폼 삽입 코드를 외부 페이지에 추가하세요. 이미 폼을 삽입한 경우, 기존 삽입 코드를 이 새로운 스타일 적용되지 않은 버전으로 교체해야 합니다. 폼을 삽입한 후:
   
   • 외부 스타일시트에서 CSS를 사용하여 양식의 스타일을 지정할 수 있습니다.
   • 또한 양식 삽입 코드를 수정하여 양식을 추가로 사용자 지정할 수도 있습니다. HubSpot 양식은 HTML이 아닌 JavaScript로 구축되어 있으므로, 양식 삽입 코드를 사용자 지정하려면 JavaScript 작업에 능숙한 개발자의 도움이 필요합니다.