Shopify×お問い合わせフォームアプリ G:Form Builder ‑ Contact Form
Shopifyのお問い合わせフォームには、最低限の機能しかついていないため、いろいろな要望にはスマートには対応できません。アプリを使うことでクライアントの要望にも対応することができるようになります。
アプリを入れる前にテーマファイルのバックアップを行いましょう。
アプリを入れるとテーマ内のコードに追記されたり書き換えが発生する可能性があるためです。
Shopifyのお問い合わせフォームの仕様（2021/09/10 現在）
・自動返信メール機能がない
・複数メール宛先設定ができない（お客様のメールアドレスに届く）
Shopifyのストア連絡先メールアドレスとお客様のメールアドレスの違い
今回はShopifyのお問い合わせフォームの仕様ではできない以下の対応をアプリを使って対応しました。
・自動返信メールを設定する（メール本文内容もカスタマイズする）
・複数メール宛先を設定する（お客様のメールアドレス以外に設定する）
Shopifyアプリストアの日本向けアプリ
Shopifyのアプリは海外のものが多いので、使い慣れるまで時間が掛かったり少し癖があったりします。そこで、Shopify公式が日本向けアプリをまとめてくれています。熨斗機能や会員ポイント機能など日本ECに適したアプリがあります。
G:Form Builder ‑ Contact Form
無料で利用できるフォームアプリです。無料で使える内容は以下の通りです。
・フォームを1つだけ作成可能
・項目が無制限に設定可能（項目とはお名前やメールアドレスなど）
・月に40件までの自動返信メール付き
・ファイルのアップロード(2MB)
・データのエクスポート機能あり
・マルチステップフォーム（入力フォーム→確認画面→サンクスページ）
・CSSなどによるカスタマイズ可能
・URLによるフォームの貼り付け
詳しい設定方法は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翻訳より精度が高いです。
アプリの有効化
アプリを有効化するにはテーマにアプリをインストールする必要があります。「統合」という表現でアプリをテーマにインストールすることができます。
大まか手順
①テーマにアプリをインストール［統合］
②個別ページよりお問い合わせフォームページを作成
③作成したお問い合わせフォームページにショートコードを記載
ショートコードは、HTML編集画面にして張り付ける
詳しい手順は以下のGLOBO公式サイトで解説しています。（英語）
ショートコードが一瞬表示される現象
作成したお問い合わせフォームページのHTML編集画面で以下のコードを張り付けるのですが、フォームページを読み込み時に、ショートコードが一瞬表示されることがあります。
{formbuilder:58428}
それを防ぐ方法として以下の様に変更するとショートコードが読み込まれなくなります。
<div class="globo-formbuilder" data-id=58428 ></div>
自動返信メールの本文内容を編集する
自動返信メールの本文が英語になります。本文を英語から日本語にしたい場合は以下の箇所で編集が可能です。
Settings → Mail → Auto Responder
Google翻訳だと
設定 → 郵便 → オートレスポンダー（自動返信のことです）
設定できる項目
・自動返信メールの送信先の選択 どちらに送るか設定可能
①フォームに入力されたメールアドレス
②Shopifyの会員情報に登録されているメールアドレス
・件名
・本文
お問い合わせフォームのメール届き先を編集する
Shopifyのお客様のメールアドレスで設定しているメールアドレス以外に届くように設定したい場合は以下の箇所で編集が可能です。
Settings → Mail → Admin
Google翻訳だと
設定 → 郵便 → 管理者
Eメールの設定エリアでお問い合わせフォームから内容を受け取りたいメールアドレスに変更にするだけです。複数の届き先を設定することも可能です。その場合はメールアドレスとメールアドレスの間にカンマ「,」が必要になります。
設定できる項目
・メールの届き先（複数設定可能）
・件名
・本文