Redirect shopify newsletter signup form after submit

[charlesr]

Hi. After my visitors submit their email in the newsletter signup form (in the footer), it shows them a reCapture verification and then shoots to the top of the page, but if they scroll down again, they'll see "You have been subscribed to our newsletter." (in place of the submit button).

What I'd like to do is redirect to a thank you page. Here's what I was trying in newsletter.liquid, but it doesn't make a difference.

Any ideas?

        {%- form 'customer', id: newsletter_id, class: 'Newsletter Form' -%}
          {%- if form.posted_successfully? -%}
        
        <script>
function newDoc() {
  window.location.assign("https://mydomainname.co.uk/pages/thanks-for-subscribing")
}
</script>
        
            <p class="Form__Alert Alert Alert--success">{{ 'home_page.newsletter.success' | t }}</p>
          {%- else -%}
            {%- if form.errors -%}
              <p class="Form__Alert Alert Alert--error">{{ form.errors.messages['email'] }}</p>
            {%- endif -%}

            <div class="Newsletter__Inner">
              <input type="hidden" name="contact[tags]" value="newsletter">
              <input type="email" name="contact[email]" class="Form__Input" aria-label="{{ 'home_page.newsletter.input' | t }}" placeholder="{{ 'home_page.newsletter.input' | t }}" required>
              <button type="submit" class="Form__Submit Button Button--primary">{{ 'home_page.newsletter.submit' | t }}</button>
            </div>
          {%- endif -%}
        {%- endform -%}

[Anonymous]

Hi @charlesr 

Aibek is here from Speedimize.io

Hope everything is fine on your end: 

<script>
function newDoc() {
window.location.assign("https://mydomainname.co.uk/pages/thanks-for-subscribing")
}
</script>

Change to this:

<script>
window.location = "https://mydomainname.co.uk/pages/thanks-for-subscribing"
</script>

Hope that helps you.

[charlesr]

Cheers for trying. It didn't work. I tried with and without a semi-colon at the end of the line.

It now goes to the homepage with url like: https://mydomainname.co.uk/?contact%5Btags%5D=newsletter&form_type=customer and doesn't mark the newsletter box has having worked any more (so it's doing *something*. Just not the right thing.

[charlesr]

Weird. That should work I would have thought. Anything weird about this form setup? Or is it the reCapture step getting in the way? I'll try turning off the latter.

<section id="section-{{ section.id }}">
  {%- capture mobile_size -%}750x{% if section.settings.image.height >= 960 %}960{% else %}{{ section.settings.image.height }}{% endif %}{%- endcapture -%}

  <div class="FlexboxIeFix">
    <div class="ImageHero {% if section.settings.section_size != 'normal' %}ImageHero--{{ section.settings.section_size }}{% endif %} ImageHero--newsletter" {% if section.settings.image %}style="background: url({{ section.settings.image | img_url: '1x1' }})"{% endif %}>
      <div class="ImageHero__ImageWrapper">
        <div class="ImageHero__Image Image--lazyLoad Image--zoomOut"
             data-optimumx="1.4"
             data-expand="-150"
             {% if section.settings.image %}data-bgset="{{ section.settings.image | img_url: mobile_size, crop: 'center' }} 750w, {{ section.settings.image | img_url: '1000x' }} 1000w, {{ section.settings.image | img_url: '1500x' }} 1500w"{% endif %}>
        </div>

        <noscript>
          <div class="ImageHero__Image" style="background-image: url({{ section.settings.image | img_url: '1000x' }})"></div>
        </noscript>

        {%- unless section.settings.image != blank -%}
          <div class="PlaceholderBackground PlaceholderSvg--dark">
            {{ 'lifestyle-1' | placeholder_svg_tag: 'PlaceholderBackground__Svg' }}
          </div>
        {%- endunless -%}
      </div>

      <div class="ImageHero__ContentOverlay">
        <header class="SectionHeader SectionHeader--center">
          {%- if section.settings.subheading != blank -%}
            <h3 class="SectionHeader__SubHeading Heading u-h6">{{ section.settings.subheading | escape }}</h3>
          {%- endif -%}

          {%- if section.settings.title != blank -%}
            <h2 class="SectionHeader__Heading Heading u-h1">{{ section.settings.title | escape }}</h2>
          {%- endif -%}

          {%- if section.settings.content != blank -%}
            <div class="SectionHeader__Description">
              {{ section.settings.content }}
            </div>
          {%- endif -%}
        </header>

        {%- assign newsletter_id = 'footer-' | append: section.id -%}

        {%- form 'customer', id: newsletter_id, class: 'Newsletter Form' -%}
          {%- if form.posted_successfully? -%}
        

        
            <p class="Form__Alert Alert Alert--success">{{ 'home_page.newsletter.success' | t }}</p>
          {%- else -%}
            {%- if form.errors -%}
              <p class="Form__Alert Alert Alert--error">{{ form.errors.messages['email'] }}</p>
            {%- endif -%}

            <div class="Newsletter__Inner">
              <input type="hidden" name="contact[tags]" value="newsletter">
              <input type="email" name="contact[email]" class="Form__Input" aria-label="{{ 'home_page.newsletter.input' | t }}" placeholder="{{ 'home_page.newsletter.input' | t }}" required>
              <button type="submit" class="Form__Submit Button Button--primary">{{ 'home_page.newsletter.submit' | t }}</button>
            </div>
          {%- endif -%}
        {%- endform -%}
      </div>
    </div>
  </div>
</section>

<style>
  #section-{{ section.id }},
  #section-{{ section.id }} .Heading {
    color: {{ section.settings.text_color }};
  }

  #section-{{ section.id }} .Form__Submit {
    border-color: {{ section.settings.text_color }};
    color: {{ section.settings.button_color }};
  }

  #section-{{ section.id }} .Form__Submit::before {
    background-color: {{ section.settings.text_color }};
  }

  @media (-moz-touch-enabled: 0), (hover: hover) {
    #section-{{ section.id }} .Form__Submit:hover {
      color: {{ section.settings.text_color }};
    }
  }
</style>

{% schema %}
{
  "name": "Newsletter",
  "settings": [
    {
      "type": "select",
      "id": "section_size",
      "label": "Section size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "normal",
          "label": "Normal"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "small"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image",
      "info": "1500 x 800px jpg recommended"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button text",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Sub-heading",
      "default": "Keep updated"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Newsletter"
    },
    {
      "type": "richtext",
      "id": "content",
      "label": "Text",
      "default": "<p>A short sentence describing what someone will receive by subscribing</p>"
    }
  ],
  "presets": [
    {
      "category": "Promotional",
      "name": "Newsletter",
      "settings": {}
    }
  ]
}
{% endschema %}

[Anonymous]

Hi @charlesr 

Can you please share URL of your shop?

So we can elaborate on our solution for you.

On our side, everything works without any problems. So we're wondering why this happening?

[charlesr]

Hi. It's https://runcompany.co.uk

[NerdyEcomDude]

Will this work on the Debut theme? 

[charlesr]

In theory, it should work in any theme because the default signup code is the same for everyone. No idea why it didn't work on mine.

[NerdyEcomDude]

I still find it pretty sad that the signup UX is still broken; with the challenge footer anchor link issue AND this with the lack of control on a signup redirect. 2021.... 
I wonder if @Kinjaldavra or @diego_ezfy would know? Trying to redirect a user after they signup in the Debut theme using the footer email form. Any ideas? Thank you! 

[rashiduln]

You can write this code inside your form tag . 

<input type="hidden" name="return_to" value="/pages/thank-you"/>

[minddesign]

Thank you, that was a simple solution, and it worked great.

[atertonien]

Hi @rashiduln ,

how could I use your code but open the page in another tab?

[ejkej87]

Try this one:

<form id="myForm" action="/pages/thank-you" method="POST" target="_blank">
  <input type="hidden" name="return_to" value="/pages/thank-you"/>
  <input type="submit" value="Submit">
</form>

<script>
  document.getElementById("myForm").addEventListener("submit", function() {
    this.target = "_blank";
  });
</script>

[shopjobie]

where does this code go?  I am trying to redirect to another page after they sign up for mailing list  instead of staying on the same page