【shopify】お問い合わせフォームの小技

shopifyのお問い合わせフォームってアプリを使う方法も、もちろんあるんですが、liquidとHTMLぐらいの組み合わせでサクッと作れる方法もあります。

大抵のテーマは最初から１つぐらい、専用テンプレートを持っていたりするので、通常はそちらを利用します！

今回は通常使用ではなくて、少しカスタマイズする方法や、どのページのコンタクトフォームから送信されてきたのか？がわかるような仕込みの仕方を解説しようと思います！

この記事でわかるのは

・そもそものformの仕組（書き方）
・お問い合わせフォーム送信後に「サンクスページ」に遷移させる方法
・どのコンタクトフォームから送られてきたかコッソリ把握する方法
　（ついでに特定の文字を送信したりも出来る）

なんて事になりますので、気になる方はどうぞです

普通の仕様ってどんなの？

まずは、shopifyが通常持っているコンタクトフォームの仕様について確認しましょう。

通常持ってるフォームは

・氏名
・メールアドレス
・本文

最低これぐらいの書く欄が作られている物が多いです。またここからが結構お悩みポイントなんですが

・送信完了ページには遷移しない
・送信内容の確認ページは挟めない
・送信完了メールも来ない

のでお客さん的には「ペロッと出てくる」

「お問い合わせ有難うございました！！」

的な１文だけが送信完了の証になります。日本人以外の方はこれで充分なんでしょうね。そもそも問い合わせて連絡なくても「しゃーない。また送るか」ぐらいのマインドなんだと思います（そんなサービスせんですからね）

ただここはジャパンじゃないですけ？色々細かいチェックしたいじゃん！って思いますよね。

結論から言うと通常の仕様では、確認ページは挟めません！これはアプリでも標準アプリだと見た事がありませんので、外部サーバー経由するようなフォーム使わない限りは実現できません！つまり「100%無理じゃないけど、そこにどれだけのコストがかけられるか？」と言うのが争点になります。

では確認メールの送信は可能なのか？

これに関してはアプリで対応可能なので、確認メールを送信したい場合には「Form Builder」などのアプリを使う事になりますが、無料版だとやれる事やれない事が分かれるので、これを使う時は有料を使うつもりの場合が多いです。（実際にわりと導入します）

送信完了ページ（サンクスページ）への遷移は可能なので、ここは後述しますね！

ざっと書くとこんな感じで、要するに基本仕様では

普通にメッセージが送れて、「送ったよ」ってブラウザ上で簡単に教えてくれる

と言う仕様だと思って下さい。

formの仕組

shopifyのフォームの仕組みは通常のHTMLで作る<form>タグ的な作り方と、そう大きくは変わりません。通常のformタグで作るようなformの場合だいたい下記の様なコードになるはずです。

<form method="POST" action="sample.php">
  <p>お名前：<input type="text" name="NAME"></p>
  <p>メールアドレス：<input type="text" name="email"></p>
  <p><input type="submit" value="送信する"></p>

</form>

methodとそれを送信する先を指定してあげる感じですが、これをshopifyの場合はこう書きます。

{% form 'contact' %}
  <p>お名前：<input type="text" name="contact[name]"></p>
  <p>メールアドレス：<input type="text" name="contact[email]"></p>
  <p><input type="submit" value="送信する"></p>
{% endform %}

まぁシンプルですよね。上下がliquidで書かれて、inputタグのname属性が　contact[]　と言う形状になっているのが普通と違うところぐらいですかね！これでも十分送信は出来るのですが、これだと送信が完了したのか完了してないのかのテロップすら出ませんので、もう少し工夫します。

{% form 'contact' %}
  {%- if form.posted_successfully? -%}
    <h3>やったぜ！送信完了したぜ！！</h3>
  {%- elsif form.errors -%}
    <p>送信失敗・・・マジうんこだな。</p>
  {%- endif -%}
  <p>お名前：<input type="text" name="contact[name]"></p>
  <p>メールアドレス：<input type="text" name="contact[email]"></p>
  <p><input type="submit" value="送信する"></p>
{% endform %}

正解としてはこうやって書きます。

要するに送信成功したら
{%- if form.posted_successfully? -%}
と言う意味のコードの下に書いた文字が送信完了するとフォームの上に出力されるような仕組みです。

で下の方の
{%- elsif form.errors -%}
コッチは送信失敗した時に出るメッセージです。これで一応送信が完了したのか？失敗したのか？って言うのはお客さんは確認が出来ます。

実際にこのシンプルなコードで送信するとこんな完了メッセージになります。

inputの要素は沢山増やしても問題ないです！需要なのはname属性につける contact[] の部分です。[]で囲まれた中身は何でもOKで、別に日本語を叩き込んでも大丈夫です。

実際に１行

<p>うんこ：<input type="text" name="contact[うんこ]"></p>

このコードを追記して送信した後に届いたメールのキャプチャがこれです。

最初のCountryCodeは毎度勝手に付いてきちゃう、どこの国から送信されてきたかですがわかります。むしろ消し方知りません！www　その後の所を見ると　”contact[うんこ]”　はちゃんと「うんこ」の項目に入っています。emailに関しては勝手にメールに翻訳してくれますね。

こんな風に好きな項目を増やすことが出来るので、普通のフォームはこれで挑戦してみて下さい！

form送信後にサンクスページに遷移させる方法

さて、次の議題はペロッとメッセージ出てくるだけじゃ心もとないから、せめてサンクスページへの遷移ぐらい出来ないか？って言う希望に対して答えていきます！

実は意外と簡単で、覚えるコードはほぼコピペでOKです。

<script>
  window.location = "/pages/contact-thanks";
</script>

これだけ。【/pages/contact-thanks】の部分はあらかじめ用意しておいた固定ページのURLです。後はこれを挿入する位置が問題かと思いますが

{% form 'contact' %}
  {%- if form.posted_successfully? -%}
    <h3>やったぜ！送信完了したぜ！！</h3>
    <script>
      window.location = "/pages/contact-thanks";
    </script>
  {%- elsif form.errors -%}
    <p>送信失敗・・・マジうんこだな。</p>
  {%- endif -%}
  <p>お名前：<input type="text" name="contact[name]"></p>
  <p>メールアドレス：<input type="text" name="contact[email]"></p>
  <p>うんこ：<input type="text" name="contact[うんこ]"></p>
  <p><input type="submit" value="送信する"></p>
{% endform %}

上記の赤文字部分ですね。

どういう事かと言うと、要するに送信完了したらHTMLのタグを読み込んでくれる機能があらかじめ備わっているので、そこにJavaScriptを忍ばせておくんです。んでもって、そのスクリプトはただ1つ

YOU「サンクスページに移動しちゃっいなよ」

とだけ書いてあるわけです。上の行の【 <h3>やったぜ！送信完了したぜ！！</h3> 】は別に消してもいいんですけど、わかりやすいように取っときました。たったこれだけの事で、お問い合わせ完了後に「送信完了ページ」に遷移する事が出来ます。

試しに遷移先用ページのサンプル用にとりあえずこんなの作って

実際に遷移するか試してみましょう！そうすると無事遷移するもんです。

ホレ出来た！こんなもんですよ。実際ここの要望はめちゃくちゃ多いので実装方法を覚えてしまいましょう＾＾

どのformから送られてきたかコッソリ仕込む + α

さぁ、後は何となく凄そうだけど「こいつ何言ってんだ？」って言う機能ですね。

要するにですね、formって「お問い合わせページ」だけの物でしょうか？いえいえ、違いますよね。実際にはコンタクトフォーム自体をLPに置いておいたり、商品ページに置いておいたり、はたまたカテゴリ（コレクション）ページに置いておいたりと・・色々な場所に設置するかもしれません。そうなるとですね、どのフォームから送られてきたのか把握できた方が、質問などの答えも導きやすい。強いては、お客さんの困り毎に気が付きやすい訳です！つまり

・どのLPから送られてきたのか？
・どの商品について聞きたいのか？
・カテゴリの興味はどこだ？

なんて物がフォーム送信時点でメール上で視覚的に確認出来れば業務効率も上がるってもんです。

これに便利なのが【type=”hidden”】属性のinputタグです。お客さんの見た目には響かないのでこっそりデータを送りたい場合の定番品ですね。

こいつをshopifyはせっかくLiquidが使えるので、Liquidと組み合わせてあげればいい訳ですよ！例えばですね

{% form 'contact' %}
  {%- if form.posted_successfully? -%}
    <h3>やったぜ！送信完了したぜ！！</h3>
    <script>
      window.location = "/pages/contact-thanks";
    </script>
  {%- elsif form.errors -%}
    <p>送信失敗・・・マジうんこだな。</p>
  {%- endif -%}
  <p>お名前：<input type="text" name="contact[name]"></p>
  <p>メールアドレス：<input type="text" name="contact[email]"></p>
  <p>うんこ：<input type="text" name="contact[うんこ]"></p>
　<input type="hidden" name="contact[送信元ページ]" value="{{ page.title }}のフォームより">
  <p><input type="submit" value="送信する"></p>
{% endform %}

今回は固定ページに設置して実験するので{{ page.title }}をvalue値に入るようにセットしてみました。これで届くメールの「送信元ページ」の値として「{{ page.title }}のフォームより」と言う値が返って来る事が期待できますので実際にこれで送信します。実際に届いたメールがこれ

実験としては完璧ですね！もう完璧の完璧！！４０歳のおじさんが作ったとは思えない！！！はぁはぁはぁあああああぁぁっぁぁあっぁ(；´Д｀)

今回は固定ページに設置したんで【{{ page.title }}】と言うリキッドを参照したわけですが、例えばこれを商品ページに設置した場合は

{{ product.title }}
{{ product.id }}
{{ product.sku }}

なんかにもアクセスしてあげればいいんです！そしたら商品のIDにSKUにももたどり着けるわけですよ。そしたらどの商品ページだったのか一目瞭然ですし、IDまで取得できてればデータベース引っ張ってくるのも簡単です！

もちろんしっかりマーケティング的なデータを取りたくてアナリティクスでデータとってもいいでしょう！けど、届いた瞬間メール見てわかる方が人間の業務は楽ですからそんな時に使える機能です。

まとめ

結局の所shopifyの標準フォーム機能で出来るのは

・メッセージの送信
・送信完了ページへの遷移
・送信フォームのデータをコッソリ取得

逆に出来ないのは

・確認ページを挟む
・確認メールを送る

上記２つともアプリで解決する方法はありますし、思いっきりJavaScriptゴリゴリに組んで攻略する方法もあるっちゃあります。いずれにしてもメールの送信にはサーバーが必要になるので、その点で既に何かしら外部サーバーを頼る事になるので今回はそれは考えずに、とりあえずあくまでもshopify内で、ゴリゴリにJavaScript組まなくて済む範囲での対応策として、shopifyの標準機能内で出来る事って言うのはこんな事だよ！

と言うのがわかれば今回の記事はもう十分OKです！これ以上の事は基本的にはアプリに任せるのがい一番ですよ！（問い合わせ履歴なんかも管理できるし）