Solved

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

Jferguson1
Explorer
80 3 6

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: 

ENTER EMAIL7.png

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

password - help

 

Thanks in advance

 

 

Accepted Solution (1)

Jferguson1
Explorer
80 3 6

This is an 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. 

 

 

View solution in original post

Replies 17 (17)

webwondersco
Shopify Partner
1103 164 162

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

 

<input type="hidden" name="return_to" value="URL of page" />
Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
Jferguson1
Explorer
80 3 6

thanks for getting back to me,

 

where do I insert this? thanks

webwondersco
Shopify Partner
1103 164 162

@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

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
Jferguson1
Explorer
80 3 6

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
Shopify Partner
1103 164 162

Add the given code after this line of code

 

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

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
Jferguson1
Explorer
80 3 6

Screenshot 2024-02-22 at 19.05.51.png

 Where do i insert it? thanks

Jferguson1
Explorer
80 3 6

Screenshot 2024-02-22 at 19.16.48.png

 I entered this and it didn't work 😕

webwondersco
Shopify Partner
1103 164 162

@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.

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
Jferguson1
Explorer
80 3 6

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
Shopify Partner
1103 164 162

Everything works fine?

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
Jferguson1
Explorer
80 3 6

what do you mean?

 

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

Jferguson1
Explorer
80 3 6

newsletter.liquid*

Jferguson1
Explorer
80 3 6

Screenshot 2024-02-22 at 20.16.55.png

 i entered the code here, but still not working. 

 

Is this the correct place to insert it? 

 

thanks

DanielEspinal
Tourist
4 0 1

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
Explorer
80 3 6

This is an 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
Tourist
4 0 1

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

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

 

Screenshot 2024-04-19 at 11.40.35 PM.png