# 顧客フォームフィールド ### 顧客フォームフィールド要素について [Shopifyの顧客フォームフィールド要素](https://help.pagefly.io/manual/shopify-elements-customer-form-field/)は、顧客フォームを簡単にカスタマイズできるように設計されています。これは、マーケティングや社内利用のために特定の顧客情報を収集するのに役立ち、割引や特典で顧客のアクションを促すためにも使用できます。特定の要件やブランディングの好みに合わせて、フォームフィールドを調整できます。 {% hint style="warning" %} **ご注意ください**: * 顧客フォームフィールド要素は顧客フォームの外に置くことはできません。顧客フォームフィールド要素を追加する前に、必ず顧客フォーム要素をレイアウトにドラッグしていることを確認してください。 * 各顧客フォームには、適切に機能するために少なくとも1つのメールフィールドが必要です。 {% endhint %} 詳細については、こちらのビデオチュートリアルをご覧ください。 {% embed url="" %} ### 顧客フォームフィールド要素にアクセスする方法 * ステップ1: **Elements** アイコンをクリック > 次に、**Shopify** タブで **Customer Form Field** を選択します * ステップ2: 目的の顧客フォームフィールドバリアントをページエディターにドラッグアンドドロップします {% hint style="warning" %} **重要**: 顧客フォームフィールド要素は顧客フォームの外に置くことはできません {% endhint %} ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-c8d97ac0b640f95452b3f5fc19a81a2af804b6e9%2FAD_4nXdgtkyx9iTyt-ok5PjlsD-7JFuzk2qo-Ex0Gj0jUC9wFu7JBP5uk3yhh1nxMT7c6FMCsKtEmxFrKAkKvBMZ9NwGnOel9Hghq_HrwjX2hsDwYuzdAHLete-GB5WWQN0ue9k6WW-IxyZqcf4QE28AkeyALNQV1t5rER_3jIZ0yDPCw.gif?alt=media) 顧客フォームフィールドには、**Email、First Name、Last Name**、および **Customer Note** 要素が含まれています。検索バーで要素を検索することもできます。 ### 顧客フォームフィールド要素を設定する方法 顧客フォームフィールド要素には、可能な限り最高のコンバージョン率を達成するためにコンテンツの外観を細かく調整できる多くのパラメーターがあります。 ページキャンバス上の要素をクリックすると、この要素に固有のGeneralタブとStylingタブのパラメーターにアクセスできます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-bb80643249e14ecab0a54c8ca2512c0d1ef64240%2FAD_4nXdv3PaM_FLxn3X3QS0l2019C6LOA-AiBchP6SLHJt_KNN1u_GivaA5iIHseQRq0o5QNg95agHL5sGkmfEphPqK2Z-7FyvbGx4tgyMFiGXfRXnmnK9u8qYYr4Al5cyhM2gMq8pbNfWXvFC5vHDsbkeyALNQV1t5rER_3jIZ0yDPCw.png?alt=media) #### General 設定 \| **Show Label:** ラベルの表示/非表示。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a3112f5fb9de32763cce44633ebe8482d0c003b4%2FAD_4nXfmufuMl7u6F_SKP8kx_Hj6fHFJ9frj_180JLF4KkBl4PBWmZ2P5C690LExA3BfR1GmkfGWoBBATPWttjC2u58JEfLkahoiUHhqKaOzSj_1PUHSLTpIsLiz3Y9IoLTbHA8huV30B2AYh2QkJ6KxHgkeyALNQV1t5rER_3jIZ0yDPCw.png?alt=media) | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Label Position**: 入力ボックスに対するラベルの位置。 | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-56d55631895f94fa67d6298bf3d4e4f57244448a%2FAD_4nXdFEXHybyiwomi0u4gymywXfpYB1s_5kHT8eFCXJoNLNudYXhfatvHgaI8pP2iG8jybNgwKRTqiFHEPpcd1V3PG_biLX3Pb21V5je97Ql3DAjRVQMsf09mxQ9jF65Sq9AnVyhmOHwsYGCNl0tzQ5AkeyALNQV1t5rER_3jIZ0yDPCw.gif?alt=media) |\ \| **Require Field**: このフィールドを必須フィールドにします | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-2900716691a52a70d20d6ce532a06c15a2cc0147%2FAD_4nXcsv3-L1JZPykz3qc4mcuYxLqIQchpEg5cGNeAif52GINoQ99_pLbcd-LjnTqrWE-f0K1yPCVPbU28uhw2QjSm7A1DnCg4ppvCgwkowNUhXoPwPxQPBEKuMUT13Qf3Ui2XqyGxfz5zMArrxUclHAAkeyALNQV1t5rER_3jIZ0yDPCw.png?alt=media) | #### Styling 設定 要素サイズ、スペーシング、タイポグラフィ、色など、Stylingタブでさまざまなパラメーターを変更して、顧客フォームフィールド要素がページの全体的なレイアウトと一致するように保証できます。 Stylingタブの詳細については、[こちら](https://help.pagefly.io/manual/elements-style-settings/)をご確認ください。 ### 顧客フォームフィールド要素のサブ要素を設定する方法 顧客フォームフィールド要素には、Field LabelとField Inputの2つのサブ要素があります。サブ要素をクリックすると、各サブ要素のすべての設定パラメーターが表示されます。 #### Field Label 要素の設定 Field Label要素全体を選択し、GeneralタブにはLabel textという設定が1つだけあります。表示したいラベルの名前を入力する必要があります。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfddm55kBSsWcwAO9d1kBWsOihU4vRcnsH2RA74OZETB_Fc9noDdXgmP-O2Ea7m9QFt0C5pm-pnRG65RatOAX52GAkzV7MY3sSQbNmmWtHZ0cxuVJwZCPBYp4tit5fe3M3J_bcpgRqy_Obcp-f2keyALNQV1t5rER_3jIZ0yDPCw.png) Field Label要素のスタイリング設定は、要素のスタイリングに似ています。要素のスタイリング設定の詳細については、[こちら](https://help.pagefly.io/manual/elements-style-settings/)をご覧ください。 #### Field Input 要素の設定 \| Customer Details: フォーム経由で送信されたデータで入力する顧客の詳細フィールドを選択します。4つのオプションがあります: - First name - Last name - Email - Customer note | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-073b47b009106e746ec251abc67d59ca044affa8%2FAD_4nXdMsBnX-Kn3EMbQQ57q5QKFzFvU9RR0xIyYbgqcqKZryQ3hyDbxxvpM55X7teTuejkil-TxFeATbVbDRjRTDWeF6JGGmSfqY5Kn2wfMD7hXogq-_ceEPEYMq8gWfvnTIUDDsbhB4KpHlS8ros_WQkeyALNQV1t5rER_3jIZ0yDPCw.png?alt=media) | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Placeholder Text**: 訪問者が入力を開始するまで入力ボックスに表示されるテキスト。 | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-3660739aeb7bf23837afc5d9d2e80a5a396308db%2FAD_4nXdM3gyhxdvkvtjni4Om_glNncEvAYTLneV6s5YjDBlupNQLF9eaxU7s6M5_bdhTv54JGIjLHGwLqxaSmbATG8Il7-LUABuOr14BxMaNp7IwG4iPjd2aEg-FTFdSFjHDAs1L6VbSdVSydmyAiQUhEgkeyALNQV1t5rER_3jIZ0yDPCw.png?alt=media) |\ \| **Input type**: Customer DetailsでCustomer noteを選択した場合のみ表示されます。8つのオプションが利用可能です: - Single line text - Multiple Line Text - Single Choice - Checkbox - Dropdown - Number - Date - Time | **Single Line Text** ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-7ac968350a286e07c1d7567f31ac21e4ffc4aa19%2FAD_4nXeQnKylG7W0tVVSn4keR2OF8KB91C2kMbe7SjGhOw7vm5XLvUAIW1ixcbYkZo8AMpKQAZo7yVjYKU7WurJ7VgreuqUAo06NuSfmS_UAqMeNztFVz618kNvU7e9D_phqkVbeyM3GpJBSYq3Svd1nkeyALNQV1t5rER_3jIZ0yDPCw.png?alt=media) Placeholder Text: 訪問者が入力を開始するまで入力ボックスに表示されるテキスト **Multiple Line Text** ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-83dc185be6f73dd58cd385e4fad03128fb5637c4%2FAD_4nXdEjTCdRM9otJZpR0_Zz8qIw9z4SeEGCcsL73SPWo8q4GJ0xjOKwTnObmiTggIRpsmg_M4afu92frw1yYKpvh21LDRG5eJpSvC7Edan7cTSA983Hx6gOMxuUkpYAp_1oxfyFo1qIILfwbFy4rtKnAkeyALNQV1t5rER_3jIZ0yDPCw.png?alt=media) Line Number: テキストの高さは行数でカウントされます（最小値は1、最大値は20）。 Placeholder Text: 訪問者が入力を開始するまで入力ボックスに表示されるテキスト **Single Choice** ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0872b35c84b58ee27f32d0283037f1cd64bb17d6%2FAD_4nXdBsczqw6mhrOvjjKuDZ4Qv_8fp4jpmmMddLP63D-dTC55vAvjqp0GCvFNBso9tNtCriPf5UfAvRAra9_9Lw7p21kUjNVQxtXkeXwweFZbz74tTVGrn5G1oNazwfDjRYsB2ljRpSK8KHscIWoGcQgkeyALNQV1t5rER_3jIZ0yDPCw.png?alt=media) Single choice options: 新しい行を入力することで、オプションの名前変更、追加が可能です **Checkbox** ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-95d971cf5c84bdcf05976542b953028ed900617f%2FAD_4nXcIW17QccSnQ6q0V7Z-POeTyfaw7XvzqohInFT0WRey62eivX0E-16riT3nl4K-ZprSaziMbdKKsK2ZbA12X-3HyeFulKg21Q2s01V_HzLl5iHlv6HWmkQuXetEo6p4-TO0PQ297S40tMfrWNvJrwkeyALNQV1t5rER_3jIZ0yDPCw.png?alt=media) Checkbox Label: チェックボックスの名前を入力します。 **Dropdown** ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0d4ad68f9ace29a343a45c9e58a204b2a6699d04%2FAD_4nXdR1O88ctbJf8Ad6TTZNKggdZjJileo6rNEaS2SGYohlCi2oLcOQWbINB-nBprVEaPTJX2bvfdkem5hJaXZ6Ux7OspHo2SYE_BMe3iUbfx4gri6VuGSyYq8b6A7vnhVpg8jN-uZaUHgC7H9lgsYUwkeyALNQV1t5rER_3jIZ0yDPCw.png?alt=media) Dropdown options: 新しい行を入力することで、オプションの名前変更、追加が可能です **Number** ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-f35ba623b59e0a447665464d19215d07ec409a11%2FAD_4nXc8CtnmR8r67g9eyn5mA0w5M7lRfarDJjney7PzA5TuKOzvGi31Hp6LUrzGbnsxPa1kp2xi0zSVTR5LbKORGaeaEGXXjEErAdn6V6ADRlhs2xla5Q9qH2iNq49ggXSSJ9M96lrft6LgbWVwPyPx5gkeyALNQV1t5rER_3jIZ0yDPCw.png?alt=media) **Default number**: 顧客のためのデフォルト番号を設定します。 **Date** ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0a98b992c891c859876c92bc9c9b6f2247fdab28%2FAD_4nXcKo2InmU87k8pLURjPAy-VLt2DNM0uOYbRWDHjFHa7qJ8jyNJB_ch-1q8XPSu0LOVP70lxEml5y7pUAEY_tB_d-KhR7viF_vHN7fUNUwQOUL9ZkOW7j3uiwYLiHvrHkvKhiVIT_Ow6MQkAl4wDMgkeyALNQV1t5rER_3jIZ0yDPCw.png?alt=media) Default date: 顧客のためのデフォルト日付を設定します。 **Time** ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-871ab25584ed9db536b54e641314e9fc44923539%2FAD_4nXe5sJP2lTXBtNLRn_89VvzQd2grHjK4fleVLlFhS7EkbfToV7DNzGIlrDwC-LcK9vpDFtHvvALt-LQt-25q1wlXxz-7uoqsAxJJ8cbxz8lSD7ewNF4D8xuN7TnleMH0KfwNLf3qMsuWDg_7fQaMEAkeyALNQV1t5rER_3jIZ0yDPCw.png?alt=media) **Default time**: 顧客のためのデフォルト時間を設定します | Stylingタブでは、Field input要素のサイズ、スペーシング、タイポグラフィ、色などを調整できます。ページキャンバスでField input要素をクリック > NavigationでStylingに移動すると、これらのパラメーターが表示されます。 ### よくあるケース * Field Stateオプションは、Contact Form Field内でInput Fieldを選択した場合にのみ表示されることに注意してください。これらのオプションにアクセスするには、適切な要素を選択していることを確認してください。 * フォームにフィールドが1つしかない場合、そのフィールドはメール（必須）である必要があります。 ### よくある質問 **1. 顧客フォームフィールド要素は何のために使用されますか？** 顧客フォーム内にカスタムフィールドを作成し、顧客から特定の情報を収集するために使用されます。この情報は、注文処理、マーケティング、顧客サポートなど、さまざまな目的で使用できます。 **2. 1つのフォームで複数の顧客フォームフィールド要素を使用できますか？** はい、必要な数の顧客フォームフィールド要素を追加して、必要な情報を収集できます。 **3. 顧客フォームフィールド要素はどこで使用できますか？** PageFlyの任意のページで使用できますが、チェックアウトページ、お問い合わせページ、ランディングページでよく使用されます。 ### 追加リソース * [強力なコンタクトフォームビルダー | 設定の6つのステップ](https://help.pagefly.io/manual/form-builder-contact-form-by-globo/) * [Shopifyのお問い合わせフォームボタンの使い方](https://help.pagefly.io/manual/shopify-elements-contact-form-button/)