HubSpot 페이지에서 양식 설정 및 디자인하기 (구 버전)

HubSpot에서 양식을 생성한 후에는 HubSpot 페이지의 모든양식 모듈에 해당 양식을 추가할 수 있습니다. 또한 각 페이지에서 양식이 제출된 후의 동작을 설정하고, 제출 버튼이나 양식 입력란과 같은 양식 요소의 스타일을 사용자 지정할 수도 있습니다.

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

시작하기 전에

HubSpot 페이지에 양식을 설정하기 전에 다음 사항을 유의해 주십시오. 

• 설정 및 스타일 변경 사항은 선택한 페이지의 양식 모듈에만 적용됩니다. 변경된 설정 및 스타일은 다른 페이지의 양식에는 영향을 미치지 않습니다.
• 양식 필드와 같은 양식 내용을 업데이트하면, 삽입된 양식이나 독립형 양식 페이지를 포함하여 다른 모든 페이지의 양식이 업데이트됩니다. 

양식 설정하기

1. 콘텐츠로 이동합니다:

   • 웹사이트 페이지: HubSpot 계정에서 더 보기를 클릭한 다음 콘텐츠 > 웹사이트 페이지로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 콘텐츠 > 웹사이트 페이지로 이동하세요.
   • 랜딩 페이지: HubSpot 계정에서 더 보기를 클릭한 다음 콘텐츠 > 랜딩 페이지로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 콘텐츠 > 랜딩 페이지로 이동하세요.
2. 페이지 이름을 클릭합니다.
3. 콘텐츠 편집기에서 양식 모듈을 클릭하세요. 현재 페이지에 양식 모듈이 없는 경우, 페이지에 모듈을 추가하는 방법을 확인하세요. 
4. 왼쪽 패널의 ‘콘텐츠’ 탭에서 이 페이지에 대한 양식 설정을 사용자 지정하세요:
   • 양식 제목: 양식의 이름을입력하세요 .
   • 양식: 이 페이지에 사용할 양식을 선택합니다.
     • 기존 양식을 사용하려면 드롭다운 메뉴를 클릭하고 양식을 선택하십시오. 
     • 새 양식을 생성하여 사용하려면 [ 작업 ] > [ 새 양식 만들기]를 클릭하십시오. 양식 설정에 대해 자세히 알아보기
     • 이 양식의 제출 내역을 보려면 ‘작업’ > ‘양식 제출 내역 보기’를 클릭하세요.
     • 이 양식을 복제하려면 ‘작업’ > ‘양식 복제’를 클릭하세요.
     • 선택한 양식을 사용하는 다른 페이지를 확인하려면 '작업' > '이 양식을 사용하는 페이지'를 클릭하세요.
     • 양식 편집기에서 양식을 편집하려면 ‘작업’ > ‘전체 양식 편집기로 이동’을 클릭하세요. 
       
       

양식

내용 사용자 지정

양식 필드, 버튼 텍스트, 데이터 개인정보 보호 및 동의 옵션을 편집하려면:

1. '양식 내용' 섹션을 클릭하여 펼치십시오.
2. 양식 내용을 구성합니다: 
   • 양식 필드: 필드를 클릭하고 드래그하여 양식에 표시되는 순서를 편집할 수 있습니다. 다중 열 양식이나 사용자 지정 모듈의 일부인 경우 양식 필드를 드래그 앤 드롭할 수 없습니다. 양식 필드를 추가하려면:
     • '+ 양식 필드 추가'를 클릭하세요.
     • '속성 선택' 드롭다운 메뉴를 클릭하고 검색 창을 사용하여 필드를 검색하세요. 
     • 속성을 클릭하여 양식 필드로 추가하세요. 

• • 버튼 텍스트: 제출 버튼에 표시할 텍스트를 입력하세요.
  • 데이터 개인정보 보호 및 동의 옵션: 드롭다운 메뉴에서 표시할 공지 및 동의 정보를 선택하십시오.
  • 캡차(스팸 방지): 클릭하여 캡차(스팸 방지) 스위치를 켜면 Google의 보이지 않는 reCAPTCHA가 표시됩니다.

참고: 양식 내용을업데이트하면 , 삽입된 양식이나 독립형 양식 페이지를 포함하여 해당 양식이 사용된 다른 모든 페이지의 양식도 함께 업데이트됩니다.

제출 후 동작 구성

기본적으로 HubSpot 페이지에 추가된 양식에는 양식 제출에 감사드립니다라는 인라인 메시지가 표시됩니다. 양식 편집기에서 구성된 제출 후 동작은 표시되지 않습니다.

페이지 편집기에서 다른 제출 후 동작을 사용자 지정할 수 있습니다. 양식 제출 후 수행할 동작을 구성하려면:

1. '감사 메시지 ' 섹션을 클릭하여 확장합니다.
2. '양식 제출 후 방문자에게 표시될 내용' 섹션에서 양식 제출 후 동작을 설정하세요: 
   • 다른 페이지로 리디렉션: 양식 제출 후 방문자를 다른 페이지로 이동시킵니다 .
     • '다른 페이지로 리디렉션'을 클릭합니다.
     • '리디렉션 링크' 드롭다운 메뉴를 클릭하고 기존 HubSpot 페이지를 선택하거나 URL을 입력합니다.
   • 인라인 감사 메시지 표시: 방문자가 양식을 제출한 후 메시지를 표시합니다. 텍스트 상자에 감사 메시지를 입력할 수 있습니다.

양식 자동화 구성

연락처 생성 및 마케팅 이메일 옵션과 같은 양식 자동화는 물론, 양식과 연결된 모든 워크플로를 관리할 수 있습니다. 등록 트리거는 다음과 같은 동작을 따릅니다:

• 양식 모듈의 자동화 설정에 워크플로가 추가되면, 해당 양식 제출 등록 트리거가 워크플로에 추가됩니다.
• 양식 모듈의 자동화 설정에서 워크플로를 제거하면 워크플로의 등록 트리거에서도 해당 워크플로가 제거됩니다.
• 워크플로우에서 사용되는 양식 등록 트리거에 페이지가 지정되어 있지 않은 경우, 해당 트리거를 페이지에서 제거할 수 없으며 대신 워크플로우에서 제거해야 합니다.

양식의 자동화 설정을 구성하려면 왼쪽 패널에서 [양식 자동화 ]를 클릭하여 해당 섹션을 펼친 다음, 다음 자동화 옵션을 확인하십시오:

• 이메일 주소에 대해 항상 새 연락처 생성: 양식 제출 시 기존 연락처와 일치하는 usertoken이 있는지 여부와 관계없이, 새로운 이메일 주소가 포함된 양식이 제출될 때마다 새 연락처 레코드를 생성합니다. 
• 생성된 연락처를 마케팅 연락처로 설정: 이 양식을 통해 생성된 모든 연락처를 마케팅 연락처로설정합니다 .
• 이메일로 후속 조치:양식을 제출한 방문자에게 후속 이메일을 보냅니다. 후속 이메일은 마케팅 연락처에게만 발송할 수 있습니다. 
  • 후속 이메일을 추가하려면:
    • '이메일 선택 +'를 클릭합니다.
    • 대화 상자에서 ‘이메일 선택’ 드롭다운 메뉴를 클릭하고 기존 자동 이메일을 선택하거나, ‘새 이메일 만들기’를 클릭하여 새로운 자동 이메일을 생성합니다.
    • '저장'을 클릭합니다. 선택한 후속 이메일이 왼쪽 패널에 표시됩니다. 
    • 후속 이메일을 설정한 후, 오른쪽 상단의 ‘게시’ 또는 ‘업데이트’를 클릭하여 변경 사항을 적용하십시오. 변경 사항이 게시될 때까지 후속 이메일은 활성화되지 않습니다. 

• • 사용 중인 후속 이메일을 변경하려면 이메일에 마우스를 올려놓고 이메일 옆에 있는 연필 아이콘을 클릭하세요. 
  • 후속 이메일을 제거하려면 해당 이메일 위에 마우스를 올려놓고 이메일 옆에 있는 'X' 아이콘을 클릭하세요. 그러면 이메일이 더 이상 표시되지 않습니다. 
  • 양식이 이전에 구형 후속 이메일에 연결되어 있던 경우, “이 양식은 구형 후속 이메일을 사용하고 있습니다.”라는 알림이 표시됩니다. 구형 후속 이메일은 편집할 수 없지만, 이메일이 이전에 게시된 적이 있다면 자동화 이메일로 업데이트할 수 있습니다. 업데이트된 자동화 이메일은 이후 편집이 가능합니다. 
    • 이전에 게시된 기존 후속 이메일을 편집 가능한 자동 이메일로 업데이트하려면 ‘이메일 업데이트’를 클릭한 다음 ‘업데이트’를 클릭하세요. 이메일이 이전에 게시된 적이 없다면 이 옵션은 표시되지 않습니다. 

• • • 게시되었거나 게시되지 않은 레거시 후속 이메일을 삭제하려면 ‘삭제’를 클릭한 다음, ‘삭제’를 클릭하십시오. 

• 연동된 워크플로: 해당 양식을 등록 트리거로 사용하는 모든 워크플로 및 단순 워크플로가 표시됩니다. 양식과 자동화 기능을 함께 사용하는 방법에 대해 자세히 알아보세요. 
  • 양식을 워크플로우의 트리거로 사용하려면 ‘워크플로우에 양식 추가’ 또는 ‘다른 워크플로우에 양식 추가’를 클릭하세요. 
    • '워크플로우에 양식 추가'를 클릭하세요.
    • 기존 워크플로를 선택하거나 ‘새 워크플로 만들기’를 클릭하여 새 워크플로를 만드세요. 새 워크플로를 만든 경우, 워크플로를 설정한 후 랜딩 페이지 또는 웹사이트 페이지의 양식 모듈로 돌아가세요. 
  • 다른 워크플로를 추가하려면 ‘다른 워크플로에 양식 추가’를 클릭한 다음, 기존 워크플로를 선택하거나 ‘새 워크플로 만들기’를 클릭하세요.
  • 워크플로우의 트리거로 설정된 양식을 제거하려면 워크플로우 위에 마우스를 올린 다음 워크플로우 옆에 있는 삭제 아이콘을 클릭하십시오. 

추가 양식 옵션 구성

양식 알림 수신자 선택과 같은 추가 설정도 구성할 수 있습니다. 또한, HubSpot-Salesforce 연동을 설치한 경우 양식을 활성 Salesforce 캠페인과 연결할 수도 있습니다.

양식의 추가 옵션을 구성하려면 왼쪽 패널 하단으로 스크롤한 다음 다음 옵션을 구성하십시오:

• 양식 기본값 대신 지정된 이메일 주소로 양식 알림 보내기: 기본적으로 양식 제출 알림은 양식의 ‘옵션’ 탭에 추가된 모든 수신자에게 전송됩니다. 양식의 기본 수신자를 재정의하고 이 페이지의 제출물에 대한 알림 수신자를 선택하려면:
  • '양식 기본값 대신 지정된 이메일 주소로 알림 보내기' 토글을 클릭하여 켭니다.
  • '이메일 주소' 드롭다운 메뉴를 클릭하고 수신자를 선택하세요. 양식 알림 수신자로는 HubSpot 사용자만 선택할 수 있습니다. 
  • 수신자를 제거하려면 수신자의 이메일 주소 옆에 있는 X 아이콘을 클릭하세요. 
• Salesforce 캠페인: Salesforce 연동이 활성화된 경우 , 드롭다운 메뉴를 클릭하고 캠페인을 선택하여 양식을 활성 Salesforce 캠페인과 연결할 수 있습니다. 양식을 Salesforce 캠페인과 연결하는 방법에 대해 자세히 알아보세요.
  
  

HubSpot 페이지에서 양식 스타일 지정하기

양식 전체의 스타일을 사용자 지정할 수 있을 뿐만 아니라, 제출 버튼이나 양식 필드에 대한 구체적인 스타일 변경도 가능합니다. 양식 스타일을 사용자 지정하려면:

1. 콘텐츠로 이동:
   • 웹사이트 페이지: HubSpot 계정에서 더 보기를 클릭한 다음 콘텐츠 > 웹사이트 페이지로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 콘텐츠 > 웹사이트 페이지로 이동하세요.
   • 랜딩 페이지: HubSpot 계정에서 더 보기를 클릭한 다음 콘텐츠 > 랜딩 페이지로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 콘텐츠 > 랜딩 페이지로 이동하세요.
2. 콘텐츠 편집기에서 양식 모듈을 클릭합니다. 페이지에 현재 양식 모듈이 없는 경우, 페이지에 모듈을 추가하는 방법을 확인하세요. 
3. 왼쪽 패널 상단의 ‘스타일’ 탭을 클릭하세요.
4. '모듈', '필드' 또는 '버튼' 탭을 클릭하여 스타일을 적용할 양식 요소를 선택하세요.
5. 아래의 텍스트 및 정렬 옵션을 사용하여 선택한 양식 요소를 사용자 지정하세요.
6. '게시' 또는 '업데이트'를 클릭하여 변경 사항을 페이지에 반영하세요 .

참고: HubSpot 페이지에 표시되는양식은 페이지별로만 스타일을 사용자 지정할 수 있습니다. 외부 페이지에삽입된 양식이나 독립형 양식 페이지의 경우, 양식 편집기에서 스타일을 지정하거나 외부 스타일시트의 CSS를 사용하여 스타일을 지정해야 합니다.