Newsletter Signup Form Redirect on Successful Submission

[mrsaxman29]

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. 

<p>{% form 'customer' %}
<input id="contact_tags" name="contact[tags]" type="hidden" value="prospect,newsletter" />
<table style="padding:1px">
<tbody>
<tr>
<td style="padding:2em"></td>
<td><label for="contact-email">Email </label><input style="margin-left:65px;" id="contact_email" name="contact[email]" type="text" /></td>
</tr>
<tr>
<td style="padding:2em"></td>
<td><label for="first-name">First name</label>
<input style="margin-left:32px;" id="first-name" type="text" name="contact[first_name]" /></td>
</tr>
<tr>
<td style="padding:2em"></td>
<td><label for="last-name">Last name</label>
<input style="margin-left:35px;" id="last-name" type="text" name="contact[last_name]" /></td>
</tr>
<tr>
<td style="padding:2em"></td>
<td><label for="phone">Phone number</label>
<input style="margin-left:4px;" id="phone" type="tel" name="contact[note]" /></td>
</tr>
<tr>
<td colspan="2"><input style="margin:10px; padding-left:40px; padding-right: 40px; margin-left:200px" class="submit" type="submit" /></td>
</tr>
</tbody>
</table>
{% endform %}</p>

[made4Uo]

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

<p>{% form 'customer' %}
<input id="contact_tags" name="contact[tags]" type="hidden" value="prospect,newsletter" />
<table style="padding:1px">
<tbody>
<tr>
<td style="padding:2em"></td>
<td><label for="contact-email">Email </label><input style="margin-left:65px;" id="contact_email" name="contact[email]" type="text" /></td>
</tr>
<tr>
<td style="padding:2em"></td>
<td><label for="first-name">First name</label>
<input style="margin-left:32px;" id="first-name" type="text" name="contact[first_name]" /></td>
</tr>
<tr>
<td style="padding:2em"></td>
<td><label for="last-name">Last name</label>
<input style="margin-left:35px;" id="last-name" type="text" name="contact[last_name]" /></td>
</tr>
<tr>
<td style="padding:2em"></td>
<td><label for="phone">Phone number</label>
<input style="margin-left:4px;" id="phone" type="tel" name="contact[note]" /></td>
</tr>
<tr>
<td colspan="2">
<a href="your_link_here"><input style="margin:10px; padding-left:40px; padding-right: 40px; margin-left:200px" class="submit" type="submit" /></a></td>
</tr>
</tbody>
</table>
{% endform %}</p>

[mrsaxman29]

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?

[made4Uo]

Hi @mrsaxman29, 

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

<p>{% form 'customer' %}
<input id="contact_tags" name="contact[tags]" type="hidden" value="prospect,newsletter" />
<table style="padding:1px">
<tbody>
<tr>
<td style="padding:2em"></td>
<td><label for="contact-email">Email </label><input style="margin-left:65px;" id="contact_email" name="contact[email]" type="text" /></td>
</tr>
<tr>
<td style="padding:2em"></td>
<td><label for="first-name">First name</label>
<input style="margin-left:32px;" id="first-name" type="text" name="contact[first_name]" /></td>
</tr>
<tr>
<td style="padding:2em"></td>
<td><label for="last-name">Last name</label>
<input style="margin-left:35px;" id="last-name" type="text" name="contact[last_name]" /></td>
</tr>
<tr>
<td style="padding:2em"></td>
<td><label for="phone">Phone number</label>
<input style="margin-left:4px;" id="phone" type="tel" name="contact[note]" /></td>
</tr>
<tr>
<td colspan="2">
<input style="margin:10px; padding-left:40px; padding-right: 40px; margin-left:200px" class="submit" type="submit" onclick="redirect()"/></td>
</tr>
</tbody>
</table>
<script>
function redirect() {
setTimeout("location.href = 'https://www.shophitherlane.com/';",3000)
}
</script>
{% endform %}</p>

[mrsaxman29]

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?

[lessofmore]

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:  

<input type="hidden" id="redirecting" name="return_to" 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 = "<New-Path>"

})