Shopifyでお問い合わせフォームを設置するには?カスタマイズや自動返信機能の実装方法について解説

Shopifyでお問い合わせフォームを設置するには?カスタマイズや自動返信機能の実装方法について解説

Shopifyストアを運営していると、「お客様からの質問にスムーズに答えたい」「商品の注文以外のお問い合わせ窓口を作りたい」といった場面が出てきますよね。

そんな時に不可欠なのが「お問い合わせフォーム」ですが、次のような悩みを抱いている担当者の方も多い状況です。

  • 「Shopifyでお問い合わせフォームってどうやって作るの?」
  • 「標準機能だけだと項目が足りない…もっと自由にカスタマイズしたい」
  • 「迷惑メールやスパムが多くて困っている」
  • 「デザインをもっとお店の雰囲気に合わせたい」

特に、コードの知識がない方にとっては、設定が難しく感じられたり、時間がかかってしまったりすることもあるかもしれません。

そこでこの記事では、簡単かつ確実にフォームを設置・カスタマイズする方法から、便利なアプリを使った高機能なフォームの作り方、そして多くのストアオーナーが悩むスパム対策まで、幅広く解説していきます。

Shopifyの標準機能を使ったお問い合わせフォームの設置方法

Shopifyには、標準機能としてお問い合わせフォームを作成する機能が備わっています。「まずは手軽に設置したい」という方は、この基本機能から試してみましょう。専門知識がなくても、管理画面から比較的簡単に設置できます。

Shopify標準機能を使ったお問い合わせフォームの設置方法

Shopifyの標準機能を使ったお問い合わせフォームの設置は、管理画面から数ステップで完了します。

  1. 管理画面にログインし、「オンラインストア」>「ページ」をクリックします。
  2. 「ページを追加」をクリックします。
  3. タイトルに「お問い合わせ」など分かりやすい名前を入力します。
  4. コンテンツ編集エリアの右下にある「テーマテンプレート」セクションで、「contact」を選択します。
    (テーマによっては「page.contact」や「contact-form」といった名前の場合もあります)
  5. 「保存」をクリックします。

これで、基本的なお問い合わせフォームが設置されたページが作成されます。このページをお客様が見つけやすいように、ストアのヘッダーメニューやフッターメニューに追加しましょう。

メニューへの追加は、「オンラインストア」>「メニュー」から設定できます。標準機能を使えば、プログラミングの知識がなくても、すぐにお問い合わせ窓口を設けることができます。

Shopifyで作ったフォームの送信先メールアドレスを設定・変更する方法

お問い合わせフォームから送信された内容は、Shopifyストアに登録されている「ストアの連絡先メールアドレス」に通知が届くのが基本です。

この送信先を変更したり、確認したりする方法は以下の通りです。

  1. 管理画面の左下にある「設定」をクリックします。
  2. 「ストアの詳細」をクリックします。
  3. 「連絡先情報」セクションにある「ストアの連絡先メールアドレス」を確認・編集します。
  4. 変更した場合は「保存」をクリックします。

通常、このメールアドレス宛にすべてのお問い合わせ通知が届きます。もし、「担当者ごとに通知先を分けたい」「複数のアドレスで受信したい」といった場合は、標準機能だけでは対応が難しく、メールソフトの転送設定を利用するか、後述するShopifyアプリの導入を検討する必要があります。

まずは、メインとなる担当者のメールアドレスが正しく設定されているかを確認しましょう。

Shopify標準のフォームでは自動メール返信機能は使えない

Shopify標準のフォームでは自動メール返信機能を利用することができません。

問い合わせに対して定型文を一時回答したい場合などは、Shopifyアプリや外部フォームツールの活用を検討しましょう。

後半の章で詳しく解説します!

もっと便利に!お問い合わせフォームをカスタマイズする方法

標準のお問い合わせフォームは簡単に設置できますが、「もっと項目を追加したい」「デザインを調整したい」「確認画面や自動返信メールを設定したい」といった要望が出てくることも多いでしょう。

ここでは、標準フォームをさらに使いやすくするためのカスタマイズ方法について解説します。

Dawnテーマでお問い合わせフォームの項目を追加・変更する

Shopifyの標準テーマであるDawnなどでは、テーマのコードを編集することでお問い合わせフォームの項目を追加・変更できます。例えば、「お問い合わせ種別(商品について、返品についてなど)」の選択肢を追加したり、「注文番号」の入力欄を追加したりすることが可能です。

具体的な手順は以下のようになります。

  1. 管理画面で「オンラインストア」>「テーマ」に進みます。
  2. カスタマイズしたいテーマの「アクション」>「コードを編集」をクリックします。
  3. 左側のファイルリストから「Templates」フォルダ内の `page.contact.liquid` または関連するファイルを探して開きます。
    (テーマによっては「Sections」フォルダ内の `contact-form.liquid` など別のファイルの場合もあります)
  4. ファイル内のHTMLコードを編集し、項目を追加・変更します。
    例えば、テキスト入力欄を追加する場合は <input type="text"> タグ、ドロップダウンリストを追加する場合は <select>タグなどを使用します。
  5. 編集後、「保存」をクリックします。

コード編集は自由度が高い反面、専門知識が必要です。 もし「コードは触りたくない」「もっと簡単に項目を追加したい」という場合は、やはりShopifyアプリの利用が最も確実で安全な方法と言えるでしょう。多くのアプリでは、ドラッグ&ドロップなどの直感的な操作で項目を追加・編集できます。

お問い合わせフォームに確認画面を追加する方法

お客様が入力内容を送信前に確認できる「確認画面」は、誤送信を防ぎ、ユーザーエクスペリエンスを高める上で非常に重要です。しかし、残念ながらShopifyの標準機能には、お問い合わせフォームに確認画面を追加する機能がありません。

確認画面を実装するには、主に以下の2つの方法があります。

  • JavaScriptやLiquidコードをカスタマイズして実装する: 高度な専門知識が必要となり、テーマのアップデートで影響を受ける可能性もあります。
  • Shopifyアプリを利用する: 多くのフォーム作成アプリには、確認画面の機能が標準で搭載されています。設定も比較的簡単です。

ユーザーが安心してフォームを利用できるようにするためにも、確認画面の設置は強く推奨されます。特に、入力項目が多い場合や、重要な情報を扱っている場合は必須と言えるでしょう。実装方法の詳細は、専門的な内容になるため、別の記事で詳しく解説します。

お問い合わせフォームの設置におすすめのShopifyアプリ

「標準機能では物足りない」「コード編集は難しいけど、もっと高機能なフォームが欲しい」という方には、Shopifyアプリの活用が最適解です。

アプリを使えば、専門知識がなくても、デザイン性の高い、多機能なフォームを簡単に作成・管理できます。スパム対策や問い合わせ管理の効率化にも繋がります。

1. Powerful Contact Form Builder

「Powerful Contact Form Builder」は、その名の通り、非常に高機能でカスタマイズ性に優れたフォームを構築できる人気のアプリです。

  • ドラッグ&ドロップで簡単作成: コーディング不要で、直感的にフォームを作成・編集できます。
  • 豊富な項目タイプ: テキスト、メールアドレス、電話番号はもちろん、ドロップダウン、チェックボックス、ラジオボタン、ファイルアップロード、日付選択など、多様な項目を追加できます。
  • 条件分岐ロジック: ユーザーの回答内容に応じて、表示する項目を出し分けるといった高度な設定が可能です。(例:「お問い合わせ種別」で「返品について」を選んだら「注文番号」欄を表示するなど)
  • デザインカスタマイズ: フォント、色、背景などを自由に設定し、ストアのデザインに完全にマッチさせることができます。
  • スパム対策: reCAPTCHA連携はもちろん、独自のスパムフィルター機能も搭載しています。
  • その他: 自動返信メール、確認画面、複数フォーム作成、問い合わせ管理機能など、必要な機能が網羅されています。

多機能な分、設定項目はやや多めですが、日本語にも対応しており、サポートも充実しています。無料プランから試せるので、まずは気軽に導入してみるのがおすすめです。

https://apps.shopify.com/form-builder-contact-form?locale=ja

2. Improved Contact Form(日本語未対応)

「Improved Contact Form」は、シンプルさと使いやすさに重点を置いたアプリです。手軽に標準フォームを改善したい場合に適しています。

  • 簡単設置: 数クリックで既存のコンタクトページにフォームを設置できます。
  • ポップアップ表示: ページ遷移なしで、ポップアップウィンドウとしてフォームを表示させることが可能です。
  • reCAPTCHA連携: Google reCAPTCHA (v2, v3) に対応し、スパム対策を強化できます。
  • 基本的なカスタマイズ: 項目の追加(限定的)、必須設定、デザイン調整(色など)が可能です。
  • シンプル設計: 機能はPowerful Contact Form Builderほど多くありませんが、その分、設定が分かりやすく、手軽に導入できます。

「まずは簡単にスパム対策を強化したい」「ポップアップフォームを試してみたい」といったニーズに合っています。こちらも無料プランがあります。

https://apps.shopify.com/improved-contact-form?locale=ja

3. Channel Talk

外部のツールを使うのであれば、チャネルトークの導入がおすすめです。

チャット型のUIではありますが、単純な問い合わせの受付だけではなく、チャットボット機能を使った問い合わせの前捌きや、CRMと連携したWeb接客機能(商品サジェストのポップアップなど)を利用することができます。

また、ECサイトの問い合わせだけではなく、LINE公式アカウント経由の問い合わせも一元管理することができ、これから本格的に問い合わせ業務体制を構築していきたい方にはおすすめのツールです。

https://channel.io/ja/user-chat

安心してフォームを運用するために必要なこと

お問い合わせフォームを設置すると、残念ながらスパムメール(迷惑メール)が送られてくることがあります。

大量のスパムは、重要な問い合わせを見逃す原因になったり、対応に余計な時間を取られたりするため、しっかり対策することが重要です。また、顧客情報を扱う以上、セキュリティにも配慮が必要です。

1. reCAPTCHAでボットによるスパムを防ぐ

スパムの多くは、プログラム(ボット)によって自動的に送信されています。これらを効果的にブロックするのが、Googleが提供する「reCAPTCHA」です。

reCAPTCHAは、「私はロボットではありません」というチェックボックスや、画像認証などによって、アクセスしているのが人間かボットかを判別する仕組みです。

ShopifyストアにreCAPTCHAを導入するには、以下の方法があります。

  1. Shopifyの標準機能で有効化する(オンラインストア設定):
    • 管理画面の「設定」>「オンラインストア」>「セキュリティ」セクションで、「Google reCAPTCHA を有効にする」にチェックを入れます。
    • チェックアウトページやログインページに加え、標準のお問い合わせフォームにも適用される場合があります。(テーマによって挙動が異なる場合があります)
  2. Shopifyアプリを利用する:
    • 前述の「Powerful Contact Form Builder」や「Improved Contact Form」など、多くのフォームアプリがreCAPTCHA連携機能を搭載しています。
    • アプリの設定画面から簡単に有効化でき、より確実にフォームを保護できます。

reCAPTCHAの導入は、スパム対策の基本であり、非常に効果的です。 まずはこれを設定することをおすすめします。

2. アプリを活用した高度なスパム対策

reCAPTCHAだけでは防ぎきれない巧妙なスパムも存在します。より強力な対策を行いたい場合は、フォームアプリが提供する高度なスパムフィルター機能の活用を検討しましょう。

例えば、以下のような機能があります。

  • キーワードフィルター: 本文や件名に特定の単語(例:セールス、広告、URLなど)が含まれる場合にブロックする。
  • 禁止IPアドレスリスト: スパム送信元のIPアドレスを登録し、アクセスを拒否する。
  • ハニーポット: 人間の目には見えない罠の入力項目を設置し、ボットが入力した場合にスパムと判定する。

これらの機能を組み合わせることで、スパムメールを大幅に削減し、問い合わせ対応の効率を上げることができます。どのアプリがどのようなスパム対策機能を持っているか、アプリ選びの際に確認してみましょう。

継続的なスパム対策は、ストレスなくストアを運営し、お客様からの大切な声を見逃さないために不可欠です。

Shopifyを利用したお問い合わせフォームの設置方法まとめ

この記事では、Shopifyでお問い合わせフォームを設置・カスタマイズする方法について、基本的な手順からアプリを活用した高度な方法、そして重要なスパム対策まで幅広く解説しました。

ポイントをまとめると以下の通りです。

  • 簡単設置: Shopify標準機能を使えば、コード知識がなくてもすぐにお問い合わせフォームを作成できます。
  • カスタマイズ: Dawnテーマなどのコード編集で項目追加も可能ですが、専門知識が必要です。確認画面や自動返信メールの設定は標準機能では難しく、アプリ利用がおすすめです。
  • アプリ活用: 「Powerful Contact Form Builder」や「Improved Contact Form」などのアプリを使えば、ドラッグ&ドロップで簡単に高機能・高デザインなフォームを作成でき、管理も効率化できます。
  • スパム対策: reCAPTCHAの設定は必須です。さらに強力な対策には、アプリのスパムフィルター機能が有効です。

「お問い合わせフォームの設定に時間をかけたくない」「スパムにうんざりしている」「もっとお店に合ったフォームにしたい」といったお悩みは、この記事で紹介した方法、特にShopifyアプリを活用することで解決できるはずです。

まずは、あなたのストアに必要な機能は何かを考え、標準機能で十分か、それともアプリが必要かを判断しましょう。多くのアプリには無料プランや試用期間がありますので、ぜひ実際に触って、最適な方法を見つけてください。

使いやすく安全なお問い合わせフォームを設置して、お客様とのコミュニケーションを円滑にし、ストアの信頼性と売上向上に繋げていきましょう。

【2023年】ECプラットフォーム10社を徹底比較!ECカオスマップ資料

ECサイトの構築にはECプラットフォームが欠かせません。こちらの資料では合計10社のプラットフォームの導入費用や機能について簡単に比較できるようにまとめました。
これからECサイトの構築やリプレイスを検討されているご担当者様は、こちらのボタンからECカオスマップ資料をダウンロードいただき、ぜひ比較検討にお役立てください!

資料ダウンロードはこちら