Shopify Newsletter signup form redirect ANCHOR is WRONG.

[smilingdog]

When you enter an email address in the Newsletter signup (on the footer of most themes) and hit submit, it redirects to the signup captcha/challenge page. The problem is the redirect has an anchor on it (challenge#contact_form). That anchor is the ID for that same footer signup form not the captcha above. So, on a site with a large footer, you get redirected to the challenge page but stay on the footer and never see the captcha above without scrolling back up. 

I've noticed this on two sites with two different themes (Testament and Debut).I've searched for the contact_form ID in my entire theme and can't find it to change it. I'm guessing the Shopify newsletter signup form is off limits and the anchor isn't something we can change??? 

<form method="post" action="/contact#contact_form" id="contact_form" accept-charset="UTF-8" class="contact-form">

So in other words, the contact form redirects to itself (the same contact form anchor/ID) instead of the top of the page where the user would see the captcha. This is problematic if the user isn't expecting a captcha and just closes the browser window after entering their email address.

[smilingdog]

In case anyone is looking for a temporary workaround to this issue, I put this javascript at the bottom of my theme file (before </body> tag) and it seems to work. It replaces the anchor with the body ID (challenge). Now when a user enters their email, the form redirects to the top of the contact/challenge page rather than the footer. Only works if the user has javascript enabled (most do)

<script>
function myFunction() {
  var str = document.getElementById("footer_signup").innerHTML; 
  var res = str.replace("contact#contact_form", "contact#challenge");
  document.getElementById("footer_signup").innerHTML = res;
};
myFunction();
</script>

[leojaume]

It looks like the issue is still around months later.

[smilingdog]

I contacted support. They said they could have their design team edit my theme (which I'm sure just means they'd just hard code the form in my footer), and that they would "send a small report to our internal team to see if we can fix this issue collectively for all of the theme here at Shopify." which is what I wanted to happen. That was 10 days ago.

I opted to use my javascript fix until it's fixed properly.

Comparatively speaking, their support is good... but there really should be a hotline for developers. I dread contacting support because I know I'm going to spend an hour going back and forth explaining something to their first tier support before they will escalate an issue.

[AliceMatt]

Hi Smilingdog!

Just came across your posts when searching around regarding the same issue. A couple more months down the line and they still don't seem to have resolved this one. Will try myself as maybe with volume of enquiries may result in quicker responses.. It seems such a silly and trivial issue to fix.

In the meantime, I've tried your workaround but can't get it to work for my site. I am not a developer by any means, but have a small (possibly dangerously so) bit of knowledge of these things - I have a feeling that my page IDs are slightly different to the ones in your example so don't match up to function but I can't quite work out how to vary them correctly.

For me, the challenge page defaults to /challenge#ContactFooter. Based on your code I thought I might therefore need to try

var res = str.replace("challenge#ContactFooter", "challenge#challenge");

But this doesn't seem to work. I'm guessing I'm changing the wrong parts of the code. Are you able to point me in the right direction please?

[smilingdog]

Hard to know without seeing it. Can you post either the site (if it's live) or a preview link?

[AliceMatt]

Thanks for the reply - can't send those over for now I'm afraid as the site isn't live. Not to worry, was really on the off chance anyway if it was an easy fix.

I do have some dialogue with Support on the issue at the moment so hopefully they might get around to fixing it soon. Will advise if there's any progress.

Cheers

[smilingdog]

I can tell you this much... I looked at another client who is using the Debut theme and it looks similar to what you posted. Their's does not have a div with #footer_signup ID surrounding it (and that's what the javascript I posted uses to find and replace "contact#contact_form" with "contact#challenge"). In yours, you would probably want to replace "contact#ContactFooter" with "contact#challenge" and add an ID to <div class="site-footer__newsletter">

In other words (if I'm not mistaken) you would need to change:

<div class="site-footer__newsletter">

to

<div id="footer_signup" class="site-footer__newsletter">

and add this before the </body> tag in your theme.liquid:

<script>
function myFunction() {
  var str = document.getElementById("footer_signup").innerHTML; 
  var res = str.replace("contact#ContactFooter", "contact#challenge");
  document.getElementById("footer_signup").innerHTML = res;
};
myFunction();
</script>

And, for future reference, you should be able to get a preview link of the site without it being live. I used to think the same thing. You should see something like this at the bottom of a theme you're previewing. 

Good luck!

[GraceENC]

Hi there, thanks so much for already posting this information. I'm having exactly the same issue and trying desperately to find a work around for the debut theme.

The only place I'm able to locate the is <div class="site-footer__newsletter"> is in footer.liquid:

<footer class="site-footer critical-hidden" role="contentinfo" data-section-id="{{ section.id }}" data-section-type="footer-section">
<div class="page-width">
<div class="site-footer__content">
{%- for block in section.blocks -%}

<div class="site-footer__item
{% if section.blocks.size == 1 %} site-footer__item--center{% endif %}
{{ footer_item }}
{% if block.type == 'newsletter' and section.blocks.size == 3 %}site-footer-newsletter__one-half{% endif %}"
{{ block.shopify_attributes }}>
<div class="site-footer__item-inner site-footer__item-inner--{{ block.type }}">

{%- if block.settings.title -%}
<p class="h4">{{ block.settings.title | escape }}</p>
{%- endif -%}

{%- case block.type -%}
{%- when 'newsletter' -%}
<div class="site-footer__newsletter
{% if section.blocks.size == 1 %} site-footer__single-block--centered{% endif %}">
{%- assign formId = 'ContactFooter' -%}
{% form 'customer', id: formId, novalidate: 'novalidate' %}
{%- if form.posted_successfully? -%}
<p class="form-message form-message--success" tabindex="-1" data-form-status>
{{ 'general.newsletter_form.confirmation' | t }}
</p>
{%- endif -%}
<input type="hidden" name="contact[tags]" value="newsletter">
<div class="input-group {% if form.errors %} input-group--error{% endif %}">
<input type="email"
name="contact[email]"
id="{{ formId }}-email"
class="input-group__field newsletter__input{% if form.errors %} input--error{% endif %}"
value="{{ form.email }}"
placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"
aria-label="{{ 'general.newsletter_form.email_placeholder' | t }}"
aria-required="true"
required
autocorrect="off"
autocapitalize="off"
{% if form.errors %}
aria-invalid="true"
aria-describedby="{{ formId }}-email-error"
data-form-status
{% endif %}>
<span class="input-group__btn">
<button type="submit" class="btn newsletter__submit" name="commit" >
<span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
</button>
</span>
</div>
{% if form.errors contains 'email' %}
<span id="{{ formId }}-email-error" class="input-error-message">
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="site-footer__newsletter-error">{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
</span>
{% endif %}
{% endform %}
</div>

Any ideas how I can get your JS to work? 

[Cameron_Shaw]

Here's what I used to fix this today:

  <script type="text/javascript">
    document.querySelector('body').addEventListener('jq-rdy', function() {
      if(window.location.href.indexOf('challenge#contact_form') > -1){
          $([document.documentElement, document.body]).animate({
             scrollTop: $('#MainContent').offset().top - 130
          }, 10);
      }
    });
  </script>

The if statement checks if the url has the challenge#contact_form part in it, and if it does, tries to scroll up to the <main> with id="MainContent". The 130 is the offset for the height of the header, and the 10 is the speed it should scroll (10ms). 

If jQuery is available right away, you can just use this:

  <script type="text/javascript">
      if(window.location.href.indexOf('challenge#contact_form') > -1){
          $([document.documentElement, document.body]).animate({
             scrollTop: $('#MainContent').offset().top - 130
          }, 10);
      }
  </script>

[leojaume]

In theme.liquid before closing and

[emerlyn]

Hi there, I found this simple fix and I can confirm that it's working fine. Just add it on theme.js file without the script tag or add it before </body> tag on theme.liquid file. I hope this helps. 

 <script>
    document.getElementById("contact_form").action = "/contact#challenge";
  </script>

[JohnHoltRipley]

The solution I've just used was to replace

{% form 'customer', id: form_id %}

with just

{% form 'customer' %}

and that removed that hash from the form's action attribute, and the CAPTCHA was scrolled to correctly

[Stoneskript]

The following JavaScript snippet can be placed at the root of the Dawn theme global.js file (theme.js in other themes). It fixes the described issue using vanilla JS (without the need for jQuery):

window.onload = function(){
  if(window.location.href.indexOf("challenge#ContactFooter") > -1){
                                        <!--#contact_form in other themes-->
     window.scrollTo(0,0);
  }
}