양식 구성하기

빌더에서는 신청 양식이 무엇을 묻는지 결정합니다. 필드를 추가하고, 행으로 묶고, 양식을 여러 페이지로 나누고, 각 필드를 설정합니다. 가운데 미리보기에는 구매자가 스토어에서 보게 될 양식이 그대로 표시됩니다.

참고

빌더를 열려면 Sami B2B Onboarding의 Forms로 이동해 양식 옆의 Edit을 클릭하거나 양식 이름을 클릭합니다. 양식은 관리자 역할의 직원만 편집할 수 있습니다.

빌더 한눈에 보기

영역	위치	용도
섹션 레일	맨 왼쪽	Elements, Appearance, After submit, Email, Integrations 사이를 전환합니다. Collapse를 누르면 아이콘으로 접힙니다.
Elements 패널	왼쪽	양식의 구조: 맨 위의 Header, Content, 필드와 행이 있는 각 페이지, Add page, 맨 아래의 Footer
미리보기	가운데	구매자가 보는 양식. 필드, 페이지 제목, 헤더, 버튼을 클릭하면 선택됩니다.
설정 패널	오른쪽	항목을 선택하면 열리며 해당 항목의 설정을 표시합니다. ×(Close)를 클릭하면 닫힙니다.
도구 모음	미리보기 위	Form name 입력란, Active 또는 Draft 배지, …(More actions), Language, 데스크톱 및 모바일 미리보기 버튼, 인스펙터 버튼, Preview

Elements 패널에는 구매자가 만나는 순서대로 모든 페이지, 행, 필드가 나열됩니다.

레일의 나머지 섹션은 각각 별도의 페이지에서 다룹니다.

섹션	설정 내용	자세히 보기
Appearance	레이아웃, 너비, 글꼴, 필드 스타일, 색상	양식 디자인하기
After submit	감사 메시지 또는 구매자를 보낼 페이지	구매자가 제출한 후
Email	이 양식에 대한 알림을 받을 사람, 그리고 각 이메일의 이 양식 전용 버전	이메일 템플릿 편집하기 및 알림 받을 사람 선택하기
Integrations	Shopify에서 답변이 저장될 위치, 그리고 Klaviyo, 웹훅, 주소 자동 완성, 캡차	답변을 Shopify에 매핑하기

필드 추가하기

1. 필드 목록 열기

   가장 가까운 방법을 사용하세요.

   • Elements 패널에서 페이지 이름 옆의 +(Add field)를 클릭하거나 페이지 끝의 Add field를 클릭합니다. 행 안에서는 Add element를 클릭해 해당 행에 필드를 추가합니다.
   • 미리보기에서 페이지 끝의 Add a field를 클릭합니다.
   • 미리보기에서 필드의 가장자리에 마우스를 올리고 나타나는 **+**를 클릭합니다. 툴팁에는 Add field above, Add field below, Add field to the left, Add field to the right가 표시됩니다. 왼쪽과 오른쪽은 새 필드를 이 필드 옆에 같은 행으로 배치합니다.

2. 필드 찾기

   목록을 스크롤하거나 Search fields에 입력해 범위를 좁힙니다.

   

   필드는 종류별로 그룹화되어 있으며, 주소 블록의 Add all을 누르면 한 번의 클릭으로 주소 전체가 추가됩니다.

3. 추가하기

   필드를 클릭합니다. 필드가 페이지에 추가되고 선택되며 오른쪽에 설정이 열립니다. 레이블을 지정하고 필드를 설정하세요(필드 설정 참고).

주의

모든 양식에는 Email 필드 하나와 회사 이름으로 저장되는 필드 하나가 항상 있어야 합니다. Email 필드는 제거하거나 숨길 수 없으며, 회사 이름으로 저장되는 필드가 없으면 Save가 **Map a field to Company · Name.**이라는 메시지와 함께 거부됩니다.

추가할 수 있는 필드

그룹	필드	구매자에게 제공되는 항목
Basic fields	Short text	한 줄 텍스트 입력란
	Long text	여러 줄을 입력할 수 있는 텍스트 입력란
	Number	숫자만 입력할 수 있는 입력란
	Email	답변이 이메일 주소 형식인지 확인하는 입력란
	Phone	국가 깃발, 국가 번호, 번호 확인을 선택적으로 사용할 수 있는 전화번호 입력란
	Country	국가 목록
	State / province	같은 페이지에서 앞에 있는 Country 필드에서 선택한 국가의 주 또는 도 목록. 구매자가 주가 있는 국가를 선택하면 표시되며, 앞에 Country 필드가 없으면 일반 텍스트 입력란이 됩니다.
	Dropdown	하나를 선택하는 목록이며, Allow multiple choices를 켜면 여러 개를 선택할 수 있습니다.
	Checkbox	“I agree to the terms”와 같은 단일 체크박스. 필수로 지정하면 구매자가 반드시 선택해야 합니다.
	Checkboxes	구매자가 원하는 만큼 선택할 수 있는 선택지 목록
	Radio buttons	하나를 선택하는 목록이며, 구매자가 직접 입력하는 Other 선택지를 선택적으로 추가할 수 있습니다.
	Date and time	날짜 선택기, 시간, 또는 둘 다
	File upload	업로드 상자. 기본적으로 최대 10MB의 PDF, JPG, JPEG, PNG 파일을 받습니다.
Company fields	Company name	회사 이름으로 저장되는 텍스트 입력란
	Tax ID	회사의 세금 번호 또는 VAT 번호를 입력하는 텍스트 입력란. 앱의 Tax ID 확인이 이 필드를 읽습니다.
	Website	회사 웹사이트를 입력하는 텍스트 입력란
Document fields	Business license, Tax certificate, Tax registration, Reseller certificate	업로드 상자. 파일은 해당 유형의 문서로 신청과 함께 보관됩니다. 문서를 참고하세요.
Static text	Heading	제목과 그 아래에 선택적으로 표시되는 캡션
	Paragraph	안내 문구 같은 서식 있는 텍스트
	HTML	직접 작성한 HTML 마크업
	Divider	가로선
Address blocks	Shipping address	한 행에 있는 필드 10개: Recipient / department, First name, Last name, Phone, Address line 1, Address line 2, City, Country, State / province, ZIP / postal code. Add all을 클릭하세요.
	Billing address	Same as shipping address 체크박스와 그 뒤의 청구 필드 10개(Department / attention, Billing first name 등). 체크박스를 선택하면 해당 행은 숨겨집니다. Add all을 클릭하세요.
Layout	Row	필드를 넣을 빈 행. 필드를 행으로 묶기를 참고하세요.

주소 블록 전체 대신 주소 필드 하나만 추가하려면 Address blocks 아래의 Show the individual address fields를 클릭하세요. 주소 블록이 추가하는 필드는 매핑하기 전에는 Shopify에 저장되지 않습니다. 답변을 Shopify에 매핑하기를 참고하세요.

필드 설정

미리보기 또는 Elements 패널에서 필드를 클릭합니다. 오른쪽에 설정이 섹션별로 열립니다. 해당 필드 유형에 적용되는 섹션만 표시됩니다.

섹션	설정
Content	Label: 구매자가 읽는 질문. Placeholder: 빈 입력란 안에 흐리게 표시되는 텍스트. Help text: 필드 아래에 표시됩니다. Default: 양식이 열릴 때 미리 입력되는 답변(단일 Checkbox의 경우 Ticked by default).
Options	Dropdown, Checkboxes, Radio buttons용. Add option 또는 Change를 클릭해 선택지를 편집합니다. 각 선택지의 Label을 입력하고, 끌어서 순서를 바꾸고, Add another option을 클릭하거나, Bulk add로 한 줄에 선택지 하나씩 추가합니다. Customer tags는 해당 선택지를 선택한 구매자가 승인될 때 Shopify 고객에게 추가됩니다(각각 최대 40자). 구매자가 읽는 내용과 다른 값을 저장하려면 Use the label as the value를 끄세요. Dropdown에는 Allow multiple choices도 있습니다. Radio buttons에는 Other option, Other label, Other placeholder도 있습니다.
Upload	File upload 및 문서 필드용. Accepted: Only certain file types(그런 다음 File types에 나열) 또는 Any file type. Max size: 1~20MB. Allow more than one file.
Phone number	Show country flag and dial code. 켜면 Check the number is valid와 Default country(다른 국가를 선택하지 않으면 From the buyer’s browser)가 표시됩니다.
Date and time	Asks for: Date, Time, Date and time. Date format, Time format, 날짜 선택기의 Other language, 그리고 Earliest와 Latest가 있는 Limit the range.
Validation	Required. 켜면 필드가 비어 있을 때 표시되는 Error message가 나타나며, 필드의 레이블을 포함하려면 {{ label }}을 입력합니다. Short text, Long text, Email, Phone, Tax ID용 Min characters와 Max characters가 있는 Limit characters. 제한을 비워 두면 제한이 없습니다.
Layout	Icon: 입력란 시작 부분에 표시됩니다(Checkbox, Checkboxes, Radio buttons, 업로드에는 사용할 수 없음). Hide label과 함께 Keep the label’s space, Still show the required mark. Column width: 112. Number of options per line: Checkboxes와 Radio buttons용, 15.
Visibility	Conditional display: 이전 답변에 따라 필드를 표시, 숨김, 필수 지정, 비활성화합니다. 규칙으로 필드 표시, 필수 지정, 비활성화하기를 참고하세요.
Custom CSS	Custom CSS class: 테마의 CSS로 스타일을 지정할 수 있는 클래스 이름. 일반 클래스 이름만 유지됩니다.

Dropdown, Country, State / province의 플레이스홀더는 목록의 첫 줄이며 기본값은 **Select…**입니다. 비우면 **Select…**가 다시 표시됩니다.

정적 텍스트는 설정이 더 적습니다. Heading은 Label에 텍스트가 있고 Caption과 Heading tag(Heading 1~Heading 6)가 있습니다. Paragraph에는 Text, HTML에는 Markup이 있습니다. 이들의 Label은 Elements 패널에 표시되는 이름일 뿐입니다. 모든 정적 텍스트에는 Column width, Visibility, Custom CSS도 있습니다.

필드의 설정은 구매자가 읽는 내용부터 필드가 표시되는 조건까지 섹션별로 그룹화되어 있습니다.

필드 정렬하기

필드 이동하기

• Elements 패널에서: 핸들을 잡고 필드를 끕니다. 다른 필드 위에 놓으면 그 위나 아래에 배치되고, 페이지 이름 위에 놓으면 해당 페이지의 끝으로 이동하며, 행 이름 위에 놓으면 그 행 안으로 들어갑니다.
• 미리보기에서: 필드를 클릭한 다음 도구 모음 왼쪽의 핸들(Drag to move this field)을 잡고 끕니다. 다른 필드의 위쪽 또는 아래쪽 가장자리에 놓으면 그 위나 아래에 배치됩니다. 왼쪽 또는 오른쪽 가장자리에 놓으면 두 필드가 한 행에 나란히 배치됩니다.

열 너비 설정하기

너비는 12개 열을 기준으로 계산하며, 새 필드는 모두 전체 너비인 12로 시작합니다. 연속된 필드는 너비가 맞으면 한 줄을 함께 사용하므로 6인 필드 두 개는 나란히 놓이고 4인 필드 세 개는 세 개의 열이 됩니다.

• 필드 설정에서 Layout › Column width를 끌거나,
• 미리보기에서 선택한 필드의 도구 모음에 있는 Change width를 클릭합니다. 3분의 1, 절반, 전체 너비 순으로 바뀝니다.

양식 너비가 480픽셀보다 좁으면(예: 휴대폰) 모든 필드가 한 줄 전체를 차지합니다.

필드를 행으로 묶기

행은 필드를 한데 묶어 두며, 필드 위에 레이블과 설명이 있는 헤드를 추가할 수 있습니다. 행 전체를 한 번에 표시, 숨김, 이동할 수 있습니다.

행을 만들려면 다음 중 하나를 수행하세요.

• 필드 목록을 열고 Layout 아래의 Row를 클릭합니다. Elements 패널에 빈 행이 나타납니다. 그 안의 Add element를 클릭해 필드를 추가합니다.
• 필드 목록을 열고 Select fields를 클릭합니다(행 밖에 필드가 두 개 이상 있는 페이지에 표시됩니다). Elements 패널에서 필드를 선택한 다음 Group into row를 클릭합니다.
• 다른 필드의 왼쪽 또는 오른쪽에 필드를 추가하거나, 미리보기에서 필드를 다른 필드 옆에 놓습니다.

Elements 패널에서 행 이름을 클릭하면 행 설정이 열립니다.

설정	기능
Label	행의 제목. 구매자에게는 행의 필드 위에 표시됩니다.
Hide the heading block	구매자에게 레이블과 설명을 숨깁니다. 내용은 유지되며 이 설정을 끄면 다시 표시됩니다.
Description	레이블 아래에 표시되는 텍스트
Icon	레이블 옆의 아이콘
Conditional display	이전 답변에 따라 행 전체를 표시하거나 숨깁니다. 규칙으로 필드 표시, 필수 지정, 비활성화하기를 참고하세요.
Ungroup row	행을 해제합니다. 행의 필드는 페이지에 그대로 남습니다.

Elements 패널에서 행의 눈 아이콘은 행의 모든 필드를 숨기고, Duplicate row는 행을 복사합니다. 행에서 필드 하나를 빼려면 필드를 선택하고 Remove from row를 클릭하세요.

Wholesale application 양식은 각 섹션이 이미 Heading 필드로 시작하므로 헤딩 블록을 숨긴 행을 사용합니다.

여러 페이지 사용하기

1. 페이지 추가하기

   Elements 패널 하단의 Add page를 클릭합니다. Untitled page 2라는 페이지가 추가되고 설정이 열립니다. 새 Page name을 입력하고 Enter를 누릅니다.

2. 페이지를 단계로 만들기

   Elements 패널에서 Content를 클릭하고 Show step progress bar를 켭니다. Step labels에서 Name and number, Name only, Number only 중에서 선택합니다.

   이제 구매자에게는 상단에 단계 표시줄이 있는 상태로 한 번에 한 페이지씩 표시됩니다. 각 페이지는 넘어가기 전에 해당 페이지의 답변을 확인하는 Continue 버튼으로 끝나고, 마지막 페이지는 제출 버튼으로 끝납니다. 단계 표시줄이 없으면 모든 페이지가 하나의 양식에 차례로 표시됩니다.

3. 구매자가 이전 단계로 돌아갈 수 있는지 선택하기

   Let buyers go back a step이 기본적으로 켜져 있으므로 첫 번째 단계 이후의 모든 단계에 Back 버튼이 있습니다. 변경하려면 Elements 패널에서 Footer를 클릭합니다. Let buyers go back a step을 끄면 버튼이 제거되며, Back label을 변경할 수도 있습니다. 이 설정은 단계 표시줄이 켜져 있고 양식에 페이지가 두 개 이상일 때만 표시됩니다.

Elements 패널에서 페이지 이름을 클릭하면 페이지 설정이 열립니다.

설정	기능
Page name	빌더와 단계 표시줄에 표시되는 페이지 이름
Hide the heading block	페이지를 첫 번째 필드부터 시작합니다. 제목과 설명은 나중을 위해 유지됩니다.
Heading 및 Description	페이지 상단에 표시됩니다.
Continue button label	페이지의 Continue 버튼 텍스트. 마지막 페이지에는 표시되지 않습니다.
Icon	단계 표시줄에서 이 단계의 번호를 대체합니다. 단계 표시줄이 켜져 있을 때만 표시됩니다.
Header and footer	Use custom header와 Use custom footer는 이 단계에 고유한 헤더 텍스트와 안내 문구를 지정합니다. 구매자가 이전 단계로 돌아갈 수 있는 동안에는 사용자 지정 푸터에 Show Back button on this step도 있습니다. 단계 표시줄이 켜져 있을 때만 표시됩니다.
Visibility	이전 페이지의 답변에 따라 페이지 전체를 표시하거나 숨깁니다.
Delete page	페이지와 해당 필드를 삭제합니다. 양식에는 페이지가 최소 하나 필요하며, Email 필드가 있는 페이지는 해당 필드를 옮기기 전에는 삭제할 수 없습니다.

헤더와 푸터

Elements 패널 상단의 Header 또는 미리보기의 제목을 클릭하세요.

• Show store logo를 켠 다음 Upload image: 약 200×60픽셀의 최대 1MB .jpg, .png, .svg 파일
• 양식 상단의 Heading과 Subheading
• Show this block: 헤더 전체를 표시하거나 숨깁니다.

Elements 패널 하단의 Footer 또는 미리보기의 버튼을 클릭하세요.

• Submit label: 제출 버튼의 텍스트
• Reset button과 Reset label: 양식을 지우는 버튼
• Full-width buttons, 또는 Alignment: Left, Center, Right
• Note: 버튼과 함께 표시되는 텍스트, 그리고 Put the note above the buttons

필드 숨기기, 복사, 제거

• Hide this block(Elements 패널 또는 필드 도구 모음의 눈 아이콘)은 구매자에게 필드를 숨기지만 빌더에는 설정과 함께 그대로 둡니다. 필드는 미리보기에서 사라지고 Elements 패널에서는 회색으로 표시됩니다. 패널의 눈 아이콘을 클릭하면 다시 표시됩니다.
• Duplicate field는 필드 바로 뒤에 사본을 만들고 선택합니다.
• Remove field(도구 모음 또는 설정 패널 하단)는 저장할 때 필드를 삭제합니다.

양식 미리보기

• Desktop preview와 Mobile preview는 미리보기의 너비를 전환합니다.
• 인스펙터 버튼(과녁 아이콘)은 편집과 테스트를 전환합니다. 빌더를 열면 인스펙터가 켜져 있으며 버튼에는 Deactivate inspector가 표시됩니다. 이 상태에서 클릭하면 편집할 항목이 선택되고 규칙이 실행되지 않으므로 규칙에 따라 숨겨져야 하는 필드도 표시됩니다. 클릭해서 인스펙터를 끄면 구매자처럼 미리보기에 입력할 수 있습니다. 규칙이 실행되고 Continue와 제출 버튼이 답변을 확인합니다. 아무것도 전송되지 않습니다. 다시 클릭(Activate inspector)하면 편집으로 돌아갑니다. 단축키는 Mac에서 ⌘ Shift I, Windows에서 Ctrl Shift I입니다.
• Language는 번역해 둔 언어로 양식을 표시합니다. 아직 번역되지 않은 단어는 English로 표시됩니다. 번역하려면 …(More actions)에서 Translate this form을 선택하세요. Translate가 열립니다.
• Preview(눈 아이콘)는 스토어의 양식 페이지를 새 탭에서 엽니다. 양식을 저장하고 게시한 후에 작동합니다.

변경 사항 저장하기

저장 바에서 Save를 클릭합니다. Form saved 메시지가 표시되며, 양식이 Active이면 구매자에게 새 버전이 바로 적용됩니다. Discard는 마지막 저장 이후의 모든 변경 내용을 버립니다.

수정이 필요한 부분이 있으면 저장이 거부되고 미리보기 상단의 배너에 Enter a form name이나 같은 Shopify 필드에 저장되는 두 필드 등 각 문제가 나열됩니다. 줄 끝에 화살표 버튼이 있으면 클릭해 해당 필드나 설정으로 바로 이동할 수 있습니다.

다음 단계

• 규칙으로 필드 표시, 필수 지정, 비활성화하기 — 이전 답변에 따라 필요할 때만 질문합니다.
• 답변을 Shopify에 매핑하기 — 승인할 때 각 답변이 저장될 위치를 선택합니다.
• 양식 디자인하기 — 양식을 스토어의 스타일에 맞춥니다.
• 양식 만들고 게시하기 — 양식을 게시하고 스토어에서 확인합니다.