Redirect shopify newsletter signup form after submit

charlesr
New Member
11 0 0

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

 

0 Likes
Speedimize
Shopify Partner
300 48 145

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
New Member
11 0 0

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.

0 Likes
charlesr
New Member
11 0 0

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

 

0 Likes
Speedimize
Shopify Partner
300 48 145

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
0 Likes
charlesr
New Member
11 0 0
0 Likes
NerdyEcomDude
Tourist
5 0 2

Will this work on the Debut theme? 

0 Likes
charlesr
New Member
11 0 0

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.

0 Likes
NerdyEcomDude
Tourist
5 0 2

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 @Natztech 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!