Newsletter Signup Form Redirect on Successful Submission

Technical Q&A

Topic summary

A Shopify developer is struggling to redirect users after successful newsletter signup form submission. The standard Liquid {% form 'customer' %} submits correctly and captures data, but redirects to the default success page instead of a custom destination.

Attempted Solutions (unsuccessful):

  • Wrapping submit button in anchor tags
  • Using custom form action parameters (breaks form submission)
  • JavaScript setTimeout with redirect (same result)

Working Solutions Provided:

  1. Hidden input method: Add <input type="hidden" name="return_to" value="/"> to the form, where the value specifies the redirect path (supports both relative and absolute paths)

  2. JavaScript approach: Programmatically capture the submit button click event and modify the hidden input’s value before submission:

var _root = this;
this.querySelector("#submit-btn").addEventListener("click", async (e) => {
  document.querySelector("#redirectInput").value = "<New-Path>";
});

Both methods successfully override Shopify’s default post-submission behavior. The hidden return_to parameter appears to be the simpler, more direct solution.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hi:

I have been doing the development for my own Shopify powered site and am pretty familiar with Liquid, HTML, CSS, JS etc but I’m having trouble building out functionality for my store’s Newsletter Signup Landing Page. The customer form works just fine (see code below), but I’ve not been able to add code to forward to our homepage (or another success/landing page). I’ve tried wrapping Submit input tag inside an anchor tag, I’ve tried writing out what the Form Liquid function call does in html by using a form tag with the action parameter set to a url (but this messes with the form submission). Any ideas of how to properly do this? I think something might be messing up when the CAPTCHA form comes in between.

{% form 'customer' %}

Email
First name
Last name
Phone number
{% endform %}

1 Like
2

Hi @mrsaxman29 ,

You can try to enclose your submit button with an href tag. Change the your_link_here to the link you want to redirect


{% form 'customer' %}

<table>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td colspan="2">

</td>

</tr>

</table>
{% endform %}
3

Hey - thanks for the quick reply. I tried what you suggested (wrapping the input in href tag = “https://www.shophitherlane.com/” our homepage url) and it didn’t work. I feel like I had already tried this approach as well. Upon submit it just takes me to the normal success page (which is the same page) - this is the url in fact (https://www.shophitherlane.com/pages/landing-page?customer_posted=true#contact_form)) and displays the normal “Thanks for subscribing” message in the footer. The form still submits correctly with the form’s user inputted data appearing in the customer section at least.

Any other ideas?

4

Hi @mrsaxman29 ,

Try the following codes then. Replace the code provided with the code below


{% form 'customer' %}

<table>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td colspan="2">

</td>

</tr>

</table>

{% endform %}
5

Nice idea. Tried it, but it didn’t work either - same exact result as previously. Maybe if I set the delay time in milliseconds in the function to a higher value?

6

This is an old message, but it may be helpful for more people. I archived a redirect in two different ways:

  1. By adding a hidden input to the form with the “return_to” name and setting it its value:
Note that "/" would take it to the homepage. Also note, you can use relative or absolutes paths.

2, By capturing the submit button event and changing the input programmatically with JS:
var _root = this;

this.querySelector(“#submit-bt”).addEventListener(“click”, async (e) => {

_root.querySelector(“#redirectInput”).value = “”

})