Shopify のお問い合わせフォームをカスタマイズする方法を徹底解説！おすすめアプリも紹介

はじめに
記事の構成
Shopify でお問い合わせフォームをカスタマイズできる？
お問い合わせフォームをカスタマイズするメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプルお問い合わせフォーム｜コンタクトフォームカスタマイズ」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをテーマに追加（有効化）
- 自動でテーマに追加（1 クリック追加）
- 手動でテーマに追加（任意のページに設置したい場合）
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

Shopify でオンラインストアを運営していると、「お問い合わせフォームの入力項目を増やしたい」「ページごとに異なるフォームを設置したい」「フォームのデザインをストアに合わせてカスタマイズしたい」といったニーズが出てくることがあります。

Shopify には標準でお問い合わせフォーム（コンタクトフォーム）が用意されていますが、入力項目は「名前」「メールアドレス」「メッセージ」の 3 つに限られています。ラジオボタンやチェックボックス、ドロップダウンといったフィールドを追加したり、お問い合わせフォームを複数作成してページごとに配置したりすることは、デフォルトの機能だけでは実現できません。

この記事では、Shopify のお問い合わせフォームをカスタマイズする方法として、アプリを使う方法とテーマのコード編集で実装する方法の 2 つを詳しく解説します。特にアプリを使った方法では、日本語完全対応の 「シンプルお問い合わせフォーム｜コンタクトフォームカスタマイズ」 を使って、インストールからフォームの設置・カスタマイズまでをステップバイステップで紹介します。

この記事は以下の記事を参考にしています。

記事の構成

この記事は以下の流れで解説します。

Shopify でお問い合わせフォームをカスタマイズできるのか
お問い合わせフォームをカスタマイズするメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプルお問い合わせフォーム｜コンタクトフォームカスタマイズ」の紹介
アプリのインストール手順
テーマへの追加と設定方法
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツとよくある質問

Shopify でお問い合わせフォームをカスタマイズできる？

結論から言えば、Shopify のお問い合わせフォームはカスタマイズ可能です。 ただし、デフォルト機能だけでは制限が多く、実現方法は主に 2 つあります。

Shopify の標準コンタクトフォームには、以下のような制限があります。

入力項目が「名前」「メールアドレス」「メッセージ」の 3 つのみ
ラジオボタン、チェックボックス、ドロップダウンなどの入力タイプを追加できない
フォームを複数作成してページごとに設置を分けることができない
フォーム独自のデザイン（フォントサイズ、色、余白、ボタンスタイル）を細かく調整できない

これらの制限を解消する方法は、以下の 2 つです。

テーマのコード編集で実装する方法：Liquid・HTML・CSS・JavaScript を直接編集して、フォームをカスタマイズする
アプリを導入して実装する方法：お問い合わせフォームアプリをインストールして、ノーコードでカスタマイズする

お問い合わせフォームをカスタマイズするメリット・デメリット

メリット

必要な情報を漏れなく収集できる

デフォルトのフォームでは「名前」「メール」「メッセージ」しか入力できませんが、お問い合わせフォームに項目を追加することで、問い合わせの種類・商品名・注文番号・電話番号など、対応に必要な情報をあらかじめ収集できます。ドロップダウンやラジオボタンを使えば、顧客が選択するだけで正確な情報を得られるため、メールでのやり取りの回数を減らすことができます。

顧客体験の向上と信頼性の確保

フォームのデザインをストアのブランドカラーやテイストに合わせてカスタマイズすることで、統一感のある顧客体験を提供できます。整ったお問い合わせフォームは「このストアはしっかり運営されている」という信頼感にもつながり、初めて訪問する顧客の購入意欲にも良い影響を与えます。

用途に応じた複数フォームの運用が可能

Shopify のお問い合わせフォームを複数設置できるようになれば、一般的なお問い合わせだけでなく、資料請求フォーム、アンケートフォーム、卸売り問い合わせフォーム、採用応募フォームなど、用途に応じたフォームをページごとに配置できます。

対応の効率化とコスト削減

フォームの項目で問い合わせの種類を事前に分類してもらえば、内容に応じた担当者への振り分けがスムーズになります。説明テキストフィールドを使って、よくある質問への回答や注意事項をフォーム内に表示しておくことで、問い合わせ自体を減らすこともできます。

スパムメールの防止

メールアドレスを直接公開する代わりにフォームを設置することで、スパムメールのリスクを大幅に軽減できます。必須項目の設定やバリデーション（入力チェック）機能と組み合わせれば、不正な送信を防ぐことも可能です。

デメリット

アプリの月額費用が発生する場合がある

高度なカスタマイズを行うにはアプリの導入が必要で、月額料金がかかる場合があります。ただし、多くのアプリは無料体験期間を用意しており、まずは試してから本格導入を検討できます。

設定に一定の手間がかかる

フォームの項目設定やデザインカスタマイズには、ある程度の時間と手間がかかります。ただし、ノーコードで操作できるアプリがほとんどなので、技術的なハードルは低いです。

フォームの項目が多すぎると離脱率が上がる

入力項目を増やしすぎると、顧客がフォームの入力途中で離脱してしまうリスクがあります。必要最低限の項目に絞り、任意項目と必須項目を明確に分けることが重要です。

テーマのコード編集とアプリ導入の比較

テーマのコード編集で実装する方法

メリット：月額費用がかからない、完全に自由なカスタマイズが可能
デメリット：Liquid・HTML・CSS・JavaScript の知識が必要、テーマアップデート時に上書きされるリスクがある、メンテナンスは自分で行う必要がある、複雑な入力タイプ（ラジオボタン・チェックボックス等）の実装が難しい

アプリを導入する方法

メリット：ノーコードで操作可能、テーマに依存しないためアップデートの影響を受けにくい、サポートやアップデートを開発者が提供、複雑なフィールドタイプにも対応
デメリット：月額費用が発生する場合がある、アプリの仕様に依存する部分がある

結論：最初はアプリで小さく試すのがおすすめ

コーディングに慣れていない場合や、まずは手軽にお問い合わせフォームをカスタマイズしたい場合は、アプリを導入する方法がおすすめです。多くのアプリは無料体験期間を用意しているため、コストをかけずに試すことができます。コード編集による実装は、自由度が高い反面、技術的なハードルとメンテナンスコストが伴うため、Liquid や CSS に十分な知識がある方向けの選択肢です。

アプリのインストール手順

「シンプルお問い合わせフォーム｜コンタクトフォームカスタマイズ」のインストール手順を解説します。

① Shopify 管理画面の左下にある「設定」をクリックします。

Shopify 管理画面の「設定」ボタンの位置を示した画面

② 「アプリ」をクリックし、画面上部の「Shopify App Store」へ移動します。

「アプリ」画面から Shopify App Store へ移動する画面

③ 検索窓に「シンプルお問い合わせフォーム」と入力し、表示されたアプリをクリックします。

Shopify App Store でアプリを検索した結果画面

④ アプリ詳細画面で「インストール」をクリックします。

アプリ詳細画面の「インストール」ボタンを示した画面

⑤ 権限の確認画面が表示されるので内容を確認し、「インストール」をクリックしてインストールを完了します。

権限確認画面で「インストール」をクリックする画面

アプリをテーマに追加（有効化）

インストールが完了したら、テーマにアプリブロックを追加します。

自動でテーマに追加（1 クリック追加）

① アプリの管理画面で「設定ページへ」をクリックして設定ページを開きます。

フォーム設定一覧画面の「設定ページへ」ボタンを示した画面

② 「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。

テーマ選択と「テーマに追加」ボタンを示した画面

③ テーマエディタが開いたら、表示位置を確認して「保存する」をクリックします。

テーマエディタでアプリブロックが追加された状態の画面

手動でテーマに追加（任意のページに設置したい場合）

① Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。

Shopify 管理画面のテーマカスタマイズボタンを示した画面

② テーマエディタ上部のプルダウンから、アプリブロックを追加したいページに移動します。

テーマエディタ上部のページ選択プルダウンを示した画面

③ 「セクションを追加」または「ブロックを追加」をクリックします。

「セクションを追加」または「ブロックを追加」ボタンを示した画面

④ 「アプリ」タブから「シンプルお問い合わせフォーム」のアプリブロックを選んで追加します。

アプリタブからアプリブロックを選択する画面

⑤ 表示を確認し、「保存する」をクリックします。

テーマエディタでアプリブロックの表示を確認して保存する画面

アプリの設定項目を理解する

フォームの作成と管理

アプリの管理画面を開くと「フォーム設定一覧」が表示されます。ここでフォームの作成・編集・削除・ID コピーが行えます。

フォーム設定一覧画面

「新規フォームを作成」をクリックすると、フォーム作成画面に移動します。

フォーム設定一覧画面で「新規フォームを作成」ボタンを示した画面

基本設定

フォーム作成画面では、まず「基本設定」カードで以下の項目を設定します。

フォーム作成画面の基本設定カード

管理用名称（必須）：管理画面でのみ表示される名称。顧客には表示されません。（最大 50 文字）
フォームタイトル（必須）：ストア上で表示されるタイトル。例：「お問い合わせ」「資料請求」など。（最大 100 文字）
フォーム説明文（任意）：タイトルの下に表示される説明文。フォームの目的や注意事項を記載できます。（最大 500 文字）
送信ボタンラベル（必須）：送信ボタンに表示するテキスト。例：「送信する」「お問い合わせを送る」など。（最大 30 文字）

フィールド設定

「フィールド設定」カードでは、フォームに表示する入力フィールドを追加・編集できます。

フィールド追加画面でフィールド種別を選択している画面

フォームには以下の 7 種類のフィールドを追加できます。

テキスト（1行）：名前や件名など短いテキストの入力に最適
テキスト（複数行）：お問い合わせ内容やメッセージなど長文の入力に最適
メールアドレス：メールアドレス形式でバリデーションされる入力欄
ラジオボタン：複数の選択肢から 1 つだけ選ぶ入力欄
チェックボックス（複数選択可）：複数の選択肢から複数を選べる入力欄
ドロップダウン：プルダウンメニューから 1 つ選ぶ入力欄
説明テキスト：フォーム内に注意事項や補足説明を挿入するためのフィールド

各フィールドには「ラベル」「プレースホルダー」「必須チェック」「選択肢」などの設定項目があります。

フィールドの詳細設定を入力した画面

テーマカスタマイズ画面でのデザイン設定

テーマカスタマイズ画面でアプリブロックを選択すると、フォームの見た目を細かくカスタマイズできます。

フォーム ID の設定

アプリの管理画面で作成したフォームの ID をコピーし、テーマカスタマイズ画面のアプリブロック設定に貼り付けます。

フォーム設定一覧画面でフォームIDのコピーボタンを示した画面

テーマカスタマイズ画面のフォームID入力欄にIDを貼り付けた画面

タイトル・説明のスタイル設定

タイトル・説明のスタイル設定の設定画面

タイトルの文字揃え（左・中央・右）、フォントサイズ（10〜64px）、太さ、色を設定できます。説明文のフォントサイズ、太さ、色も個別に調整可能です。

入力フィールドのスタイル設定

必須・任意ラベルの設定画面

必須ラベル・任意ラベルのテキスト、文字色、背景色、角丸、余白を設定できます。ラベルのフォントサイズ・太さ・色、入力フィールドの文字サイズ・色・背景色・枠線も調整可能です。

ボタンのスタイル設定

ボタンのスタイル設定の設定画面

ボタンの高さ、幅、文字サイズ、文字色、背景色、枠線の色・太さ・角丸を設定できます。

余白設定

余白設定の設定画面

タイトル下部の余白、入力フィールド間の余白、フォームの最大幅、ブロック上下の余白など、レイアウトに関する設定が可能です。

すぐ使えるおすすめ設定例

一般的なお問い合わせフォーム

ストアへの質問や相談を受け付ける基本的なフォームです。

フォームタイトル：「お問い合わせ」
フィールド構成：お名前（テキスト1行・必須）→ メールアドレス（メール・必須）→ お問い合わせの種類（ドロップダウン・必須）→ お問い合わせ内容（テキスト複数行・必須）
ドロップダウンの選択肢：商品について / 配送について / 返品・交換について / その他
送信ボタンラベル：「送信する」

資料請求フォーム

カタログや資料のリクエストを受け付けるフォームです。

フォームタイトル：「資料請求」
フィールド構成：会社名（テキスト1行・任意）→ お名前（テキスト1行・必須）→ メールアドレス（メール・必須）→ ご希望の資料（チェックボックス・必須）→ ご質問・ご要望（テキスト複数行・任意）
チェックボックスの選択肢：製品カタログ / 価格表 / 導入事例集 / その他
送信ボタンラベル：「資料を請求する」

アンケートフォーム

顧客の声を収集するためのフォームです。

フォームタイトル：「お客様アンケート」
フィールド構成：説明テキスト（アンケートの趣旨説明）→ 満足度（ラジオボタン・必須）→ 当店を知ったきっかけ（ドロップダウン・必須）→ ご意見・ご感想（テキスト複数行・任意）→ メールアドレス（メール・任意）
ラジオボタンの選択肢：とても満足 / 満足 / 普通 / やや不満 / 不満
送信ボタンラベル：「アンケートを送信する」

文言のテンプレ例

フォームの説明文に使える文言のテンプレートをご紹介します。

一般的なお問い合わせ：「ご質問やご要望がございましたら、以下のフォームからお気軽にお問い合わせください。2 営業日以内にご返信いたします。」
資料請求：「以下のフォームにご入力いただくと、ご希望の資料をメールでお送りいたします。」
アンケート：「お客様のご意見は、サービス改善の参考にさせていただきます。お気軽にご回答ください。（所要時間：約 1 分）」

テーマのコード編集で実装する場合のサンプルコード

アプリを使わずに、テーマの Liquid テンプレートを直接編集してお問い合わせフォームをカスタマイズする方法も紹介します。

実装の流れ

テーマのコードエディタを開く
カスタム Liquid セクションを追加するか、既存のページテンプレートを編集する
HTML（Liquid）でフォームの構造を作成する
CSS でフォームのスタイルを設定する
必要に応じて JavaScript でバリデーションを追加する

HTML（Liquid）を追加

<section class="contact-form-custom">
  <div class="contact-form-custom__container">
    <h2 class="contact-form-custom__title">お問い合わせ</h2>
    <p class="contact-form-custom__description">
      ご質問やご要望がございましたら、以下のフォームからお気軽にお問い合わせください。
    </p>

    {% form 'contact' %}
      {% if form.posted_successfully? %}
        <div class="contact-form-custom__success">
          <p>お問い合わせを受け付けました。ありがとうございます。</p>
        </div>
      {% endif %}

      {% if form.errors %}
        <div class="contact-form-custom__errors">
          {{ form.errors | default_errors }}
        </div>
      {% endif %}

      <div class="contact-form-custom__field">
        <label for="cf-name">
          お名前
          <span class="contact-form-custom__required">必須</span>
        </label>
        <input type="text" id="cf-name" name="contact[お名前]" required>
      </div>

      <div class="contact-form-custom__field">
        <label for="cf-email">
          メールアドレス
          <span class="contact-form-custom__required">必須</span>
        </label>
        <input type="email" id="cf-email" name="contact[email]" required>
      </div>

      <div class="contact-form-custom__field">
        <label for="cf-type">お問い合わせの種類</label>
        <select id="cf-type" name="contact[お問い合わせの種類]">
          <option value="">選択してください</option>
          <option value="商品について">商品について</option>
          <option value="配送について">配送について</option>
          <option value="返品・交換について">返品・交換について</option>
          <option value="その他">その他</option>
        </select>
      </div>

      <div class="contact-form-custom__field">
        <label for="cf-message">
          お問い合わせ内容
          <span class="contact-form-custom__required">必須</span>
        </label>
        <textarea id="cf-message" name="contact[お問い合わせ内容]" rows="6" required></textarea>
      </div>

      <button type="submit" class="contact-form-custom__button">送信する</button>
    {% endform %}
  </div>
</section>

CSS を追加

.contact-form-custom__container {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 20px;
}

.contact-form-custom__title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #000;
}

.contact-form-custom__description {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-bottom: 32px;
}

.contact-form-custom__field {
  margin-bottom: 24px;
}

.contact-form-custom__field label {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #000;
}

.contact-form-custom__required {
  font-size: 12px;
  color: #ff0000;
  background-color: transparent;
  margin-left: 4px;
}

.contact-form-custom__field input,
.contact-form-custom__field select,
.contact-form-custom__field textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #000;
  box-sizing: border-box;
}

.contact-form-custom__field input::placeholder,
.contact-form-custom__field textarea::placeholder {
  color: #ccc;
}

.contact-form-custom__field textarea {
  resize: vertical;
}

.contact-form-custom__button {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: 16px;
  color: #fff;
  background-color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.contact-form-custom__button:hover {
  opacity: 0.8;
}

.contact-form-custom__success {
  padding: 12px 16px;
  background-color: #d4edda;
  color: #155724;
  border-radius: 4px;
  margin-bottom: 24px;
}

.contact-form-custom__errors {
  padding: 12px 16px;
  background-color: #f8d7da;
  color: #721c24;
  border-radius: 4px;
  margin-bottom: 24px;
}

コード実装の注意点

テーマをアップデートすると、カスタマイズした部分が上書きされる可能性があるため、バックアップを取っておくことをおすすめします
ラジオボタンやチェックボックスを追加する場合は、JavaScript でバリデーションの実装が別途必要です
Shopify の {% form 'contact' %} タグで生成されたフォームの送信先は、ストアの「設定 > 通知」で設定されたメールアドレスになります
name="contact[email]" の項目は Shopify がメールアドレスとして認識するため、返信先に使用されます
フィールド名は name="contact[フィールド名]" の形式で設定し、受信するメールにフィールド名とその値が含まれます

運用のコツ

フィールドは必要最低限に絞る：入力項目が多すぎると離脱率が上がります。本当に必要な項目だけに絞り、任意と必須を明確に分けましょう
フォーム説明文で期待値を合わせる：「2 営業日以内に返信します」など、回答までの目安を記載しておくと、顧客の不安を軽減できます
定期的にフォームの項目を見直す：運用を続ける中で、不要な項目や追加すべき項目が見えてきます。月に 1 回程度の頻度で見直しましょう
テスト送信を忘れずに：フォームを設置したら、必ず自分でテスト送信を行い、メールが正しく届くか、入力内容が正しく反映されているかを確認してください
複数フォームの命名規則を統一する：複数のフォームを管理する場合は、管理用名称に「[ページ名]お問い合わせ」のような規則を設けると、管理しやすくなります

よくある質問

Q. Shopify のお問い合わせフォームに項目を追加できますか？

A. Shopify のデフォルトのコンタクトフォームでは項目の追加はできませんが、「シンプルお問い合わせフォーム｜コンタクトフォームカスタマイズ」などのアプリを使えば、テキスト入力・ラジオボタン・チェックボックス・ドロップダウンなどの項目をノーコードで自由に追加できます。

Q. Shopify でお問い合わせフォームを複数設置できますか？

A. デフォルトのコンタクトフォームは 1 種類のみですが、アプリを使えば複数のフォームを作成し、フォーム ID でページごとに異なるフォームを設置できます。

Q. お問い合わせフォームの送信先メールアドレスはどこで設定しますか？

A. Shopify のネイティブフォーム機能を使用しているアプリの場合、送信先は Shopify の「設定 > 通知 > ストアの連絡先」で設定されたメールアドレスになります。

Q. アプリを使うとストアの表示速度に影響はありますか？

A. 「シンプルお問い合わせフォーム｜コンタクトフォームカスタマイズ」は Shopify のネイティブ App Block として動作するため、ストア全体のパフォーマンスへの影響は最小限です。

Q. 無料体験期間中に解約できますか？

A. はい、7 日間の無料体験期間中にいつでも解約可能です。無料体験期間中に解約すれば、料金は一切発生しません。

Q. テーマのコード編集で実装する場合とアプリを使う場合、どちらがおすすめですか？

A. コーディングに慣れていない場合や、ラジオボタン・チェックボックスなどの複雑なフィールドを追加したい場合は、アプリの利用がおすすめです。コード編集は自由度が高い反面、テーマのアップデート時に上書きされるリスクがあります。

まとめ

Shopify のデフォルトのお問い合わせフォームは「名前」「メールアドレス」「メッセージ」の 3 項目のみで、カスタマイズには制限がある
お問い合わせフォームの項目追加・複数フォーム設置・デザインカスタマイズを実現するには、アプリの導入またはテーマのコード編集が必要
「シンプルお問い合わせフォーム｜コンタクトフォームカスタマイズ」 は、7 種類のフィールドタイプ・複数フォーム管理・細かなデザインカスタマイズに対応し、日本語完全対応で使いやすい
フォームの作成から設置まで 4 ステップで完了し、テーマカスタマイズ画面からノーコードでデザインを調整できる
7 日間の無料体験があるため、まずはお試しで導入してみるのがおすすめ

シンプルお問い合わせフォーム｜コンタクトフォームカスタマイズ - Shopify App Store