Shopify×お問い合わせフォームアプリ G:Form Builder ‑ Contact Form

Shopifyのお問い合わせフォームには、最低限の機能しかついていないため、いろいろな要望にはスマートには対応できません。アプリを使うことでクライアントの要望にも対応することができるようになります。
アプリを入れる前にテーマファイルのバックアップを行いましょう。
アプリを入れるとテーマ内のコードに追記されたり書き換えが発生する可能性があるためです。

Shopifyのお問い合わせフォームの仕様（2021/09/10 現在）
・自動返信メール機能がない
・複数メール宛先設定ができない（お客様のメールアドレスに届く）
　Shopifyのストア連絡先メールアドレスとお客様のメールアドレスの違い

今回はShopifyのお問い合わせフォームの仕様ではできない以下の対応をアプリを使って対応しました。

・自動返信メールを設定する（メール本文内容もカスタマイズする）
・複数メール宛先を設定する（お客様のメールアドレス以外に設定する）

Shopifyアプリストアの日本向けアプリ

Shopifyのアプリは海外のものが多いので、使い慣れるまで時間が掛かったり少し癖があったりします。そこで、Shopify公式が日本向けアプリをまとめてくれています。熨斗機能や会員ポイント機能など日本ECに適したアプリがあります。

Shopify アプリストアの日本向けの便利なアプリ

G:Form Builder ‑ Contact Form

G:Form Builder ‑ Contact Form| Shopify アプリストア

無料で利用できるフォームアプリです。無料で使える内容は以下の通りです。

・フォームを1つだけ作成可能
・項目が無制限に設定可能（項目とはお名前やメールアドレスなど）
・月に40件までの自動返信メール付き
・ファイルのアップロード(2MB)
・データのエクスポート機能あり
・マルチステップフォーム（入力フォーム→確認画面→サンクスページ）
・CSSなどによるカスタマイズ可能
・URLによるフォームの貼り付け

詳しい設定方法はAGATA CODEさんの記事が参考になります！

[画像あり]Form Builderを使ってお問い合わせフォームを作成しよう - AGATA CODE

エラーメッセージ　勝手に日本語化
・Please fill in field
　必須項目です。
・Invalid
　書式に誤りがあります。　
・Invalid name
　名前の書式に誤りがあります。名前を正しく入力しなおしてください。
・Invalid email
　メールアドレスの書式に誤りがあります。メールアドレスを
　正しく入力しなおしてください。
・Invalid URL
　URLの書式に誤りがあります。URLを正しく入力しなおしてください。
・Invalid phone
　電話番号の書式に誤りがあります。電話番号を正しく入力し
　なおしてください。
・Invalid number
　無効な数値です。異なる数値で再度お試しください。
・Invalid password
　無効なパスワードです。正しいパスワードを入力しなおしてください。
・Confirmed password doesn't match
　パスワードが一致しません。正しいパスワードを入力しなおして
　ください。
・Customer already exists
　お客様がすでに存在しています。
・File size limit exceeded
　アップロードできるファイルサイズを超えています。
・File extension not allowed
　このファイル形式はアップロードできません。
・Please, enter the captcha
　リキャプチャを入力してください。
・Something went wrong, please try again
　何か問題が発生しました、申し訳ございませんが、
　もう一度お試しください。

正確な翻訳はGoogle翻訳もいいですが、DeepL翻訳がおすすめです。
翻訳は人工知能を使ってるので、Google翻訳より精度が高いです。

DeepL翻訳：高精度な翻訳ツール

アプリの有効化

アプリを有効化するにはテーマにアプリをインストールする必要があります。「統合」という表現でアプリをテーマにインストールすることができます。

大まか手順
①テーマにアプリをインストール［統合］
②個別ページよりお問い合わせフォームページを作成
③作成したお問い合わせフォームページにショートコードを記載
　ショートコードは、HTML編集画面にして張り付ける

詳しい手順は以下のGLOBO公式サイトで解説しています。（英語）

Display a form on Shopify front store | Globo Software Solution

ショートコードが一瞬表示される現象

作成したお問い合わせフォームページのHTML編集画面で以下のコードを張り付けるのですが、フォームページを読み込み時に、ショートコードが一瞬表示されることがあります。

{formbuilder:58428}

それを防ぐ方法として以下の様に変更するとショートコードが読み込まれなくなります。

<div class="globo-formbuilder" data-id=58428 ></div>

Display a form on Shopify front store | Globo Software Solution

自動返信メールの本文内容を編集する

自動返信メールの本文が英語になります。本文を英語から日本語にしたい場合は以下の箇所で編集が可能です。

Settings　→　Mail　→　Auto Responder

Google翻訳だと
設定　→　郵便　→　オートレスポンダー（自動返信のことです）

設定できる項目
・自動返信メールの送信先の選択　どちらに送るか設定可能
　①フォームに入力されたメールアドレス
　②Shopifyの会員情報に登録されているメールアドレス
・件名
・本文

お問い合わせフォームのメール届き先を編集する

Shopifyのお客様のメールアドレスで設定しているメールアドレス以外に届くように設定したい場合は以下の箇所で編集が可能です。

Settings　→　Mail　→　Admin

Google翻訳だと
設定　→　郵便　→　管理者

Eメールの設定エリアでお問い合わせフォームから内容を受け取りたいメールアドレスに変更にするだけです。複数の届き先を設定することも可能です。その場合はメールアドレスとメールアドレスの間にカンマ「,」が必要になります。

設定できる項目
・メールの届き先（複数設定可能）
・件名
・本文