サムネイル

【Shopify マスターへの道】#11 コンタクトフォームを作成しよう

【Shopify マスターへの道】#11 コンタクトフォームを作成しよう

  1. ストア構築の準備をしよう
  2. 商品を登録しよう
  3. コレクションを登録しよう
  4. ブログ記事を作成しよう
  5. サイトのデザインを選ぼう
  6. テーマを編集しよう(セクション編)
  7. テーマを編集しよう(テーマ設定編)
  8. トップページ以外を編集しよう
  9. サイトのフォントを編集しよう
  10. アカウントページを作成しよう
  11. コンタクトフォーム を作成しよう(← 今回はここ)
  12. About ページを作成しよう
  13. 規約を入力しよう
  14. メニューの編集をしよう
  15. 送料を設定しよう
  16. 一般設定を編集しよう
  17. 各種設定を編集しよう
  18. 決済テストを行おう
  19. ストアの所有権を移行しよう

今回は、Shopify のデフォルト機能でコンタクトフォームを実装します。コンタクトフォームは、ユーザーからの質問や意見を聞くことができる大切なページになるので、特別な理由がない限りは実装することになります。

では頑張っていきましょう!

今回の目標

  • コンタクトフォームを作成する
  • コンタクトフォームに関する設定を行う

デモサイトを構築する際に使用する商品画像や CSV ファイルのダウンロードをしてない方はこちらからダウロードしてください。

【Shopify マスターへの道】商品画像・CSV ファイルのダウンロード

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

コンタクトフォームとは、いわゆるお問い合わせページのことです。Shopify では、このお問合せページを簡単に実装する機能が、デフォルトで備わっています。

今回は、このデフォルト機能で以下の画像のようなコンタクトフォームを作っていきます。

お問い合せページを作る

コンタクトフォームは、Shopify のページ機能から作ることができます。管理画面へログインし、「オンラインストア > ページ」へと進んでください。

この「ページ」設定では、ホームページ・ブログ記事以外のページを作成することができます。ページ機能の一部として、コンタクトフォームの実装が可能です。

それでは、新しいページを作成します。「ページを追加」をクリックしてください。

テンプレートの設定

今回で、ここが最も重要な設定です。「テンプレート」の項目でページのテンプレートを選択します。

テンプレートとは、ページの種類のことでデフォルトでは「page」になっています。(これは、liquid ファイルのテンプレートの名前を参照しています。)

画像の赤枠をクリックすると、ドロップダウンメニューが表示されテンプレートを選択することができます。

このページのテンプレートの種類は、テーマによって異なります。Brooklyn では、

  • page
  • page.contact
  • page.full-width

の 3 種類が用意されています。
「page」は、ブログページのと同じようなページ幅が狭めのページです。
「page.contact」は、今回実装するお問い合わせフォームのテンプレートです。
「page.full-width」は、「page」よりも幅が広いページのテンプレートです。

今回は、「page.contact」を選択します。「page.contact」を選択すると、名前・E メール・電話番号・メッセージを受け取ることができるコンタクトフォームがページ上に作成されます。

この設定を行うだけで、Shopify ではコンタクトフォームを実装することができます。簡単ですよね。

Title の設定

「Title」には、そのページのタイトルを入力します。タイトルは、サイト内でそのページのトップに表示されます。検索結果に表示するタイトルは、別に設定することができるので、ここではわかりやすく簡潔なタイトルを心がけましょう。

今回は、「お問い合わせ」としておきましょう。

コンテンツの設定

「コンテンツ」を設定すると、コンタクトフォームの上に入力した内容が表示されます。
今回は、「お問い合わせ内容をご入力ください。」と入力しておきましょう。

コンテンツの部分には、お問い合わせを送る際の注意点や、返信にかかる日数などを記入しておくと良いでしょう。

公開/非公開の設定

「公開/非公開」では、ページの公開状態を設定することができます。「公開」にチェックを入れると、保存と同時にページがストアに反映されます。「非公開」にチェックを入れておくと、ページはストアに公開されずアクセスすることができません。
今回は、「公開」にチェックを入れておきます。

また、公開日を設定しておくことで、ページの表示を予約することができます。「公開日時を設定する」をクリックすると、公開日の設定項目が表示されるので、公開したい日時を設定します。

日付をクリアするで、公開日設定を無効にすることができます。

検索結果のプレビュー設定

「検索結果のプレビュー」の項目では、SEO 設定を行うことができます。商品やコレクション登録・ブログ記事の作成時に解説した方法で、設定することができます。

「ウェブサイトの SEO を編集する」をクリックして、以下のように設定しましょう。

ここまで設定が終わったら、「保存する」をクリックします。

では、コンタクトフォームのページがストアに反映されているか確認しましょう。

「オンラインストア > テーマ > 現在のテーマ > カスタマイズ」へ進み、ストアのカスタマイズ画面を開きます。

カスタマイズ画面に入ったら、「ホームページ」をクリックし、表示されるドロップダウンメニューから「お問い合わせ」を選択します。

このように、コンタクトフォームが表示されていれば OK です。

もし、表示されていなければページの設定に戻り、ちゃんと保存されているか確認してください。

以上で、コンタクトフォームのページの作成は完了です。

コンタクトフォーム関連する基礎知識

コンタクトフォームを実装した際に、設定しておきたい設定項目や知っておきたい機能がいくつかあるので紹介しておきます。

以下の設定を行っていきます。

  • 受信元メールアドレスの設定
  • スパムメール対策の設定
  • reCAPTCHA 機能の設定

受信元メールアドレスを設定する

コンタクトフォームから送られてくるメールを受信するメールアドレスを設定します。ストアの管理画面で「設定 > 一般設定」へ進んでください。

一般設定では、ストアの詳細やストアの住所を設定することができます。受信元のメールアドレスは「ストアの詳細」で設定することができます。

「ストアの連絡先メールアドレス」に設定しているメールアドレスが受信元になります。コンタクトフォームから送信された情報は、Shopify を経由してストアに送信されます。そのため、「ストア連絡先メールアドレス」に連絡を受け取りたいメールアドレスを設定します。

もう一つ「送信もとのメールアドレス」という項目があります。こちらは顧客にストアからメール送信した際に使われるメールアドレスになります。

スパムメール対策について

Shopify では、スパム対策が標準で備わっています。そのため、特別な設定は必要ありません。安心な設定になっています。

Shopify にスパムと判定されたメールは、メールの冒頭に「スパム」とついています。メールサービスの設定で、フィルターを作成することで、メールを仕分けることができます。

注意しなけれがいけないことは、スパムと冒頭について送られてきたけど、実は大切なメールだったということです。定期的にスパムも確認するといいかもしれません。

reCAPTCHA の設定

reCAPTCHA というものを聞いたことあるでしょうか?皆さんも一度は体験したことのある機能だと思います。reCAPTCHA とは、これです。

この機能のことを reCAPTCHA と呼びます。reCAPTCHA は、悪質なスパムメールや bot によるメール送信をブロックしてくれます。

Shopify では、この reCAPTCHA がデフォルトで実装されています。そのため、悪質なスパムメールからストアを守ることができます。

基本的には、設定を無効にする必要はありませんが、設定方法を紹介しておきます。

ストアの管理画面で「オンラインストア > 各種設定」へ進みます。「スパム保護」という項目があり、そこで reCAPTCHA の有効/無効設定を切り替えることができます。

「お問い合せフォームで Google reCAPTCHA を有効にする」のチェックを外すと無効にすることができます。

基本的には、スパム対策をしておいた方がいいので、そのままで大丈夫です。

同じところで、チェックアウト時に reCAPTCHA を有効にするかどうかも設定することができます。

以上でコンタクトフォームの設定は終了です。

まとめ

今回は、コンタクトフォームの作成を行いました。Shopify では、便利なお問い合わせページを簡単に実装することができます。顧客からの質問や要望を受け取ることができる機能なので、是非導入しておきましょう!

今回の振り返り

  • コンタクトフォームを作成できた
  • コンタクトフォームの設定を理解できた

次回は、同じページ機能を使って About ページを作成していきます。

最後まで読んでいただきありがとうございました。

おすすめ Shopify アプリ

シンプル名入れ|お手軽名前入りギフトオプションのアイコン

シンプル名入れ|お手軽名前入りギフトオプション

シンプルな日本製の名入れオプションアプリ。商品毎に名入れオプションを追加できます。

シンプル在庫数表示|お手軽残りわずか表示のアイコン

シンプル在庫数表示|お手軽残りわずか表示

シンプルな商品の残りわずか表示アプリ。ストアに商品の残りわずか表示を簡単に導入できます。

シンプルギフトラッピング|お手軽ギフト包装アプリのアイコン

シンプルギフトラッピング|お手軽ギフト包装アプリ

シンプルな日本製のギフトラッピングアプリ。カートページに簡単にギフト包装オプションを追加できます。

シンプル購入制限|お手軽注文制限について徹底解説のアイコン

シンプル購入制限|お手軽注文制限について徹底解説

シンプルな日本製の購入数制限アプリ。商品ごとに数量の規制を行えます。

シンプルランキング表示|お手軽ベストセラーのアイコン

シンプルランキング表示|お手軽ベストセラー

購入促進!コレクションにランキングラベルを表示してストアの人気商品をアピール

シンプル顧客タグごとの限定販売|お手軽ロイヤリティのアイコン

シンプル顧客タグごとの限定販売|お手軽ロイヤリティ

日本製の顧客タグごとの購入制限アプリ。特定のタグを持つ顧客への限定販売を簡単に実現できます。

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン

シンプルロゴ一覧|お手軽ロゴリスト表示

シンプルなロゴリストアプリ。ストアにロゴリストを簡単に導入できます。

シンプル余白調整|お手軽レイアウトのアイコン

シンプル余白調整|お手軽レイアウト

シンプルな日本製の余白調整アプリ。余白を挿入することでページデザインの調整が簡単にできます。

シンプルのし(熨斗)アプリのアイコン

シンプルのし(熨斗)アプリ

シンプルな日本製のしアプリ。のし選択機能を簡単に実現できます。

シンプル画像バナー|お手軽広告バナーアプリのアイコン

シンプル画像バナー|お手軽広告バナーアプリ

シンプルな画像バナーアプリ。ストアに画像バナーを簡単に表示できます。

シンプル Q&A|どこでも FAQのアイコン

シンプル Q&A|どこでも FAQ

シンプルな Q&A アプリ。ストアに FAQ を簡単に導入できます。

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン

シンプルモバイルアプリバナー|スマホアプリに誘導

シンプルなモバイルアプリバナー。ストアにモバイルアプリバナーを簡単に導入できます。

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン

シンプル流れる告知|流れるお知らせ挿入アプリ

シンプルな流れる告知アプリ。ストアに流れる告知を簡単に導入できます。

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン

シンプル売り切れ非表示|在庫切れ商品の表示変更

売り切れ商品を非表示にすることができる日本製アプリ。売り切れになった商品を、自動的に非表示(下書き状態)にすることができます。

シンプルレビュー|お手軽口コミのアイコン

シンプルレビュー|お手軽口コミ

シンプルな日本製のレビューアプリ。レビュー機能を簡単に実現できます。

シンプル会員限定販売|お手軽アカウント必須販売のアイコン

シンプル会員限定販売|お手軽アカウント必須販売

シンプルな日本製の会員限定販売アプリ。商品毎に、ログインしていない顧客の購入制限を行えます。

シンプル会員ランク|お手軽顧客タグ付けのアイコン

シンプル会員ランク|お手軽顧客タグ付け

日本製の会員ランク管理アプリ。条件を達成した顧客に自動でタグを追加し、顧客管理を手助けします。

シンプル Wishlist|お手軽お気に入りのアイコン

シンプル Wishlist|お手軽お気に入り

商品数・お気に入り数の上限なしで使えるお手軽お気に入りアプリ。簡単にお気に入り機能を実現できます。

シンプル Coming Soon|商品ページ発売予告アプリのアイコン

シンプル Coming Soon|商品ページ発売予告アプリ

シンプルな日本製の Coming Soonアプリ。商品毎に発売予告を行えます。

シンプルセット販売|お手軽クロスセルのアイコン

シンプルセット販売|お手軽クロスセル

シンプルな日本製のセット販売アプリ。セット販売でのクロスセルを簡単に実現できます。

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン

シンプル予約販売|受注販売や在庫切れ商品販売で使える

日本製の予約販売アプリ。予約販売や受注販売、在庫切れ商品販売を簡単に実現できます。

シンプル販売期間設定|商品ごとに期間限定販売のアイコン

シンプル販売期間設定|商品ごとに期間限定販売

シンプルな日本製の期間限定販売アプリ。商品ごとに販売期間を設定することができます。

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン

シンプルVIPプログラム|お手軽VIP会員限定販売

日本製の VIP 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリ

シンプルな日本製の定額ポイントアプリ。顧客はポイントをそのまま利用することができます。

おすすめ記事