# 顧客フォーム ### 顧客フォーム要素について 概要：[Shopify Customer Form](https://help.pagefly.io/manual/shopify-elements-customer-form/)は、コンバージョン率向上を目的として、名前や電話番号などの顧客情報を簡単に収集できるように特別に設計されています。 マーケティングおよび販売活動を最適化するために重要な顧客情報が必要な場合は、いつでも**Shopify Customer Form**要素を実装できます。 詳細については、こちらのビデオチュートリアルをご確認ください： {% embed url="" %} ### 顧客フォーム要素へのアクセス方法 **Customer Form**要素機能にアクセスするには、以下の手順に従ってください： * ステップ1：左側のサイドメニューにある2番目のアイコン（要素カタログ）をクリックし、Shopifyタブに切り替えます。 * ステップ2：ドロップダウンメニューにある**Customer Form**要素をクリックします。 * ステップ3：要素をページエディターにドラッグアンドドロップして使用を開始します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-179a117cd92c21a9a23250c9a076ccbc789a65bc%2FAD_4nXfTMBk0jL9ZiTlPfhyU09QJ1xi2P1u-RviTRN2UujYkSRAQTArFSreCIW3sy9pBvMsvG30eODOLlkmxVhZo0rWseQuGxvNROYDwv9IKoDWqoPgyJFZNEnQBjsUpQLSd1428lJGUEu-YYMlnGWN08wkeyKac4yDrHmG7Lx4-qNrEQ-g.gif?alt=media) **Customer Form**要素には、ほとんどのニーズをカバーする複数のバリエーションが付属していますが、Customer Form Field、Customer Form Button、その他多くの要素を追加してフォームをカスタマイズできます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a5ed2c6a1d5a529af144bc5ad17f70a5df2a5d15%2FAD_4nXfyeRvURMZt_GWeF7D_Ub1wpOzYJu4jkwKkM-MM0E-NmcuPHmuhEoqOx-Nf3TDqJC-cRMe92AGbB3kw77vsK4jWsVRpRrAOK-eu2A6GazfNu53s4S_Os2m3mg36rxCpHtY_N2zfdmZOeUPCvwc68gkeyKac4yDrHmG7Lx4-qNrEQ-g.png?alt=media) ### 顧客フォーム要素の設定方法 この要素には、コンテンツの外観を細かく調整して可能な限り最高のコンバージョン率を達成するための多くのパラメータがあります。Contact Form Field内のすべての要素には同様のパラメータがあります。 開始するには、要素をレイアウトにドラッグし、選択してその変数を確認します ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-f8461f7801ce7d00a8a0258354e41b518d4f3cec%2FAD_4nXd991M-XPme6Iv5oGYMyCygtY-zdLu6rfZrQ_Ug4RQOT-RvqsstRiG0bY9Ek2levChEyjKFBla8DITLF8_3L03wT-zTz9iq0s0i432XCe-gP3moh_qTMC2BgpGE2cQ8CU8_oBSHKnS_3adrI1EBcwkeyKac4yDrHmG7Lx4-qNrEQ-g.png?alt=media) #### 一般設定 \| **Shopify顧客タグ**：顧客にタグを追加するため。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-02a98b773afc0690acb0e6ce81f5288a4d32ed3d%2FAD_4nXeOZvdX30KazFJwiUPsRFMsRPE_1g99sWVj6MgjP76kZOEZOV8tu2j-YRGixLmzGm4BVY3kIqxWmmimfqE4SuIZ7wzp3JLcfTDHs5BgjK9Z5kXq_YXnXUPtZ9sml3yGpW6gAxR6SMi3Q6FoODAtaQkeyKac4yDrHmG7Lx4-qNrEQ-g.png?alt=media) | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **確認を表示**: 顧客に成功/エラーメッセージを表示できるようにします。 - 成功メッセージ：フォーム送信成功後に表示されるテキスト。 - エラーメッセージ：フォーム送信失敗後に表示されるテキスト。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-5196980e7197ba02f69c68ebd9e127c9fcc0d23d%2FAD_4nXedpIb8TFvGij0koQAjd7yBFSF2knvLYZ2nXnDHqioxm7eCiofBfyO1NaA91TCTdpwhMhQfBV9olMiVLPsRPPynGX_UhcmTTRKsgIONZ53T9s62fi_JQftGkJAa6quU9k-IXlHSQwlgp7waTDIAkeyKac4yDrHmG7Lx4-qNrEQ-g.png?alt=media) | | **送信後にリダイレクト**: 送信後に顧客をリダイレクトする機能を有効にします。 - リダイレクトURL：サイトのURLを入力または選択します。 - リダイレクト遅延（秒）：指定した時間後にリダイレクトします（最小値1秒、最大値10秒）。 | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXca7x_sZ4_NqPfCMrZV72vUN91hYZScass6Y2lV_oy9eK_Fx9ofAE9HqSuBtQx2bYEvvBnBm5aifjbybLfS0EMq1iJLhPBdrSruZ_9dNH3iSEtTA5jK6SCBGbUDC0gu_Ow7Ulx1KTXW-wRCCxP3z-Aw7PNZ) ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfWoCdqVhKYp57FT-kJa9-8XhjZVUTQWw2k6qu7_iAAh5Aek8zVzPAQuIoiwwuCtGubF8I_kqbKxlsP-WS8V2DGAezQiuDaFd0kecT5m18H_cQXeg35WqLjco0jA_vR7-rYwFYPxWNsI4fqTpdP-wkeyKac4yDrHmG7Lx4-qNrEQ-g.png) | VISIBILITY、ATTRIBUTES、ANIMATIONパラメータに関する詳細情報は[こちら](https://help.pagefly.io/manual/elements-general-settings/)でご確認いただけます。 #### スタイル設定 **レガシーエディター - スタイルタブ** PageFlyのレガシーエディターで作業している場合、以下はスタイルタブに表示される主な設定です： \| - **コンテンツの色**: デフォルトの色から選択するか、利用可能なパラメータを使用して好みに合わせて顧客フォームのコンテンツの色を変更します。 | | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXctPbGOhAj8Mk6iSBRG_NX1_uG16c0q4ycNrR7UfAXoZNOel2Cu-JyOg2zHUjtlyiyOT74p_JKqbS09cKFM4NPniBzeuCJDcQCciuFI7xmoNlacOpprckO6NJ5IvSZxcv2eNo90MvgIDjTiBTbeZgkeyKac4yDrHmG7Lx4-qNrEQ-g.gif) | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | - **間隔**: 余白とパディングを調整して、顧客フォームの周囲に希望の間隔を作成します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b8b72ca25adf4e9ccf802d3f74794371e034b0d6%2FAD_4nXdr6TYOxcDVcDnXJDk3YxGK4IwCI_uxJe2WA0WviVRADbjDw8ONsPf9PyVjx8VhfL1vMLcLSfhm4-iD3MugmKSxfTPHJpQlZI5o7jwyDL9KEXo818Hc5R7WyIGtyFhRlmdEVKmT9XLzCCkMkGMy8gkeyKac4yDrHmG7Lx4-qNrEQ-g.png?alt=media) | | - **タイポグラフィ**: フォントファミリー、フォントサイズ、テキストの配置、およびテキストスタイルを設定します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-c7fb69d45957d572fb480bda748c57e69103dddd%2FAD_4nXc0Hw6MB62wZjdkGg2xhl0mytKzlx1WJJvLJsJF0dyMJE7IHGGiVoGvyllpkWetslg-ja_somqJLcrlY51VBTsCuyQKV1eTuKZ4HTR2wtBYj9MP7pAsGR3wwQBTR-o3otJRGSjKuvirw6UE1_1_agkeyKac4yDrHmG7Lx4-qNrEQ-g.png?alt=media) | | - **背景**: 顧客フォーム要素の背景色または画像を選択します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ab5d32df7fa268c736b3ae20bbd909c275d40a91%2FAD_4nXej7eoOtmy9lRzmq8UTIy9JL0Fbt9Z4SAQuS0mih9T0mkEDaX_mSsy9niUmjGi3Zbl8gnmrHMCNBAc1OidgFg5ORxw4mUFNfil9-ii7UFXS66PvmvLOoVRr3nH0gGeTvzRwuDzUKLqVDyeVzed7NgkeyKac4yDrHmG7Lx4-qNrEQ-g.png?alt=media) | スタイルタブのその他の設定に関する詳細は[こちら](https://help.pagefly.io/manual/elements-style-settings/)でご確認いただけます。 **Customer Form**要素内には、別の副要素「Customer Form Field element」があります。詳細については[こちらの記事](https://help.pagefly.io/manual/shopify-elements-customer-form-field/)をご覧ください。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-01652000f3adaff269bccb52b6300986ea6cf14c%2FAD_4nXeOBodyRY9RbZfAbP816svAo0oTVqJ8rk8etaqFQZWNan248WUXaHy6NBZ3jiNdGnfPgBaO5kbUIjERiLQbERXyez6OL6JpfbxRvFLsezQPCOfPMa9YfnZT80hfVDrmr4TTnB8o5vMlZnQBVQYD_wkeyKac4yDrHmG7Lx4-qNrEQ-g.png?alt=media) **Gen 2エディター - スタイルタブ** {% hint style="warning" %} **重要**: Gen 2レイアウトは、従量課金制（[スロットプラン](https://help.pagefly.io/manual/pricing-plans/)）でのみ利用可能です。 {% endhint %} PageFlyのGen 2エディターのスタイルタブには、レガシーエディターと同じオプションに加え、サイズとレイアウトのパラメータが追加されています。 1. **サイズ**: これらのパラメータを使用すると、顧客フォーム要素の幅と高さを制御できます。以下から選択します。 * コンテナに合わせる: 親要素内で可能な限り広く/高く要素を配置します。 * コンテンツを包含: コンテンツに合わせて幅/高さを調整します。 * 固定幅: 特定の幅/高さを設定します。 「その他の設定」をクリックして、要素が目的の寸法内に収まるように最大幅と最小幅および最大高と最小高の値を設定することもできます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfFrKgyn0p6xM6OtGtMoR4miUiKPqbiT7WezzCRy0OuzXDbdSb3aQdPWODFR7GgI6FCaBWF02K0qpnBOIezbIG071JeP-LruZJwVzwMeDfTa5iJXZ_18lqhKLnfTf4bCUXK1qSr7C3KYWhHuxEzIwkeyKac4yDrHmG7Lx4-qNrEQ-g.gif) 2. **レイアウト**: これらのパラメータを使用すると、顧客フォーム要素の配置と外観をカスタマイズできます。 \| - **方向**: フォーム内の項目が、水平方向（左から右）または垂直方向（上から下）のどちらに配置されるかを定義します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-47b11c494fe81581358c204da30de43b8e666c0e%2FAD_4nXf8OYUuCA1fsPLLz1h3D2Tl68co3wF2MT7slaWZuo0TpXJ7CGWAUqp1_7xK2h1pKgRQlRC55QRy0TlvIoinsbI0S2ilTnZZ8IV8ZfXQKznfn0qe6SBK7J8ALY9GaD9YGvep_dz_aKhk4GUlEOhxSwkeyKac4yDrHmG7Lx4-qNrEQ-g.gif?alt=media) | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | - **逆順**: フォーム内の項目の順序を逆にすることができます。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-5c245c8e0f91a1812d97c692ad4e2dcfbd99875d%2FAD_4nXeAc4th3ZHo5zRM1nEdhAf3vgFvNtzJpBK29NsMC79v5Ndse7dleqX2LmimsrONllCR1ge8KTKoOzjeRWbU0Cy3QyHJnMhFvnd8B6xMUuhnpfLWuvTkUx1OWTT-WsvsNFHLp8aPFK86yaYpWeNtWQkeyKac4yDrHmG7Lx4-qNrEQ-g.gif?alt=media) | | - **水平/垂直ギャップ**: フォーム内の項目間の間隔を調整します。項目が水平方向（左から右）に配置されている場合は水平ギャップ、垂直方向（上から下）に配置されている場合は垂直ギャップになります。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-4b3323b31401f17becf3648d7fd50d8804a872d4%2FAD_4nXdz2cH-WcKlwJ3ak_5FyZFQaTqw3xUvxO5KMQGhIA3lUy7xkC6gPCj0-hLcfAW4hpKXlEpHvwlWCS-d4RfHpw6fD6jVqR0h4Isoexc9Z1eRmOyO4TL9sUMJdxtAsC5jQxmsVsbCMBQgnGvMR8MrkeyKac4yDrHmG7Lx4-qNrEQ-g.png?alt=media) | | - **アイテムの配置**: フォーム内の項目の並び方を制御できます。 - **コンテンツの配置**: コンテナ内の項目の配置方法を決定します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-834b660c5934efd6accc51602b503fd324f095ec%2FAD_4nXeeS6lHFzf3wKDrlM9nxGW8SU0Z-krwHLAegX751vy1DLtc1sM3Nd9jNFMw7TxfowFy8NPM-oJ-BDegKilMd2d6cFsdG6OYF63LOMrGm_rrAv4paOBJFdkNWZ2iyaLn7iPPHmB1a2nezuV-7di2-AkeyKac4yDrHmG7Lx4-qNrEQ-g.png?alt=media) | ### 一般的なケース Shopifyの顧客フォームは、重要な顧客情報を収集する上で柔軟性を提供しますが、ユーザーはカスタマイズの制約に注意する必要があります。デフォルトのフィールドを変更したり新しいフィールドを追加したりするには、高度な技術知識や追加のアプリ統合が必要になる場合があります。 ### よくある質問 **Shopify顧客フォームとは何ですか？** この要素は、コンバージョン率向上を目的として、名前や電話番号などの顧客情報を簡単に収集できるように特別に設計されています。 **Shopify顧客フォームのデフォルトフィールドは何ですか？** これには、名前、メールアドレス、性別、および自己紹介が含まれます。 ### 追加リソース * [Shopify Customer Form Button Elementの使い方](https://help.pagefly.io/manual/shopify-elements-customer-form-button/) * [Shopify Contact Form Elementの使い方](https://help.pagefly.io/manual/shopify-elements-contact-form/)