標準フォームを作成する

ここでは、エディタに表示される順に、フォーム全体の設定手順を説明します。

1. Customizeエディタを開く

   Quote settings に移動します。Request a Quote ページで Customize カードを見つけ、Customize をクリックします。エディタが全画面で開きます。

2. Quote formタブを開く

   エディタには、Button & widget、Quote form、Quote cart page、Success message の4つのタブがあります。Quote form を開きます。

3. テンプレートから始める

   Form template には、フォームの元になっているテンプレートと、どのような場合に適しているかの短い説明が表示されます。

   Change をクリックします。Choose a form template という見出しの選択画面が開き、「Select a starting point. The form fields will change only after you confirm.」というメモが表示されます。テンプレートは3つあります。

   テンプレート	アプリでの説明	タグ
   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. フォームを商品ページに表示するか決める

   Product page form display（「Show the quote form directly on product pages」）で、顧客が商品ページを離れずにフォームを入力できるようにする場合は、Enable product page form display にチェックを入れます。

   チェックを入れると、3つの選択肢があるドロップダウン Form position on product page が表示されます。

   位置	フォームが表示される場所
   Below Add to Cart button	ページの上部にある、購入ボタンのすぐ下です。最も目立つ選択肢です。
   Below product description	販売用の文章のあとです。文章を読んだ購入者向けです。
   Below product information	商品情報ブロックの末尾です。

   

   顧客に先に見積もりカートを作ってもらいたい場合は、この設定をオフにします。

5. Form builderを設定する

   Form builder（「Manage sections, rows, fields, and validation with the visual 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

   セクションに対しては、次の3つの操作ができます。

   • オンとオフを切り替える。 セクションの設定を開き、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	フィールドの下に表示される1行で、プレースホルダーには長すぎる内容に使います。
   Type	フィールドの種類と、顧客が入力できる内容です。
   Required	入力しないとフォームを送信できません。必須のフィールドは、許容できる範囲で少なくしてください。
   Options / Add option	セレクト、ラジオグループ、チェックボックスグループの選択肢です。
   Choose default value	フォームの読み込み時に、フィールドに最初から入っている値です。
   Limit characters	Min characters と Max characters をオンにします。
   Column width	フィールドが行の中で占める幅です。短い2つのフィールドを横に並べられます。
   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 で新しいセクションを作成します。

   危険

   1つだけ、省略できないフィールドがあります。フォームには、名前 に 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 パネルはエディタの隣にあり、作業に合わせて再描画されます。保存する前に、ツールバーにある次の2つの操作を使うことをおすすめします。

    • 顧客状態ボタン。プレビューを Guest と Logged-in で切り替えます。表示されるフォームが異なります。
    • デスクトップとモバイルの切り替え。長いフォームは、スマートフォンでは別物になるためです。

11. 保存して自分でテストする

    何かを変更すると、Shopifyの保存バーが表示され、Save と Discard changes が現れます。Save をクリックします。フィールドに検証エラーが残っていると、エディタは保存を受け付けず、「Please resolve validation errors before saving.」と表示します。指摘されたフィールドを修正して、もう一度保存してください。

    そのあと、ストアフロントで実際にテスト用の依頼を送信します。期待したとおりの内容で Quote list に届くことを確認してください。

    

    Quote form appearance を Multiple step に設定した、ストアフロントのフォームです。

ノート

テンプレートは出発点であり、上限ではありません。テンプレートが用意した内容は、編集も削除もでき、含まれていない内容は Add element や Add section で追加できます。ただし、あとからテンプレートを切り替えるのは編集ではなくやり直しになることに注意してください。それまで作成したフィールドの一覧が置き換えられます。

注意

公開する前に、必ずご自身でテスト用の依頼を1件送信してください。フィールド、メール、見積もりの記録がすべて一致していることを確認できる唯一の方法です。

そのほかの設定の場所

Quote form タブにあるのは、質問内容のみです。ストアオーナーがここで探すことの多いいくつかの設定は、同じエディタのほかのタブにあります。

やりたいこと	タブ	設定内容
フォームを1ページ、またはステップで表示する	Quote cart page	Quote form appearance（「Controls how the quote form looks on the quote cart page」）を Multiple step または Single page に設定します。
商品の行に表示する内容	Quote cart page	Product list columns（「The product details shown as columns in the customer's quote cart」）です。見積もり商品グループをご覧ください。
顧客が商品をグループ化できるようにする	Quote cart page	Enable Quote Sections（「Lets customers group the products in their quote cart into named sections」）です。見積もり商品グループをご覧ください。
ボタンの文言と配置	Button & widget	ボタンのテキスト、クリック時の動作、ボタンの位置、表示対象です。
送信後の動作	Success message	お礼の文言と Redirect to custom URL です。

ノート

編集の途中でタブを切り替えようとすると、エディタ自身が次のように警告します。「Save your changes before switching tabs to avoid losing them.」

次のステップ

• 顧客情報フィールド - 尋ねる内容を細かく調整します
• 見積もり商品グループ - 見積もりカートページの商品列と見積もりセクションです
• reCAPTCHAを追加する - スパムからフォームを保護します
• B2Bフォームを作成する - 取引先の購入者向けのテンプレートです