Shopifyにお問い合わせフォームを簡単に設置できるアプリを徹底解説｜ご利用ガイド

株式会社UnReact

2026/05/11

はじめに

Shopify は、世界中で利用されているネットショップ作成サービスです。テーマを使ってストアのデザインを自由にカスタマイズでき、さらにアプリを追加することで、標準にはない便利な機能を手軽に拡張できます。

「シンプルお問い合わせフォーム｜コンタクトフォームカスタマイズ」 は、テキスト入力・メールアドレス・ラジオボタン・チェックボックス・ドロップダウンなどのフィールドを自由に組み合わせて、オリジナルのお問い合わせフォームをかんたんに作成できる Shopify アプリです。作成したフォームは App Block としてテーマのどのページにも設置でき、フォームのデザインもテーマカスタマイズ画面から細かくカスタマイズできます。

料金

Basic Plan $9.99/月
インストールから 7 日間、無料でアプリをお試しいただけます
年払いで実質 2 ヶ月分無料でお得にご利用いただけます

アプリストア

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

シンプルお問い合わせフォーム｜コンタクトフォームカスタマイズのアプリストア画像

「シンプルお問い合わせフォーム｜コンタクトフォームカスタマイズ」でできること

「シンプルお問い合わせフォーム｜コンタクトフォームカスタマイズ」を使えば、コーディング不要でオリジナルのお問い合わせフォームをストアに設置できます。テキスト入力やメールアドレス、ラジオボタン、チェックボックス、ドロップダウンなど、さまざまなフィールドを組み合わせてフォームを自由に作成できます。作成したフォームはテーマのホームページ・商品ページ・コレクションページなど、どのページにも配置可能です。テーマカスタマイズ画面からタイトルやフィールド、ボタンのスタイルを細かく調整でき、追加 CSS によるカスタマイズにも対応しています。フォームの送信には Shopify のネイティブ機能を使用しているため、送信されたメッセージはストアのメールアドレスに届きます。

シンプルお問い合わせフォーム｜コンタクトフォームカスタマイズのメイン画像

主な特徴

テキスト・メールアドレス・ラジオボタンなどのフィールドでフォームを作れます。 さまざまな入力タイプを組み合わせて、ストアに最適なフォームを自由に設計できます。
作ったフォームは App Block として、テーマのどのページにも配置できます。 ホームページ、商品ページ、コレクションページなど、設置場所を選びません。
タイトル・フィールド・ボタンのフォントサイズや色、余白などをカスタマイズできます。 テーマカスタマイズ画面から、ストアのデザインに合わせて細かく調整できます。
フォームを複数作成・管理でき、フォーム ID で設置先を切り替えられます。 用途ごとにフォームを分けて管理し、フォーム ID をコピーして貼り付けるだけで設置できます。
Shopify のネイティブフォームで送信処理。メッセージはストアのメールアドレスに届きます。 外部サービスを使わず、Shopify 標準の仕組みでメッセージを受信できます。

カスタマイズした入力フォームをストアに設置できる！

ノーコードで作成したオリジナルのお問い合わせフォームを、ストアの好きなページに設置できます。テキスト入力やメールアドレス、ラジオボタン、チェックボックスなど、さまざまなフィールドを自由に組み合わせて、ストアに最適なフォームを作成しましょう。

カスタマイズした入力フォームをストアに設置できる

フォームの設定は簡単 4STEP！

フォームの作成から設置まで、かんたんな 4 ステップで完了します。アプリの管理画面でフォームを作成し、フォーム ID をコピーしてテーマカスタマイズ画面に貼り付けるだけ。難しい設定は一切不要です。

フォームの設定は簡単4STEP

複数のフォームを作成・管理できる！

お問い合わせフォーム、資料請求フォーム、アンケートフォームなど、用途に合わせて複数のフォームを作成・管理できます。フォーム ID で設置先を切り替えられるので、ページごとに異なるフォームを表示することも可能です。

複数のフォームを作成・管理できる

フォームの入力フィールドを自由にカスタマイズできる！

テキスト入力、テキストエリア、メールアドレス、ラジオボタン、チェックボックス、ドロップダウンなど、豊富なフィールドタイプから自由に選んでフォームを構成できます。各フィールドのラベルやプレースホルダー、必須/任意の設定も柔軟にカスタマイズできます。

フォームの入力フィールドを自由にカスタマイズできる

フォームのデザインを自由にカスタマイズできる！

テーマカスタマイズ画面から、フォームのタイトル・入力フィールド・ボタンのフォントサイズ、色、余白などを細かく調整できます。追加 CSS にも対応しているので、より高度なデザインカスタマイズも可能です。

フォームのデザインを自由にカスタマイズできる

アプリのインストール

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

Basic Plan $9.99/月
インストールから 7 日間、無料でアプリをお試しいただけます
年払いで実質 2 ヶ月分無料でお得にご利用いただけます

インストール手順

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

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

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

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

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

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

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

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

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

フォームを表示するまでの流れ

このアプリでは、以下の 4 ステップでフォームをストアに表示します。

STEP 1: アプリ管理画面でフォームを作成する

まず、アプリの管理画面でフォームを作成します。

① アプリの管理画面を開き、「新規フォームを作成」をクリックします。

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

② フォームの基本設定を入力します。管理用名称・タイトル・説明文・送信ボタンのラベルを設定してください。

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

③ 「フィールドを追加」をクリックして、フォームに表示する入力フィールドを追加します。テキスト（1行）・テキスト（複数行）・メールアドレス・ラジオボタン・チェックボックス（複数選択可）・ドロップダウン・説明テキストから選べます。

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

④ 各フィールドのラベル・プレースホルダー・必須設定などを入力し、「保存」をクリックしてフォームを作成します。

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

STEP 2: テーマにアプリブロックを追加する

作成したフォームを表示するために、テーマにアプリブロックを追加します。

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

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

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

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

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

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

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

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

テーマエディタから手動でアプリブロックを追加することもできます。任意のページにフォームを設置したい場合は、こちらの手順をお使いください。

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

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

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

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

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

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

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

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

⑤ 表示を確認し、問題なければ「保存する」をクリックします。

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

STEP 3: フォーム ID をコピーしてテーマカスタマイズ画面に貼り付ける

① アプリの管理画面の「フォーム設定一覧」で、表示したいフォームの「IDをコピー」をクリックします。

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

② テーマカスタマイズ画面でアプリブロックを選択し、「フォームID」の入力欄にコピーした ID を貼り付けます。

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

STEP 4: テーマカスタマイズ画面でフォームのスタイルを設定する

テーマカスタマイズ画面のアプリブロック設定から、フォームの見た目を細かくカスタマイズできます。タイトルのフォントサイズや色、入力フィールドのスタイル、ボタンのデザイン、余白などを自由に調整してください。

設定が完了したら「保存する」をクリックすると、ストアにフォームが表示されます。

テーマカスタマイズ画面でフォームのスタイルをカスタマイズしている画面

コンタクトフォームの作成・編集

フォーム設定一覧

アプリの管理画面を開くと「フォーム設定一覧」が表示されます。ここでは、作成したフォームの一覧を確認できます。

新規フォームを作成: 画面右上の「新規フォームを作成」ボタンをクリックすると、フォーム作成画面に移動します。
フォームの編集: 各フォームの「編集」ボタンをクリックすると、フォーム編集画面に移動します。
フォーム ID のコピー: 各フォームの ID 横にあるコピーボタンをクリックすると、フォーム ID がクリップボードにコピーされます。テーマカスタマイズ画面でフォームを設置する際に使用します。
フォームの削除: 各フォームの「削除」ボタンをクリックすると、確認ダイアログが表示されフォームを削除できます。

フォーム設定一覧画面

基本設定

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

設定名	必須	説明
管理用名称	○	管理画面でのみ表示される名称です。顧客には表示されません。フォームを複数作成する場合に、どのフォームか識別するために使用します。（最大 50 文字）
フォームタイトル	○	ストア上で表示されるフォームのタイトルです。例:「お問い合わせ」「資料請求」など。（最大 100 文字）
フォーム説明文	−	ストア上で表示されるフォームの説明文です。タイトルの下に表示されます。フォームの目的や注意事項などを記載するのに便利です。（最大 500 文字）
送信ボタンラベル	○	フォーム下部に表示される送信ボタンのテキストです。例:「送信する」「お問い合わせを送る」など。（最大 30 文字）

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

フィールド設定

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

フィールドの操作

フィールドを追加: 「フィールドを追加」ボタンをクリックすると、新しいフィールドが末尾に追加されます。
フィールドを削除: 各フィールド右側のゴミ箱ボタンをクリックすると、そのフィールドを削除できます（最低 1 件は必要です）。
フィールドの並び替え: 各フィールド右側の上下矢印ボタンをクリックすると、フィールドの表示順を変更できます。

フィールド設定カードの操作ボタンを示した画面

フィールド種別一覧

フォームには以下の 7 種類のフィールドを追加できます。用途に合わせて組み合わせてください。

フィールド種別	説明	設定項目
テキスト（1行）	1 行のテキスト入力欄です。名前や件名など短いテキストの入力に適しています。	ラベル（必須）・プレースホルダー・必須チェック
テキスト（複数行）	複数行のテキスト入力欄です。お問い合わせ内容やメッセージなど長文の入力に適しています。	ラベル（必須）・プレースホルダー・必須チェック
メールアドレス	メールアドレス入力欄です。メールアドレスの形式でバリデーションされます。	ラベル（必須）・プレースホルダー・必須チェック
ラジオボタン	複数の選択肢から 1 つだけ選ぶ入力欄です。お問い合わせの種類など、単一選択の場面に便利です。	ラベル（必須）・選択肢（必須）・必須チェック
チェックボックス（複数選択可）	複数の選択肢から複数を選べる入力欄です。興味のある項目を複数選んでもらう場合などに便利です。	ラベル（必須）・選択肢（必須）・必須チェック
ドロップダウン	プルダウンメニューから 1 つ選ぶ入力欄です。選択肢が多い場合にスペースを節約できます。	ラベル（必須）・選択肢（必須）・プレースホルダー・必須チェック
説明テキスト	入力欄ではなく、フォーム内に説明文を挿入するためのフィールドです。注意事項や補足説明を入れたい場合に便利です。	説明テキスト

各フィールド種別のプレビュー画面

各設定項目の詳細

設定項目	説明
フィールド種別	フィールドの種類を上記の 7 種類から選択します。種別を変更すると、設定項目が自動で切り替わります。
必須	チェックを入れると、そのフィールドが必須入力になります。未入力のまま送信しようとするとエラーが表示されます。テーマカスタマイズ画面の「必須ラベル」設定で、必須マークの表示をカスタマイズできます。
ラベル	フィールドの項目名です。ストア上で入力欄の上に表示されます。例:「お名前」「メールアドレス」「お問い合わせ内容」など。（必須）
プレースホルダー	入力欄が空のときに薄く表示されるヒントテキストです。入力例や説明を表示することで、顧客が入力しやすくなります。例:「例）山田太郎」「例）入力してください」など。
選択肢	ラジオボタン・チェックボックス・ドロップダウンで表示する選択肢です。1 行に 1 つの選択肢を入力してください。（必須）
説明テキスト	「説明テキスト」フィールド専用の設定です。フォーム内に表示する説明文を入力します。改行も反映されます。（最大 1000 文字）

フィールド設定の入力例を示した画面

フォームの保存

すべての設定が完了したら、画面下部の「作成する」（新規の場合）または「保存する」（編集の場合）をクリックしてフォームを保存します。保存が完了すると、フォーム設定一覧画面に戻ります。

作成・編集画面の保存ボタン

ヒント: フォームのスタイル（フォントサイズ、色、余白、ボタンデザインなど）は、テーマカスタマイズ画面のアプリブロック設定から変更できます。詳しくは次のセクション「コンタクトフォームブロックのカスタマイズ」をご覧ください。

コンタクトフォームブロックのカスタマイズ

テーマカスタマイズ画面でアプリブロックを選択すると、フォームの見た目を細かくカスタマイズできます。以下では、各設定項目について説明します。

フォーム ID

設定名	説明
フォーム ID	アプリの管理画面で作成したフォームの ID を入力します。フォーム設定一覧画面でフォーム ID をコピーし、ここに貼り付けてください。設置するフォームを切り替えたい場合は、別のフォーム ID に変更するだけで OK です。

フォーム ID の設定画面

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

フォームのタイトルと説明文の見た目をカスタマイズできます。

設定名	説明
タイトルの文字揃え	タイトルの表示位置を「左揃え」「中央揃え」「右揃え」から選べます。フォームのレイアウトやデザインに合わせて調整してください。（初期値: 中央揃え）
タイトルの文字サイズ	タイトルのフォントサイズを 10〜64px の範囲で設定できます。ページ内の他の見出しとのバランスを見ながら調整するのがおすすめです。（初期値: 24px）
タイトルの文字の太さ	タイトルを「通常」または「太字」に設定できます。目立たせたい場合は太字がおすすめです。（初期値: 太字）
タイトルの色	タイトルの文字色を自由に設定できます。ストアのブランドカラーに合わせて調整してください。（初期値: #000000）
説明文の文字サイズ	フォームの説明文のフォントサイズを 10〜64px の範囲で設定できます。本文テキストと同程度のサイズにすると読みやすくなります。（初期値: 14px）
説明文の文字の太さ	説明文を「通常」または「太字」に設定できます。（初期値: 通常）
説明文の色	説明文の文字色を自由に設定できます。（初期値: #000000）

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

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

フォームの入力フィールドやラベル、必須/任意バッジの見た目をカスタマイズできます。

必須・任意ラベルの設定

設定名	説明
必須ラベルの表示	必須項目に表示するラベルのテキストを設定できます。「_」や「必須」など、お好みのテキストを入力してください。（初期値: _）
必須ラベルの文字の色	必須ラベルの文字色を設定できます。赤系の色にすると目立ちやすく、入力漏れの防止に便利です。（初期値: #ff0000）
必須ラベルの背景色	必須ラベルの背景色を設定できます。背景色を付けてバッジ風にしたい場合に便利です。
任意ラベルの表示	任意項目に表示するラベルのテキストを設定できます。「任意」などのテキストを入力すると、必須でないことが明確になります。空欄にすると非表示になります。
任意ラベルの文字の色	任意ラベルの文字色を設定できます。（初期値: #888888）
任意ラベルの背景色	任意ラベルの背景色を設定できます。
必須・任意ラベルの文字サイズ	必須・任意ラベルのフォントサイズを 10〜32px の範囲で設定できます。（初期値: 14px）
必須・任意ラベルの枠線の丸み	ラベルの角の丸みを 0〜20px の範囲で設定できます。バッジ風のデザインにしたい場合は値を大きくしてください。（初期値: 4px）
必須・任意ラベルの上下の内側余白	ラベル内部の上下の余白を 0〜40px の範囲で設定できます。バッジの高さを調整する際に便利です。（初期値: 0px）
必須・任意ラベルの左右の内側余白	ラベル内部の左右の余白を 0〜40px の範囲で設定できます。バッジの幅を調整する際に便利です。（初期値: 2px）
ラベルとバッジ間の余白	フィールドラベルと必須/任意バッジの間のスペースを 0〜80px の範囲で設定できます。（初期値: 0px）

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

フィールドラベルの設定

設定名	説明
ラベルの文字サイズ	各入力フィールドのラベル（項目名）のフォントサイズを 10〜64px の範囲で設定できます。（初期値: 14px）
ラベルの文字の太さ	ラベルを「通常」または「太字」に設定できます。太字にすると項目名が見やすくなります。（初期値: 太字）
ラベルの色	ラベルの文字色を自由に設定できます。（初期値: #000000）

フィールドラベルの設定画面

テキスト入力フィールドの設定

設定名	説明
入力フィールドの文字サイズ	テキスト入力欄やテキストエリア、ドロップダウンの文字サイズを 10〜64px の範囲で設定できます。（初期値: 16px）
入力フィールドの文字の色	入力されたテキストの文字色を設定できます。（初期値: #000000）
入力フィールドのプレースホルダー文字の色	未入力時に表示されるプレースホルダーテキストの色を設定できます。薄い色にすると入力済みテキストとの区別がしやすくなります。（初期値: #cccccc）
入力フィールドの背景色	テキスト入力欄の背景色を設定できます。（初期値: #ffffff）
入力フィールドの枠線の色	テキスト入力欄の枠線の色を設定できます。（初期値: #cccccc）
入力フィールドの枠線の丸み	テキスト入力欄の角の丸みを 0〜20px の範囲で設定できます。値を大きくすると丸みのあるデザインになります。（初期値: 4px）

テキスト入力フィールドの設定画面

ラジオボタン・チェックボックスの設定

設定名	説明
ラジオ/チェックボックスの枠線の色	ラジオボタンとチェックボックスの枠線の色を設定できます。（初期値: #000000）
ラジオ/チェックボックスの選択時の色	ラジオボタンやチェックボックスが選択された際の色を設定できます。ブランドカラーに合わせるとストアとの統一感が出ます。（初期値: #000000）
ラジオ/チェックボックスの背景色	ラジオボタンとチェックボックスの背景色を設定できます。（初期値: #ffffff）
ラジオ/チェックボックスのラベルの文字サイズ	選択肢のテキストのフォントサイズを 10〜64px の範囲で設定できます。（初期値: 14px）
ラジオ/チェックボックスのラベルの文字の太さ	選択肢のテキストを「通常」または「太字」に設定できます。（初期値: 通常）

ラジオボタン・チェックボックスの設定画面

説明テキストの設定

設定名	説明
説明テキストの文字サイズ	フォーム内に挿入した説明テキスト（パラグラフ）のフォントサイズを 10〜64px の範囲で設定できます。（初期値: 14px）
説明テキストの文字の太さ	説明テキストを「通常」または「太字」に設定できます。（初期値: 通常）
説明テキストの文字の色	説明テキストの文字色を設定できます。（初期値: #000000）

説明テキストの設定画面

ボタンのスタイル設定

フォームの送信ボタンの見た目をカスタマイズできます。

設定名	説明
ボタンの高さ	送信ボタンの高さを 0〜100px の範囲で設定できます。（初期値: 40px）
ボタンの幅	送信ボタンの幅を 0〜1000px の範囲で設定できます。0px に設定するとボタンが横幅いっぱい（100%）に広がります。（初期値: 0px）
ボタンの文字サイズ	ボタン内のテキストのフォントサイズを 10〜64px の範囲で設定できます。（初期値: 14px）
ボタンの文字の色	ボタン内のテキストの色を設定できます。（初期値: #ffffff）
ボタンの背景色	ボタンの背景色を設定できます。ストアのアクセントカラーに合わせると統一感が出ます。（初期値: #000000）
ボタンの枠線の色	ボタンの枠線の色を設定できます。（初期値: #000000）
ボタンの枠線の太さ	ボタンの枠線の太さを 0〜10px の範囲で設定できます。0px にすると枠線なしになります。（初期値: 0px）
ボタンの枠線の丸み	ボタンの角の丸みを 0〜40px の範囲で設定できます。値を大きくすると丸みのあるボタンになります。（初期値: 4px）

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

余白設定

フォーム全体やフィールド間の余白を調整できます。レイアウトのバランスを整えたい場合に便利です。

設定名	説明
タイトル下部の余白	タイトルとフォーム本体の間のスペースを 0〜80px の範囲で設定できます。（初期値: 24px）
説明テキスト下部の余白	説明文とフォーム本体の間のスペースを 0〜80px の範囲で設定できます。（初期値: 24px）
入力フィールド間の余白	各入力フィールド同士の間のスペースを 0〜80px の範囲で設定できます。余白を広くすると項目が見やすくなります。（初期値: 24px）
ラジオ/チェックボックスの選択肢間の余白	ラジオボタンやチェックボックスの選択肢同士の間隔を 0〜80px の範囲で設定できます。（初期値: 8px）
ラベルと入力フィールド間の余白	ラベル（項目名）と入力フィールドの間のスペースを 0〜80px の範囲で設定できます。（初期値: 8px）
フォームの最大幅	フォーム全体の最大幅を 0〜2000px の範囲で設定できます。0px に設定するとセクション幅いっぱいに広がります。ページ幅に対してフォームを中央に配置したい場合に便利です。（初期値: 800px）
ブロック上部の余白	アプリブロックの上側のスペースを 0〜200px の範囲で設定できます。前後のセクションとの間隔を調整する際に使用します。（初期値: 80px）
ブロック下部の余白	アプリブロックの下側のスペースを 0〜200px の範囲で設定できます。（初期値: 80px）
ブロック左右の内側余白	アプリブロックの左右の内側の余白を 0〜200px の範囲で設定できます。（初期値: 0px）

余白設定の設定画面

追加の CSS（カスタム CSS）

テーマカスタマイズ画面の標準設定では実現できない、より高度なデザインカスタマイズを行いたい場合に使用します。CSS の知識がある方向けの設定です。

設定名	説明
追加の CSS	カスタム CSS を自由に記述できます。ブロック全体にスタイルが適用されます。ストア独自のデザイン要件がある場合に便利です。

追加の CSS の設定画面