Redirect shopify newsletter signup form after submit

charlesr
Shopify Partner
28 0 8

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 -%}

 

Replies 12 (12)

Not applicable

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
Shopify Partner
28 0 8

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
Shopify Partner
28 0 8

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 %}

 

Not applicable

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
Shopify Partner
28 0 8
NerdyEcomDude
Tourist
9 0 4

Will this work on the Debut theme? 

charlesr
Shopify Partner
28 0 8

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
Tourist
9 0 4

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

You can write this code inside your form tag . 

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

minddesign
Tourist
4 0 2

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

atertonien
Excursionist
40 0 27

Hi @rashiduln ,

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

ejkej87
Shopify Partner
11 0 1

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>