Please announce here

[Shopify] How to redirect to another page after submitting with Contact Form

Shopify お問い合わせ 完了ページ

Hello there! We are EC Penguin!

This time we will state about contact page. It's kind of like a development memo.

Basic contact screen

For basic contact page, when your customer finishes sending the form, the screen will be like this.

shopify contact page

“Thank you for contacting us. We’ll get back to you as soon as possible.” message will appear. So basically it only shows the text on the screen.

That's not bad. Not bad at all actually. But if we think about the ideal situation, it's better to redirect to what we call "thank you page" after submitting the contact form.

Image is like this. (Merely an image though.)

shopify thank you page example

So this time, when the customer finishes submitting the contact form, we will redirect to thank you page.

STEP1. Make the page to redirect



First make the page from admin Pages.

This time, go to admin→ Pages→ Add page and make page called "contact-complete".

STEP2. Add JavaScript to form tag



Next go to admin theme → actions → edit code, then find contact.liquid file. (The name may differ to the theme you are using).

And add this code inside the form tag.

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

In liquid file it will be just before {% endform %}.

By the way,”/pages/contact-complete” part, you should enter the url that you want to redirect to.

Then, when the customer finishes to submit the form, it will automatically redirected to entered URL.

And now we have managed to customize some part of contact page!

EC Penguin おすすめ本

関連記事

Leave a comment

Please note, comments must be approved before they are published