표준 양식 만들기

편집기에 표시되는 순서대로 양식 전체를 안내합니다.

1. Customize 편집기 열기

   Quote settings로 이동하세요. Request a Quote 페이지에서 Customize 카드를 찾아 Customize를 클릭합니다. 편집기가 전체 화면으로 열립니다.

2. Quote form 탭 열기

   편집기에는 Button & widget, Quote form, Quote cart page, Success message의 네 탭이 있습니다. Quote form을 여세요.

3. 템플릿으로 시작하기

   Form template에는 양식의 바탕이 되는 템플릿과 어떤 경우에 알맞은지 설명하는 짧은 글이 표시됩니다.

   Change를 클릭하세요. Choose a form template이라는 제목의 선택 창이 열리며 “Select a starting point. The form fields will change only after you confirm.“라는 안내가 표시됩니다. 템플릿은 세 가지입니다.

   템플릿	앱의 설명	태그
   Simple quote form	"Best for most stores. Includes login autofill, contact details, company, quantity, request message, and file upload."	Fast setup · 7 fields
   Detailed quote form	"For custom orders, delivery, installation, or project-based quotes. Includes login autofill guidance."	More details · 14 fields
   B2B customer form	"For wholesale or business buyers who need company, shipping, billing, and payment term information"	B2B

   견적을 내는 작업에 맞는 설명의 템플릿을 선택한 다음 Use this template을 클릭해 확인하세요. Cancel을 클릭하면 현재 양식은 그대로 유지됩니다. 필드를 편집하기 전에 지금 먼저 선택하세요.

   

   빈 양식이 아니라 템플릿으로 시작하세요.

   주의

   다른 템플릿을 선택하면 현재 필드 목록이 교체됩니다. 화면의 섹션과 필드가 새 템플릿의 섹션과 필드로 바뀌므로, 추가한 섹션, 이름을 바꾼 필드, 삭제한 항목이 모두 사라집니다. 템플릿을 먼저 선택하고 그다음에 사용자 지정하세요.

4. 제품 페이지에 양식을 표시할지 정하기

   “Show the quote form directly on product pages”라는 설명이 있는 Product page form display 아래에서, 고객이 제품 페이지를 벗어나지 않고 양식을 작성하게 하려면 Enable product page form display를 선택하세요.

   선택하면 세 가지 선택지가 있는 드롭다운 Form position on product page가 표시됩니다.

   위치	양식이 표시되는 곳
   Below Add to Cart button	구매 버튼 바로 아래의 페이지 상단으로, 가장 눈에 잘 띄는 옵션입니다.
   Below product description	제품 설명을 읽은 구매자를 위해 설명 뒤에 표시됩니다.
   Below product information	제품 정보 블록의 끝.

   

   고객이 먼저 견적 장바구니를 만들게 하려면 이 설정을 끄세요.

5. Form builder 설정하기

   “Manage sections, rows, fields, and validation with the visual form builder”라는 설명이 있는 Form builder에 섹션별로 묶인 질문이 있습니다. 어떤 섹션이 있는지는 방금 선택한 템플릿에 따라 달라집니다.

   템플릿	빌더의 섹션
   Simple quote form	Contact information · Extra info
   Detailed quote form	Contact information · Shipping address · Extra info
   B2B customer form	Contact information · Company information · Shipping address · Billing address · Payment terms · Extra info

   섹션에서 할 수 있는 작업은 세 가지입니다.

   • 켜거나 끄기. 섹션의 설정을 열어 Enable을 선택하거나 선택 해제하세요. 비활성화된 섹션은 필드가 몇 개든 고객에게 표시되지 않습니다.
   • 이름 바꾸기. 같은 설정 패널의 Label을 구매자가 부르는 이름으로 변경하세요.
   • 옮기기. 섹션의 핸들을 드래그해 양식의 순서를 바꾸세요.

   화살표로 섹션을 펼치면 안의 필드가 표시되며, Add element로 해당 섹션에 필드를 추가할 수 있습니다.

   연락처와 주소 필드는 고객 정보 필드에서, 회사, 청구, 결제 조건은 B2B 양식 만들기에서 다룹니다.

   참고

   빌더의 컨트롤이 비활성화되어 있고 “🔐 This feature is available on …“라는 자물쇠 문구가 표시된다면 더 높은 요금제의 기능이라는 뜻입니다. 오류가 아닙니다. 앱에서 Pricing plans를 열어 내 요금제에 포함된 기능을 확인하세요.

6. 필드 편집하기

   빌더에서 필드를 클릭하면 필드 이름과 “Customize how this field appears on the form.“이라는 제목이 있는 해당 필드의 설정이 열립니다.

   설정	동작
   Label	고객이 읽는 문구입니다. 판매자가 가장 많이 변경하는 설정입니다.
   Hide label	필드는 유지하고 위의 라벨만 숨깁니다.
   Placeholder	빈 입력란 안에 표시되는 회색 예시 텍스트입니다. 원하는 형식을 안내하는 데 사용하세요. 빈 입력란보다 "e.g. 500 units"가 낫습니다.
   Help text	플레이스홀더에 넣기에는 긴 내용을 필드 아래 한 줄로 안내합니다.
   Type	필드의 종류와 고객이 입력할 수 있는 내용입니다.
   Required	이 필드를 입력하지 않으면 양식을 제출할 수 없습니다. 필수 필드는 감당할 수 있는 만큼만 최소한으로 요청하세요.
   Options / Add option	선택 목록, 라디오 그룹, 체크박스 그룹의 선택지입니다.
   Choose default value	양식이 로드될 때 필드에 처음 입력되어 있는 값입니다.
   Limit characters	Min characters와 Max characters를 켭니다.
   Column width	필드가 행에서 차지하는 너비로, 짧은 필드 두 개를 나란히 배치할 수 있습니다.
   Custom HTML class	직접 작성한 CSS에 사용할 클래스 이름입니다. 사용자 지정 CSS 추가하기를 참고하세요.
   Remove	필드를 삭제합니다. 직접 추가한 필드에만 있으며, 기본 제공되는 연락처와 주소 필드는 보호되어 있어 Remove가 없습니다.

   

   각 요소를 클릭해 필요하면 추가로 설정하세요.

   필드 패널의 Save changes로 마치거나, Cancel을 클릭해 편집을 취소하세요.

   주의

   Limit characters는 입력하는 동안 유효성이 검사됩니다. Min characters와 Max characters는 각각 0 이상의 정수여야 하며 최솟값이 최댓값보다 클 수 없습니다. 잘못 입력하면 편집기에서 저장할 수 없습니다.

7. 필드를 원하는 순서로 배치하기

   필드는 드래그해서 순서를 바꿉니다. 행 왼쪽 끝의 드래그 핸들을 잡고 원하는 위치에 놓으세요. 섹션에도 자체 드래그 핸들이 있으며 같은 방식으로 이동합니다.

   순서는 생각보다 중요합니다. 이름을 묻기 전에 배송 우편번호부터 묻는 양식은 대화가 아니라 데이터베이스처럼 느껴집니다.

   

   요소를 드래그 앤 드롭해 견적 양식에서의 위치와 순서를 변경하세요.

8. 나만의 질문 추가하기

   Extra info에는 템플릿에 포함된 항목이 처음 들어 있으며, 템플릿마다 다릅니다. Simple quote form에는 Quantity와 Upload files, Detailed quote form에는 Project detail과 Delivery service, B2B customer form에는 Message가 있습니다.

   납기, 배송일, 프로젝트 번호처럼 더 필요한 항목은 Add element로 추가하세요.

   함께 묶어야 하는 질문이 기존 섹션에 맞지 않는다면 Add section으로 새 섹션을 만드세요.

   위험

   한 가지 필드는 필수입니다. 양식에는 name에 _email_이라는 단어가 포함된 요소가 있어야 합니다. 없으면 앱에서 저장을 막고 Add an element whose name contains “email”. Otherwise, customers won’t receive the quote email. 라고 안내합니다. 이 필드가 없으면 보낸 견적이 고객에게 전혀 전달되지 않습니다.

   

   Add element를 클릭해 견적 양식에 사용자 지정 필드를 더 추가하세요.

   

9. 양식 스타일 설정하기

   Style에는 양식이 사용 중인 프리셋이 표시되며, Change 버튼으로 나머지 프리셋을 볼 수 있습니다. 프리셋은 Material filled, Classic, Flat, Flat round, Classic round, Line, Line round, Material outlined이며, 각각 입력란의 작은 그림으로 표시되므로 이름보다는 눈으로 보고 고르세요.

   옆에는 Match theme styling if possible이 있습니다. 선택하면 양식이 테마의 글꼴과 입력란을 대신 사용하므로, 양식이 따로 붙어 있는 느낌이 들지 않게 하는 가장 빠른 방법입니다. 앱에서는 “Theme styling applies on your storefront and is not shown in this preview”라고 안내하므로, 이 설정은 여기서가 아니라 스토어프런트에서 확인하세요.

   Customize text에서는 Font style, Title bar font size, Title bar font weight를 설정합니다. Customize form color에서는 Title bar color, Title bar background, Color, Background color, Border color, Button color, Button background color, Button border, Quote popup primary color 등 개별 색상을 설정합니다.

   

   자세한 내용은 테마 스타일에 맞추기를 참고하세요.

10. Preview에서 양식 확인하기

    Preview 패널은 편집기 옆에 있으며 작업하는 대로 다시 그려집니다. 저장하기 전에 도구 모음의 두 컨트롤을 사용해 보세요.

    • 미리 보기를 Guest와 Logged-in 사이에서 전환하는 고객 상태 버튼입니다. 두 상태에서는 서로 다른 양식이 표시됩니다.
    • 데스크톱/모바일 전환입니다. 긴 양식은 휴대폰에서 느낌이 전혀 다르기 때문입니다.

11. 저장하고 직접 테스트하기

    내용을 변경하면 Save와 Discard changes가 있는 Shopify 저장 막대가 나타납니다. Save를 클릭하세요. 필드에 유효성 검사 오류가 남아 있으면 편집기에서 저장할 수 없으며 “Please resolve validation errors before saving.“이라고 표시됩니다. 안내된 필드를 수정한 다음 다시 저장하세요.

    그런 다음 스토어프런트에서 실제 테스트 요청을 제출하세요. 예상한 내용이 모두 포함된 요청이 Quote list에 도착했는지 확인합니다.

    

    Quote form appearance를 Multiple step으로 설정한 스토어프런트의 양식.

참고

템플릿은 출발점일 뿐 한계가 아닙니다. 템플릿에 포함된 항목은 모두 편집하거나 삭제할 수 있고, 포함되지 않은 항목은 Add element나 Add section으로 추가할 수 있습니다. 다만 나중에 템플릿을 전환하면 편집이 아니라 처음부터 다시 시작하게 되며, 만들어 둔 필드 목록이 교체된다는 점을 기억하세요.

주의

정식으로 사용하기 전에 반드시 테스트 요청을 직접 한 번 제출하세요. 필드, 이메일, 견적 기록이 모두 맞게 연결되었는지 확인하는 유일한 방법입니다.

나머지 설정의 위치

Quote form 탭은 질문만 다룹니다. 판매자가 여기서 찾는 여러 설정은 같은 편집기의 다른 탭에 있습니다.

원하는 기능	탭	확인할 내용
양식을 한 페이지 또는 여러 단계로 표시	Quote cart page	"Controls how the quote form looks on the quote cart page"라는 설명의 Quote form appearance를 Multiple step 또는 Single page로 설정합니다.
제품 행에 표시할 내용	Quote cart page	"The product details shown as columns in the customer's quote cart"라는 설명의 Product list columns입니다. 견적 제품 그룹을 참고하세요.
고객이 제품을 그룹으로 묶게 하기	Quote cart page	"Lets customers group the products in their quote cart into named sections"라는 설명의 Enable Quote Sections입니다. 견적 제품 그룹을 참고하세요.
버튼 문구와 위치	Button & widget	버튼 텍스트, 클릭 동작, 버튼 위치, 버튼을 볼 수 있는 대상.
제출 후 동작	Success message	감사 문구와 Redirect to custom URL.

참고

편집 중에 탭을 이동하려고 하면 편집기에서도 “Save your changes before switching tabs to avoid losing them.“이라고 경고합니다.

다음 단계

• 고객 정보 필드 — 요청하는 정보를 세부적으로 조정하기
• 견적 제품 그룹 — 견적 장바구니 페이지의 제품 열과 견적 섹션
• reCAPTCHA 추가하기 — 스팸으로부터 양식 보호하기
• B2B 양식 만들기 — 거래처 구매자를 위한 템플릿