Shopifyで問い合わせフォーム送信後に別ページにリダイレクトする

Cat WEBサイト構築Tag by cubismer
Shopify

コミュニティで見た質問に関して興味があったので調べたことのメモです。

実現したいこと

  • 問い合わせフォームから送信した後に別のページにリダイレクトする

前提は以下の通りです。

  • 問い合わせページをpage.contactで作成する。ハンドルはcontact。
  • 問い合わせ完了ページ(サンクスページ)を作成する

実現方法1


{% form 'contact', id: formId %}
  {% comment %}このformのループ内の上の方に記載する{% endcommnet %}
  {%- if form.posted_successfully? -%}
     <script>location.href="作成したサンクスページのURL";</script>
  {%-endif -%}
以下省略
{% endform %}

参考URL

実現方法2

送信完了後に問い合わせページのURLにcontact_posted=trueというパラメータがつきます。

これを利用して以下のような方法が考えらえれます。

  • page.contactのみに分岐でJSを表示
  • パラメーターを取得し、文字列のcontact_posted=trueが含まれていればリダイレクト

<head>
{% if request.path contains 'contact' %}
 <script>
   var param = location.search;
   if( param && param.indexOf('contact_posted=true') != -1 ){
     location.href = '作成したサンクスページのURL';
   }
 </script>
{% endif %}
</head>

結び

以下の別記事に記載していますが、目的によっては必ずしもサンクスページをつくってリダイレクトする必要はないかもしれません。

1人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄