はじめに

ホームページやECサイトに欠かせない、問い合わせフォーム。
エンドユーザーとの接点機会として大きく役立つ一方、運用の中で十分に活用できていないケースも多く見られます。

例えば、フォーム送信後の挙動。
よくある問い合わせフォームの挙動としては、フォーム送信後に「お問い合わせありがとうございます。」といった所謂サンクスページへ遷移する動きがあります。
しかしShopifyの標準的な問い合わせフォームでは、送信後に成功メッセージが表示されるだけで、画面遷移などはありません。
簡易的なメッセージのみでは、エンドユーザーが正しく送信できたのか不安に感じてしまう可能性も考えられます。

そこで今回は、フォーム送信後に画像のようなサンクスページへリダイレクトさせる方法をご紹介します。

この機能を実装することで、以下のメリットが期待できます。

マーチャントにとってのメリット：

• お客様の不安解消による信頼性の向上
• サンクスページで追加情報や関連商品を案内し、売上機会を創出

エンドユーザーにとってのメリット：

• 送信完了が明確に分かり、安心感を得られる
• 次のアクションが分かりやすくなり、ユーザビリティが向上
• よりプロフェッショナルなブランド体験が可能に

たった2ステップで完結できる実装方法となっていますので、ぜひ最後までご覧ください！

実装方法

1. リダイレクト先のサンクスページを作成

問い合わせフォームが正常に送信された際にリダイレクトするサンクスページを予め作成しておきます。
その際、URLのハンドルを「/contact-thanks」などと設定してください。

2. フォーム送信成功時の挙動を変更

「contact-form.liquid」の33行目あたりから記載されている送信成功時のコードを、下記の通り変更します。
元のコードは削除せず、コメントアウトすることをお勧めします。

{%- if form.posted_successfully? -%}
    <h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>
        {{- 'icon-success.svg' | inline_asset_content -}}
        {{ 'templates.contact.form.post_success' | t }}
    </h2>
{%- elsif form.errors -%}
...

↓ 下記に変更

{%- if form.posted_successfully? -%}
    {%- comment -%}
    <h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>
        {{- 'icon-success.svg' | inline_asset_content -}}
        {{ 'templates.contact.form.post_success' | t }}
    </h2>
    {%- endcomment -%}
    <script>
        window.location = "/pages/contact-thanks"; 
    </script>
{%- elsif form.errors -%}
...

※サンクスページのURLハンドルを「contact-thanks」以外にした場合は、「window.location = "/pages/contact-thanks";」部分を設定したハンドルに変更してください。

以上の手順により、フォームが正常に送信されると事前に作成したサンクスページへとリダイレクトされるようになります。

まとめ

いかがでしたか？
今回ご紹介した内容は、わずか数行のコード変更でユーザー体験を大幅に改善できる、非常にコストパフォーマンスの高いカスタマイズです。

このカスタマイズにより、エンドユーザーは送信完了を明確に認識でき、不安やストレスを感じることなく安心してサイトを利用できるようになります。
また、マーチャント側にとっても、サンクスページを活用した追加の情報提供やクロスセル提案により、売上向上やブランディング強化に繋がる重要な施策となるでしょう。

ぜひこの機会にリダイレクト機能を実装し、より良いカスタマーエクスペリエンスの提供にお役立てください。
実装でご不明な点がございましたら、どうぞお気軽にお問い合わせください！