Newsletter Signup Form Redirect on Successful Submission

mrsaxman29
Excursionist
18 1 2

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>

Check out my store Hither Lane at www.shophitherlane.com
Replies 5 (5)

made4Uo
Shopify Partner
3821 716 1148

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>

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
mrsaxman29
Excursionist
18 1 2

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?

Check out my store Hither Lane at www.shophitherlane.com
made4Uo
Shopify Partner
3821 716 1148

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>

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
mrsaxman29
Excursionist
18 1 2

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?

Check out my store Hither Lane at www.shophitherlane.com

lessofmore
Visitor
1 0 0

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>"
})