How can I create an email sign up with redirection button?

[Jferguson1]

Can someone please help me.

I'm trying to create a page where customers must enter their email and click a button to be redirected to another page - and im finding it hard to find any solutions.

This is what I want the page to look like: 

url: https://tryy.co.uk/pages/email-sign-up

password - help

Thanks in advance

[webwondersco]

Please add the below-hidden input field with your specific URL as a value.

<input type="hidden" name="return_to" value="URL of page" />

[Jferguson1]

thanks for getting back to me,

where do I insert this? thanks

[webwondersco]

@Jferguson1 after the starting of your <form> tag of your newsletter.

just add it after form tag:

<form>

 // add here

</form>

the above code is just fore ref

[Jferguson1]

thanks for your reply.

Am i being an idiot or is there no form tag?

newsletter.liquid: 

{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
{{ 'newsletter-section.css' | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

<div class="newsletter center {% if section.settings.full_width == false %}newsletter--narrow page-width{% endif %}">
<div class="newsletter__wrapper color-{{ section.settings.color_scheme }} gradient content-container isolate{% if section.settings.full_width %} content-container--full-width{% endif %} section-{{ section.id }}-padding">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when '@app' -%}
{% render block %}
{%- when 'heading' -%}
<h2
class="inline-richtext {{ block.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{{ block.settings.heading }}
</h2>
{%- when 'paragraph' -%}
<div
class="newsletter__subheading rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{{ block.settings.text }}
</div>
{%- when 'email_form' -%}
<div {{ block.shopify_attributes }}>
{% form 'customer', class: 'newsletter-form' %}
<input type="hidden" name="contact[tags]" value="newsletter">
<div
class="newsletter-form__field-wrapper{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
<div class="field">
<input
id="NewsletterForm--{{ section.id }}"
type="email"
name="contact[email]"
class="field__input"
value="{{ form.email }}"
aria-required="true"
autocorrect="off"
autocapitalize="off"
autocomplete="email"
{% if form.errors %}
autofocus
aria-invalid="true"
aria-describedby="Newsletter-error--{{ section.id }}"
{% elsif form.posted_successfully? %}
aria-describedby="Newsletter-success--{{ section.id }}"
{% endif %}
placeholder="{{ 'newsletter.label' | t }}"
required
>
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.label' | t }}
</label>
<button
type="submit"
class="newsletter-form__button field__button"
name="commit"
id="Subscribe"
aria-label="{{ 'newsletter.button_label' | t }}"
>
{% render 'icon-arrow' %}
</button>
</div>
{%- if form.errors -%}
<small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">
{%- render 'icon-error' -%}
{{- form.errors.translated_fields.email | capitalize }}
{{ form.errors.messages.email -}}
</small>
{%- endif -%}
</div>
{%- if form.posted_successfully? -%}
<h3
class="newsletter-form__message newsletter-form__message--success form__message"
id="Newsletter-success--{{ section.id }}"
tabindex="-1"
autofocus
>
{% render 'icon-success' -%}
{{- 'newsletter.success' | t }}
</h3>
{%- endif -%}
{% endform %}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>

{% schema %}
{
"name": "t:sections.newsletter.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header"]
},
"settings": [
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "full_width",
"default": true,
"label": "t:sections.newsletter.settings.full_width.label"
},
{
"type": "paragraph",
"content": "t:sections.newsletter.settings.paragraph.content"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 40
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 52
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.newsletter.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "Subscribe to our emails",
"label": "t:sections.newsletter.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "paragraph",
"name": "t:sections.newsletter.blocks.paragraph.name",
"limit": 1,
"settings": [
{
"type": "richtext",
"id": "text",
"default": "<p>Be the first to know about new collections and exclusive offers.</p>",
"label": "t:sections.newsletter.blocks.paragraph.settings.paragraph.label"
}
]
},
{
"type": "email_form",
"name": "t:sections.newsletter.blocks.email_form.name",
"limit": 1
},
{
"type": "@app"
}
],
"presets": [
{
"name": "t:sections.newsletter.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "paragraph"
},
{
"type": "email_form"
}
]
}
]
}
{% endschema %}

[webwondersco]

Add the given code after this line of code

{% form 'customer', class: 'newsletter-form' %}

[Jferguson1]

 Where do i insert it? thanks

[Jferguson1]

 I entered this and it didn't work 😕

[webwondersco]

@Jferguson1 Ohh  man not like this.

You have to find out the code of the newsletter and no need to update that code. just put my single line code which I have given above.

That's all.

[Jferguson1]

how do i find out the code of the newsletter? 

and is this the correct code: 

{% form 'customer', class: 'newsletter-form' %}
<input type="hidden" name="return_to" value="https://www.tryy.co.uk" />

thanks

[webwondersco]

Everything works fine?

[Jferguson1]

what do you mean?

where should i insert the code within the newsletter/liquid?

[Jferguson1]

newsletter.liquid*

[Jferguson1]

 i entered the code here, but still not working. 

Is this the correct place to insert it? 

thanks

[DanielEspinal]

Hi webwonders; I

already did everything you mention here. Im trying to redirect the email sign up form from password page to a thank you page with a code to enter to the main website. I already place the:

{%- if form.posted_successfully? -%}
<script>
window.location="/pages/thank-you"
</script>

and in the newsletter.liquid. Also i saw you mention to place the link after 

{% form 'customer', class: 'newsletter-form' %}
<input type="hidden" name="contact[tags]" value="https://tsideup.com/pages/thank-you">

but it doesnt work either

[Jferguson1 · Accepted solution]

Solved!!! 

For anyone wanting to automatically redirect visitors to a thank you page or any other page on your site after their input their email within an email sign up form, insert this code:

<script>
window.location = "/pages/thank-you-page";
</script>

after:

{%- if form.posted_successfully? -%}

within the email-signup-banner.liquid file (around line 30). 

and change the: /pages/thank-you-page to any page you like. 

[DanielEspinal]

Hi Jferguson;

This code you add it only to email-signup-banner.liquid or also to newsletter.liquid? because i saw some screenshots you post in newsletter.liquid.

Thank you in advance

[flinno]

Hi,

I tried to insert the code into the place that you mentioned, however, I can't proceed with the redirect when registering an account in my shop. Could you help check the screenshot if I put it into the right place? Thank you in advance!

BR,

flinno