FROM CACHE - en_header

Redirect shopify newsletter signup form after submit

charlesr
Excursionist
17 0 4

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 11 (11)
Speedimize
Shopify Partner
319 48 151

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.

 

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
charlesr
Excursionist
17 0 4

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
Excursionist
17 0 4

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

 

Speedimize
Shopify Partner
319 48 151

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?

 

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
charlesr
Excursionist
17 0 4
NerdyEcomDude
Tourist
8 0 4

Will this work on the Debut theme? 

charlesr
Excursionist
17 0 4

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
8 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
New Member
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.

Ghidini1849
Excursionist
32 0 3

Hi @rashiduln ,

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