콘텐츠로 건너뛰기
주의:: 이 문서는 사용자의 편의를 위해 제공됩니다. 이 문서는 번역 소프트웨어를 사용하여 자동으로 번역되었으며 교정을 거치지 않았을 수 있습니다. 이 문서의 영어 버전이 가장 최신의 정보를 확인할 수 있는 공식 버전으로 간주해야 합니다. 여기에서 액세스할 수 있습니다..

HubSpot 페이지에서 양식 설정 및 스타일 지정(레거시)

마지막 업데이트 날짜: 2025년 12월 12일

명시된 경우를 제외하고 다음 구독 중 어느 것에서나 사용할 수 있습니다.

HubSpot에서 양식을 생성한 후 HubSpot 페이지의 모든양식 모듈에 추가할 수 있습니다. 각 페이지에서 양식 제출 후 발생할 동작을 구성하고 제출 버튼 및 양식 필드와 같은 양식 요소의 스타일을 맞춤 설정할 수도 있습니다.

이 문서는 레거시 편집기로 제작된 기존 양식에만 적용됩니다. 새 양식 생성 및 관리는 업데이트된 양식 편집기를 사용하는 것이 좋습니다. HubSpot 페이지에서 양식 스타일링에 대해 자세히 알아보세요. 

시작하기 전에

HubSpot 페이지에 양식을 설정하기 전에 다음 사항을 유의하세요: 

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

양식 설정 방법

HubSpot 페이지에 양식을 설정하려면:
  1. 콘텐츠로 이동하세요:

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

The page editor, displaying the option to add a form to the landing page.

양식 내용 사용자 지정

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

  1. 양식 내용 섹션을 클릭하여 확장하세요.
  2. 양식 내용 구성: 
    • 양식 필드: 필드를 클릭하여 드래그하면 양식에 표시되는 순서를 편집할 있습니다. 다중 열 양식이나 사용자 정의 모듈의 일부인 경우 양식 필드를 드래그 앤 드롭할 수 없습니다. 추가 양식 필드를 추가하려면:
      • + 다른 양식 필드 추가를 클릭하세요.
      • 속성 선택 드롭다운 메뉴를 클릭하고 검색창을 사용하여 필드를 검색하세요. 
      • 속성을 클릭하여 양식 필드로 추가합니다. 
    • 버튼 텍스트: 제출 버튼에 표시할 텍스트를 입력하세요.
    • 데이터 개인정보 보호 및 동의 옵션: 드롭다운 메뉴에서 표시할 공지 및 동의 정보를 선택하십시오.
    • 캡차(스팸 방지): 캡차(스팸 방지) 스위치를 켜면 Google의 보이지 않는 reCAPTCHA가 표시됩니다.

참고: 양식 내용을업데이트하면 해당 양식이 사용되는 다른 모든 페이지( 임베드된 양식 또는 독립형 양식 페이지 포함)의 양식도 업데이트됩니다.



The page editor, displaying the option to edit form content, such as form fields, the button text, and data privacy and consent options. 

제출 후 동작 구성

기본적으로 HubSpot 페이지에 추가된 양식은양식 제출 후 ' ' 인라인 메시지를 표시합니다. 양식 편집기에서 구성한 제출 후 동작은 표시되지 않습니다.

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

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

The page editor, displaying the option to edit form's thank you messaging or redirect to another page.

양식 자동화 구성

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

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

양식의 자동화 설정을 구성하려면 왼쪽 패널에서 양식 자동화를 클릭하여 섹션을 확장한 후 다음 자동화 옵션을 검토하세요:

  • 이메일 주소에 대해 항상 새 연락처 생성: 양식이 제출될 때마다 기존 연락처와 일치하는 usertoken이 있더라도 새 이메일 주소로 새 연락처 레코드를 생성합니다. 
  • 생성된 연락처를 마케팅 연락처로 설정: 이 양식을 통해 생성된 모든 연락처를 마케팅 연락처로설정합니다 .
  • 이메일로 후속 조치:양식을 제출한 방문자에게 후속 이메일을 발송합니다. 후속 이메일은 마케팅 연락처에게만 발송할 수 있습니다. 
    • 후속 이메일 추가 방법:
      • 이메일 선택 +를 클릭합니다.
      • 대화 상자에서 이메일 선택 드롭다운 메뉴를 클릭하고 기존 자동 이메일을 선택하거나 새 이메일 만들기를 클릭하여 새 자동 이메일을 생성합니다.
      • 저장을 클릭합니다. 선택한 후속 이메일이 왼쪽 패널에 표시됩니다. 
      • 후속 이메일 설정이 완료되면 오른쪽 상단의 게시 또는 업데이트를 클릭하여 변경 사항을 적용하세요. 변경 사항이 게시되기 전까지는 후속 이메일이 활성화되지 않습니다. 
    • 사용 중인 후속 이메일을 변경하려면 해당 이메일 위에 마우스를 올린 후 이메일 옆의 연필 아이콘을 클릭하세요. 
    • 후속 이메일을 제거하려면 해당 이메일 위에 마우스를 올린 후 이메일 옆에 있는 X 아이콘을 클릭하세요. 그러면 해당 이메일이 더 이상 표시되지 않습니다. 
    • 양식이 기존 후속 이메일과 연결된 경우 '이 양식은 기존 후속 이메일을 사용 중입니다'라는 경고가 표시됩니다. 기존 후속 이메일은 편집할 수 없지만, 이전에 게시된 이메일이라면 자동화된 이메일로 업데이트할 수 있습니다. 업데이트된 자동화된 이메일은 이후 편집이 가능합니다. 
      • 이전에 게시된 레거시 후속 이메일을 편집 가능한 자동화 이메일로 업데이트하려면 '이메일 업데이트'를 클릭한 후 '업데이트'를 클릭하세요. 이메일이 이전에 게시된 적이 없다면 이 옵션은 표시되지 않습니다. 
      • 게시되었거나 게시되지 않은 기존 후속 이메일을 제거하려면 '제거'를 클릭한 후 '제거'를 다시 클릭하세요. 
  • 연결된 워크플로: 해당 양식을 등록 트리거로 사용하는 모든 워크플로 및 간단한 워크플로가 표시됩니다. 양식과 함께 자동화 사용에 대해 자세히 알아보세요. 
    • 양식을 워크플로의 트리거로 사용하려면 워크플로에 양식 추가 또는 다른 워크플로에 양식 추가를 클릭하세요. 
      • 워크플로에 양식 추가를 클릭합니다.
      • 기존 워크플로를 선택하거나 새 워크플로 생성을 클릭하여 새 워크플로를 생성하세요. 새 워크플로를 생성한 경우 워크플로를 설정한 후 랜딩 페이지 또는 웹사이트 페이지의 양식 모듈로 돌아가세요. 
    • 다른 워크플로를 추가하려면 '다른 워크플로에 양식 추가'를 클릭한 후 기존 워크플로를 선택하거나 '새 워크플로 만들기'를 클릭하세요.
    • 워크플로우에서 양식을 트리거로 제거하려면 워크플로우 위에 마우스를 올려놓고 워크플로우 옆의 삭제 아이콘을 클릭하세요. 

참고:

  • 폼 모듈에 워크플로가 연결되면 페이지가 게시되거나 업데이트되지 않았더라도 워크플로 등록 트리거가 즉시 업데이트됩니다.
  • 워크플로에 연락처를 등록하도록 설정된 양식이 포함된 HubSpot 페이지를 복제할 경우, 새로 복제된 페이지의 양식 제출 내용은 워크플로에 새로운 등록 트리거로 추가되지 않습니다



The page editor, displaying the option to edit form's automation settings.

추가 양식 옵션 구성

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

양식의 추가 옵션을 구성하려면 왼쪽 패널 하단으로 스크롤한 후 다음 옵션을 설정하세요:

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

The page editor, displaying the option to send form notifications to users.

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

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

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

참고: HubSpot 페이지에 표시되는양식은 페이지별로만 스타일을 맞춤 설정할 수 있습니다. 외부 페이지에임베드된 양식이나 독립형 양식 페이지는 양식 편집기에서 스타일을 설정하거나 외부 스타일시트에서 CSS로 스타일을 지정해야 합니다.


The page editor, displaying form style options.

 

이 문서가 도움이 되었나요?
이 양식은 문서 피드백에만 사용됩니다. HubSpot으로 도움을 받는 방법 알아보기.