Shopify Newsletter signup form redirect ANCHOR is WRONG.

smilingdog
Shopify Partner
47 1 18

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.

Replies 13 (13)

smilingdog
Shopify Partner
47 1 18

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
Visitor
2 0 1

It looks like the issue is still around months later.

smilingdog
Shopify Partner
47 1 18

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
Visitor
2 0 0

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
Shopify Partner
47 1 18

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

AliceMatt
Visitor
2 0 0

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
Shopify Partner
47 1 18

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. 

Screen Shot 2020-10-14 at 4.07.38 PM.png

Good luck!

GraceENC
Tourist
5 0 2

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
Shopify Partner
6 0 3

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
Visitor
2 0 1
In theme.liquid before closing and



emerlyn
Visitor
1 0 1

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
Shopify Partner
4 1 3

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
Visitor
1 0 0

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