フォームを作成する

ビルダーは、申請フォームで何を尋ねるかを決める場所です。フィールドを追加し、行にまとめ、フォームをページに分割して、各フィールドを設定します。中央のプレビューには、買い手がストアで見るとおりのフォームが表示されます。

ノート

ビルダーを開くには、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、Webhook、住所のオートコンプリート、captcha。	回答を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をクリックすると、住所全体を1回で追加できます。

3. 追加する

   フィールドをクリックします。フィールドがページに追加されて選択され、右側に設定が開きます。ラベルを付けて設定します（フィールドの設定を参照）。

注意

すべてのフォームには、Emailフィールドが1つと、会社名として保存されるフィールドが1つ必要です。Emailフィールドは削除も非表示もできず、会社名として保存されるフィールドがない場合、Saveは**Map a field to Company · Name.**というメッセージで拒否されます。

追加できるフィールド

グループ	フィールド	買い手に表示される内容
Basic fields	Short text	1行のテキストボックス。
	Long text	複数行のテキストボックス。
	Number	数字のみ入力できるボックス。
	Email	回答がメールアドレスの形式かどうかを確認するボックス。
	Phone	電話番号のボックス。国旗、国番号、番号チェックは任意です。
	Country	国のリスト。
	State / province	ページ上でこのフィールドより前にあるCountryフィールドで選択された国の、州または省のリスト。州のある国が選択されると表示され、前にCountryフィールドがない場合は通常のテキストボックスになります。
	Dropdown	1つを選択するリスト。Allow multiple choicesをオンにすると複数選択できます。
	Checkbox	「I agree to the terms」のような、1つのチェックボックス。必須の場合、買い手はチェックを入れる必要があります。
	Checkboxes	買い手がいくつでもチェックできる選択肢のリスト。
	Radio buttons	1つを選択するリスト。買い手が入力するOtherの選択肢は任意で追加できます。
	Date and time	日付ピッカー、時刻、またはその両方。
	File upload	アップロードボックス。デフォルトでは、10 MBまでのPDF、JPG、JPEG、PNGファイルを受け付けます。
Company fields	Company name	会社名として保存されるテキストボックス。
	Tax ID	会社の納税番号またはVAT番号用のテキストボックス。アプリの税IDチェックは、このフィールドを読み取ります。
	Website	会社のWebサイト用のテキストボックス。
Document fields	Business license、Tax certificate、Tax registration、Reseller certificate	アップロードボックス。ファイルは、その種類の書類として申請とともに保存されます。書類を参照してください。
Static text	Heading	見出し。下にキャプションを任意で追加できます。
	Paragraph	説明文などの書式付きテキスト。
	HTML	独自のHTMLマークアップ。
	Divider	水平線。
Address blocks	Shipping address	1行に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	フィールドを入れるための空の行。フィールドを行にまとめるを参照してください。

住所ブロック全体ではなく、住所のフィールドを1つだけ追加するには、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で1行に1つの選択肢を追加します。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〜20 MB。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：1〜12。Number of options per line：CheckboxesとRadio buttons用で、1〜5。
Visibility	Conditional display：以前の回答に基づいて、フィールドの表示、非表示、必須化、無効化を行います。ルールでフィールドを表示、必須化、無効化するを参照してください。
Custom CSS	Custom CSS class：テーマ独自のCSSでスタイルを設定できるクラス名。通常のクラス名のみが保持されます。

Dropdown、Country、State / provinceでは、プレースホルダーがリストの先頭行で、デフォルトは**Select…**です。空にすると、**Select…**に戻ります。

Static textの設定は少なめです。HeadingはLabelにテキストがあり、さらにCaptionとHeading tag（Heading 1〜Heading 6）があります。ParagraphにはText、HTMLにはMarkupがあります。これらのLabelは、Elementsパネルに表示される名前にすぎません。すべてのStatic textには、Column width、Visibility、Custom CSSもあります。

フィールドの設定は、買い手が読む内容から、フィールドを表示するタイミングまで、セクションごとにまとめられています。

フィールドを配置する

フィールドを移動する

• Elementsパネルで： フィールドをハンドルでドラッグします。別のフィールドの上にドロップすると、その上または下に配置されます。ページ名の上にドロップすると、そのページの末尾に移動します。行名の上にドロップすると、その行に入ります。
• プレビューで： フィールドをクリックし、ツールバーの左にあるハンドル（Drag to move this field）でドラッグします。別のフィールドの上端または下端にドロップすると、その上または下に配置されます。左端または右端にドロップすると、2つが行として横に並びます。

列の幅を設定する

幅は12列を基準に数えられ、新しいフィールドはすべて、全幅である12から始まります。続くフィールドは、幅が収まれば同じ行を共有します。たとえば、6のフィールドが2つなら横に並び、4のフィールドが3つなら3列になります。

• フィールドの設定でLayout › Column widthをドラッグする、または
• プレビューで、選択したフィールドのツールバーのChange widthをクリックします。3分の1、半分、全幅の順に切り替わります。

フォームの幅が480ピクセル未満の場合（たとえばスマートフォン）、すべてのフィールドが1行全体を使用します。

フィールドを行にまとめる

行は、フィールドをまとめて保持し、フィールドの上にラベルと説明からなる見出しを表示できます。行全体をまとめて表示、非表示、移動できます。

行を作成するには、次のいずれかを行います。

• フィールドリストを開き、Layoutの下のRowをクリックします。Elementsパネルに空の行が表示されます。その中のAdd elementをクリックして、フィールドを追加します。
• フィールドリストを開き、Select fields（ページに行の外のフィールドが2つ以上ある場合に表示）をクリックします。Elementsパネルでフィールドにチェックを入れ、Group into rowをクリックします。
• 別のフィールドの左または右にフィールドを追加するか、プレビューで別のフィールドの横にドロップします。

Elementsパネルで行名をクリックして、その設定を開きます。

設定	内容
Label	行のタイトル。買い手には、行のフィールドの上に表示されます。
Hide the heading block	ラベルと説明を買い手に表示しません。内容は保持され、オフにすると元に戻ります。
Description	ラベルの下に表示されるテキスト。
Icon	ラベルの横のアイコン。
Conditional display	以前の回答に基づいて、行全体を表示または非表示にします。ルールでフィールドを表示、必須化、無効化するを参照してください。
Ungroup row	行を解除します。フィールドはページに残ります。

Elementsパネルでは、行の目のアイコンで、そのすべてのフィールドを非表示にでき、Duplicate rowでコピーできます。行から1つのフィールドを取り出すには、フィールドを選択して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です。

   買い手には、上部にステップバーが表示され、1ページずつ表示されます。各ページの末尾には、次に進む前にそのページの回答を確認するContinueボタンがあり、最後のページの末尾には送信ボタンがあります。ステップバーがない場合は、すべてのページが1つのフォームに続けて表示されます。

3. 買い手が戻れるかどうかを選ぶ

   Let buyers go back a stepが最初からオンになっているため、2番目以降のすべてのステップにBackボタンがあります。変更するには、ElementsパネルでFooterをクリックします。Let buyers go back a stepをオフにするとボタンが削除され、Back labelも変更できます。これらの設定は、ステップバーがオンで、フォームに2ページ以上ある場合にのみ表示されます。

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	ページとそのフィールドを削除します。フォームには少なくとも1ページが必要で、Emailフィールドがあるページは、そのフィールドを移動するまで削除できません。

ヘッダーとフッター

Elementsパネルの上部にあるHeader、またはプレビューの見出しをクリックします。

• Show store logo、続いてUpload image：1 MBまでの.jpg、.png、.svgファイルで、サイズは約200×60ピクセル。
• フォーム上部の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は、翻訳済みの言語でフォームを表示します。まだ翻訳されていない語句は英語で表示されます。翻訳するには、…（More actions）からTranslate this formを選択すると、翻訳が開きます。
• Preview（目のアイコン）は、ストア上のフォームのページを新しいタブで開きます。フォームを保存して公開した後に使用できます。

変更を保存する

保存バーのSaveをクリックします。Form savedというメッセージが表示され、フォームがActiveの場合、買い手にはすぐに新しいバージョンが表示されます。Discardは、最後に保存してからのすべての変更を破棄します。

修正が必要な場合、保存は拒否され、プレビュー上部のバナーに、Enter a form nameや、同じShopifyフィールドに保存される2つのフィールドなど、各問題が一覧表示されます。行の末尾に矢印ボタンがある場合は、クリックすると、そのフィールドまたは設定に直接移動します。

次のステップ

• ルールでフィールドを表示、必須化、無効化する — 以前の回答に応じて必要な場合にのみ、質問をします。
• 回答をShopifyにマッピングする — 承認時に、各回答の保存先を選択します。
• フォームをデザインする — ストアの見た目にフォームを合わせます。
• フォームを作成して公開する — フォームを公開して、ストアで確認します。