# お問い合わせフォームボタン ### お問い合わせフォームボタン要素について 概要: [Shopify Contact Form Button](https://help.pagefly.io/manual/shopify-elements-contact-form-button/)を使用すると、お問い合わせフォームにボタンを追加でき、お客様が簡単にお問い合わせを送信できるようになります。この要素はユーザーインタラクションの向上に不可欠であり、ストアのデザインに合わせてカスタマイズできます。 この記事では、PageFlyで**お問い合わせフォームボタン**要素を効果的に使用する手順をご案内します。 {% hint style="warning" %} **重要な注意**: お問い合わせフォームボタン要素は、お問い合わせフォーム内に配置する必要があります。お問い合わせフォームボタン要素を追加する前に、必ずレイアウトにお問い合わせフォーム要素を追加してください。 {% endhint %} ### お問い合わせフォームボタン要素へのアクセス方法 * ステップ1: 左メニューの要素アイコンをクリックします。 * ステップ2: Shopifyの要素を含むShopifyタブに移動します。 * ステップ2: スクロールしてお問い合わせフォームボタン要素を見つけるか、検索バーを使用します。 * ステップ3: お問い合わせフォームボタン要素の目的のバリアントをページキャンバスにドラッグアンドドロップします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9a8e239a817093fe48c5cedb4187061ae7997c36%2FAD_4nXdAjMma_SUIupif5QKWWfdDAPobkDdJwS0LkK096uC32qkLTHDqc-OuC8zQH8sil0PDjRgkicP_3XXlnZfg9eG5JpqsdvITZA1h59QN7ITYp27qYFRCZWtoVhemuBBJD8IIi7h5UbTEY3Z0wOdtQQkeyW-fJ_c_GL3B06EIGqieNvA.gif?alt=media) **お問い合わせフォームボタン**要素には、ほとんどのニーズに対応できる3つのバリエーションがあります。これらのバリエーションには以下が含まれます。 * テキストのみ * テキストとアイコン * アイコンとテキスト 時間の節約に役立つように、今後もバリエーションを追加していきます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdZPNB4OeN3apQsIVu8UhW3-bN2J0aGqPK1767osdFBK8zgNfZf9VvdvS_C8ZQt0OM-iJbhLA9l01X667XYpiLXE8ss54hNWS2FnwS4qrDUKz9xwS_jmTycb3Ok_dZpfQJlopEwDcUiGI9stT95gkeyW-fJ_c_GL3B06EIGqieNvA.png) ### お問い合わせフォームボタン要素の設定方法 **お問い合わせフォームボタン**要素には、機能と外観を調整するための様々なパラメータが付属しています。 ページに追加した**お問い合わせフォームボタン**要素をクリックします。次に、**General**タブと**Styling**タブに移動して、利用可能なパラメータにアクセスし調整します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-032ae396fb3ea272095b3e041a3cebb07821341a%2FAD_4nXex0AbJ8yxFoMta5_lj6fDandEE3EEVXdKzQsuDZVBkNf8ycXvG-frgt4X2rqpcTQKKYkeh7GEDka0N1AQy4z7SnKU4mC0kr2HL_OX9DDr08jxxX4DVDa0ZtZaKMcS3aXqjtatQodmlBg26yVMSkeyW-fJ_c_GL3B06EIGqieNvA.jpeg?alt=media) #### 一般設定 (General Settings) **レガシーエディター (Legacy Editor)** **General**タブでは、**お問い合わせフォームボタン**要素の基本的な設定を構成できます。主なパラメータは以下の通りです。 **ボタンタイプ (Button Type)** 3つのオプションが利用可能です。 * テキストのみ (Text only) * アイコン付きテキスト (Text with icon) * アイコンのみ (Icon only) ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-bb6ba4909b984e35c253ad5351b93882421e3a3a%2FAD_4nXcuE8fiYbznmilhkiyXqQ4lZnkVUP-nhzu1jhhslYqE25JNygPlTsvS6lQzEHMS3nDzij3QM2iQ9aEsQEw7tqwRCP5YP2XAc3nyxfnUHwDYuP0mbuQL_tYPwXeoAO_5rRYeucwhOQGWihmvs3DK1gkeyW-fJ_c_GL3B06EIGqieNvA.gif?alt=media) **ボタンテキスト (Button Text)** ボタンに表示されるテキストを入力します。「アイコンのみ」のボタンタイプを選択した場合でもこのフィールドを編集できますが、テキストはボタンに表示されません。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-6fcdfdceff4e0a8e8450d1445ab7645f20e80c99%2FAD_4nXeHwNqwlL-KAzgEOBoul5Y-guiNBesmnSeDcqGB26TGq3nIrE5D_330M1FHjxRH-MDZaFfWxOhRDmKnkBMee3Jc7Itb7WuEeNHSI9DzWSp3ku8oDJwJEFyeDRdP_riyCDGgJfeZb44Jgo5COaACqgkeyW-fJ_c_GL3B06EIGqieNvA.png?alt=media) **アイコン位置 (Icon Position)** 選択したボタンタイプにアイコンが含まれている場合、その位置を選択できます。オプションは以下の通りです。 * ボタンテキストの左側 (Left of the button text) * ボタンテキストの右側 (Right of the button text) * ボタンテキストの上側 (Top of the button text) * フル幅を有効にする (Enable Full Width) このオプションを使用すると、ボタンがコンテナのフル幅に拡大表示されます。 **トラッキング (Tracking)** 3つのトラッキングオプションが利用可能です。 * **PageFlyイベント (PageFly events)**: PageFlyアナリティクスダッシュボード内でボタンとのユーザーインタラクションを追跡し、ボタンがクリックされた頻度についての洞察を得られます。 * **Googleアナリティクス (Google analytics)**: Googleアナリティクスと連携してボタンのクリックをイベントとして追跡し、ユーザーエンゲージメントとコンバージョン率の測定に役立ちます。 * **Facebookピクセル (Facebook pixel)**: Facebookピクセルを使用してボタンのクリックを追跡し、ボタンとのユーザーインタラクションに基づいてFacebook広告キャンペーンを監視および最適化できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b32d4f4740e3a4be07e15421f65ee09d34b4c817%2FAD_4nXdsXzf01s_iCeGiCisDk-2ThAGnp_WRtpn3-Ua58ZBjS08v9yGfEx6ViA26JbPc2owDaEEC3yO564Mu4PeSPSOTB2Lb2m3LI7Io1gq1rtxFevKBUV6ROotkNNx1kEgjmKmlMtyvUWkUAsvVa4NsiAkeyW-fJ_c_GL3B06EIGqieNvA.png?alt=media) 属性 (ATTRIBUTES)、表示設定 (VISIBILITY)、アニメーション (ANIMATION) パラメータについては、この[記事](https://help.pagefly.io/manual/elements-general-settings/)で情報を取得できます。 **Gen 2 エディター (Gen 2 Editor)** {% hint style="warning" %} **重要な注意**: Gen 2 レイアウトは、従量課金制 ([スロットプラン](https://help.pagefly.io/manual/pricing-plans/)) でのみ利用可能になります。 {% endhint %} 基本的なセクションで利用できる設定に加えて、フレックスセクションで\*\*お問い合わせフォームボタン\*\*を使用する場合、コンテンツを配置するための「Align Self」オプションを3つのスタイルから選択できます。 * 上部 (Top) * 中央 (Center) * 下部 (Bottom) ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-51ef44c2ab15f1f85dd56dd6c1565c91d42958bd%2FAD_4nXfLIyzQVoK0eRqMeE1J-uEAoka1p9QBaSHHDNMWwTCKWfYypF58dVTPG41rwZPYMK_bTXi1FjqCbVLPYsC7vFvt7NusEquQm3jEdty5tUkKlenuz3OVIHmMCfOWIaDZFHuaq_GM3UurlCkFDYjdkeyW-fJ_c_GL3B06EIGqieNvA.jpeg?alt=media) #### スタイリング設定 (Styling Settings) スタイリングタブでは、**お問い合わせフォームボタン**要素の外観をカスタマイズして、ブランドのデザインと一致させることができます。 **レガシーエディター (Legacy Editor)** 詳細については、[スタイリングタブガイド](https://help.pagefly.io/manual/elements-style-settings/)を参照してください。以下は、**スタイリングタブ**にある**お問い合わせフォームボタン**要素に関する2つの注目すべき設定です。 **ボタン状態 (Button State)**: ボタン状態を選択でき、3つのオプションが含まれます。 * 標準 (Normal): ボタンのデフォルトの外観。 * マウスオーバー (Mouse Over): ユーザーがボタンの上にマウスカーソルを置いたときの外観。 * アクティブ/選択済み (Active/Selected): ボタンがクリックまたは選択されたときの外観。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-4975dd48112fb45af51f577d322454c70d3f2f28%2FAD_4nXf3GQ_-L5OE3yPDolCx2V067o82bSGzFZpJTtyvQ_2lIGID5JQfmgFDMIFtRCqb2kUBqxLWDSRGY6qO5YUKRSBqj6D0qdZxZeU3tGUj1JSjSR-u6TXodl5kSkz9b9qXaiMy_iW8UWnEAk18F3muXQkeyW-fJ_c_GL3B06EIGqieNvA.png?alt=media) **水平方向の配置 (Horizontal Alignment)**: ボタンの水平方向の配置を次のオプションで設定します。 * 右 (Right) * 左 (Left) * 中央 (Center) ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1687c7bc7571107030ab6a3827359f2494c6fb05%2FAD_4nXd617waCsh5F9NVcP2G56IZvAR4K1nh-76itq-HrMyhWk9aamV9OwaAXIcbsRb5cN0-kT_G3whI3FIT6veDqbbVNK41n74alF-WQL1oUWAj3ru46-i93nwmeHoiXU80NWyHDkaD5cm0O6aQsUTFkeyW-fJ_c_GL3B06EIGqieNvA.gif?alt=media) **Gen 2 エディター (Gen 2 Editor)** フレックスセクションで**お問い合わせフォームボタン**要素を使用する場合、**スタイリングタブ**で以下の3つのオプションを使用して、その幅と高さを制御できます。 * コンテナにフィット (Fill Container): お問い合わせフォームボタンは、親コンテナのスペース全体に拡大されます。 * コンテンツを包み込む (Hug Content): お問い合わせフォームボタンは、その中のコンテンツに合わせてサイズが変更されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-620aac8dfc600e0ecd70c07e490bb4115de331e2%2FAD_4nXewwVprE9jqOREMqThLKCU9ItYjb3SbDZaeD21l90EYxhVYx5V3UW65O4yjvctjcUAxbRTVjw9NC_3LTq9WTQFnPCBmk-G6vt6xwZj_VFZwlXcv_nqc0kP1tn75HIV1xabnN2x650AAku7W7lTFLQkeyW-fJ_c_GL3B06EIGqieNvA.jpeg?alt=media) * 固定幅 / 固定高さ (Fixed Width / Fixed Height): **お問い合わせフォームボタン**の特定の幅や高さを設定します。このオプションの下で正確な寸法を定義できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-7f74c45480a62c87edab256f740654f06fd075c4%2FAD_4nXcrWt6rfRUwAwadokjWabTd24uocXzyw6UYuy7NUhmqOU_fJ7RWR6_27J8v9Um4I3SXFGbIE5uC_zKf02i0j-DiCGCSbrI_K3LxsAGajrdpaZGlpGKhpPwQKBiYN4Lc97U3iEzHwkUtrQ92Ie2skeyW-fJ_c_GL3B06EIGqieNvA.gif?alt=media) \*\*「その他の設定 (More settings)」\*\*をクリックして、**お問い合わせフォームボタン**の最小幅と最大幅、および最小高と最大高を設定します。 ### お問い合わせフォームボタン要素の通知設定方法 お客様が送信をクリックした後、メッセージはShopify admin > Settings > General > Store detailsで設定されたストアメールに直接送信されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-19bef324717855e504063dc225bac8cd8215b4ee%2FAD_4nXdggsFHTcxRxmIumuswRIh0wb4NJ817n5rRjBSNbJi4suD4ToBQwqK2BvCMM5YWPhn33O2WMs9h4NxrbAeWBCh5767Nd0eEdrexZIuo9GyslKOTjW-oEu-0s7Zj3MuWP4BKT62ddW8llMAveCKyIgkeyW-fJ_c_GL3B06EIGqieNvA.gif?alt=media) 送信後にお客様をリダイレクトしたい場合は、[お問い合わせフォーム](https://help.pagefly.io/manual/shopify-elements-contact-form)要素全体を選択し、送信後に\*\*リダイレクト (Redirect)\*\*を有効にしてください。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-23704e896abbe51dba0f667ad25d099848274bb3%2FAD_4nXcWq5eJsYQqV9CW5mxFltLUhTBVF7xoabWkDurVnIwtpPG89hVGcO2DcD9M7SKoAA0t7T3YxL68usWVmXr5G2xG7umgkakcREkpJ9vcvDUjDLfee2kuHWqvpV7zj7m-UoJpeywWTj2RlSKDa9ecygkeyW-fJ_c_GL3B06EIGqieNvA.png?alt=media) 別の選択肢として、Klaviyo要素を使用することもできます。詳細な手順については、[Klaviyo連携の記事](https://help.pagefly.io/manual/klaviyo-signup-forms-element/)を参照してください。 ### よくあるケース #### フォームが送信されない (Form Not Submitting) お問い合わせフォームボタンをクリックしてもフォームが送信されない場合、ボタンがフォームに適切にリンクされていない可能性があります。お問い合わせフォームボタンがお問い合わせフォーム要素内に配置されていることを確認してください。さらに、フォームの必須フィールドがすべて正しく入力されていることを再度確認してください。 #### 送信後のリダイレクトが機能しない (Redirect After Submission Not Working) 送信後にフォームが指定されたURLにリダイレクトされない場合、問題はリダイレクト設定にある可能性があります。お問い合わせフォーム要素全体に対して「送信後にリダイレクト (Redirect after submission)」オプションを有効にしたことを確認してください。また、リダイレクト用に\_入力した\_URLが正しく、適切な形式になっていることを確認してください。 ### よくある質問 (Frequently Asked Questions) **どのようなお問い合わせフォームボタンが良いですか？ (What makes a good Contact Form Button?)** 良いお問い合わせフォームボタンは、視覚的に魅力的で読みやすく、ブランドのデザインと一致している必要があります。ページ上で目立つようにし、明確で簡潔なコールトゥアクション（CTA）を使用し、送信を促すためにフォーム内の目立つ位置に配置する必要があります。 **お問い合わせフォームボタンのCTAテキストは何であるべきですか？ (What should the CTA text on the Contact Form Button be?)** お問い合わせフォームボタンのCTAテキストは、明確で行動を促すものである必要があります。一般的な例としては、「送信」、「メッセージを送る」、「お問い合わせ」、「連絡を取る」などがあります。テキストは、ボタンがクリックされたときに実行されるアクションを明確に示す必要があります。 **お問い合わせフォームボタンのアクセシビリティを確保するにはどうすればよいですか？ (How do I ensure the Contact Form Button is accessible?)** アクセシビリティを確保するには、ボタンとテキストに高いコントラストの色を使用し、ボタンが簡単にクリックできる十分な大きさであることを確認し、すべてのアイコンに説明的なaltテキストを含めます。さらに、キーボードを使用してボタンをナビゲートおよびアクティブ化できることを確認してください。 ### その他のリソース (Additional Resources) * [Shopifyお問い合わせフォームフィールドの使用方法](https://help.pagefly.io/manual/shopify-elements-contact-form-field/) * [PageFlyでお問い合わせページを作成する6つのステップ](https://help.pagefly.io/manual/how-to-create-a-contact-us-page-with-pagefly/)