[Shopify] Contact Formでsubmitした後に他ページにリダイレクトする方法

こんにちは、ECペンギンです。

今回は、ShopifyのCONTACT（コンタクト）ページに関する開発メモです。

一般的なCONTACT画面

普通のDefaultのContactページは問い合わせ完了したら、下記のような画面になります。

“Thank you for contacting us. We’ll get back to you as soon as possible.”のように、”お問い合わせ完了しました。担当者から折り返しご連絡いたしますので今しばらくお待ちください。”というメッセージが同じページ上に表示されます。

それも悪くはないんです。。。悪くはないんですが、やはり欲を言えば『お問い合わせありがとうございました』という違うページにリダイレクトした方がサイトの設計的にしっかりして見えますよね。

イメージはこんな感じ。（あくまでもイメージ。）

なので、今回は顧客からお問い合わせが完了したら、Thank you pageにリダイレクトする方法を紹介します。

STEP1. リダイレクトするページを作成する

まずは、pageから好きなページを作成します。

今回は、ページ→ページを追加からcontact-completeというページを作成します。

STEP2. CONTACTのformタグにJavaScriptを追加する

次にテーマ→アクション→コードを編集する から、コンタクトのliquid拡張子ファイル（contact.liquidかな）を探して開きます。

そのformタグの中に下記コードを追加します。

  
{% if form.posted_successfully? %} 
 
 <script> 
 window.location = "/pages/contact-complete"; 
 </script> 

{% endif %}

liquidファイルだと {% endform %}の直前になります。

ちなみに”/pages/contact-complete”の部分はリダイレクトしたいURLを入れてください。

すると、お問い合わせが完了した際に、指定したURLにリダイレクトしてくれます。

これでShopifyを使用したECサイトでのCONTACTページをちょっとカスタマイズすることができました。