Code to add newsletter sign up to page

kindredpeople
Explorer
78 1 23

Could someone provide the code to add a newsletter sign up to a page?

Thanks!

Replies 8 (8)

made4Uo
Shopify Partner
3803 713 1114

Hi, 

 

You should already have a newsletter section.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  1. Click Add section.

  2. Click Newsletter, then click Add.

  3. Enter a heading for your newsletter signup. For example, "Subscribe to our newsletter".

  4. In the subheading field, enter a short description of what your customer will receive by subscribing.

  5. Click Save.

Let me know if you still need help

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

made4Uo
Shopify Partner
3803 713 1114

Here is the simple code with no CSS

{% form 'customer' %}
  <div class="email">
    <label for="email">Email</label>
    <input type="email" name="contact[email]" />
  </div>

  <div class="submit">
    <input type="submit" value="Sign up" />
  </div>
{% endform %}

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
kindredpeople
Explorer
78 1 23

Hi, the code inserts a newsletter but unfortunately the newsletter isn't functional. You can enter an email but nothing happens. 

made4Uo
Shopify Partner
3803 713 1114

@kindredpeople,

 

As mentioned on my first comment, your theme should already have a newsletter section. You should be able to copy the code or added the section in your page. Those code I provided you needs to connect to your theme code. 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
kindredpeople
Explorer
78 1 23

Where can I find the code from my theme's newsletter?

Because I was able to add a newsletter easily on my home page but not on my other regular pages.

made4Uo
Shopify Partner
3803 713 1114

Hard to tell without knowing your theme. Usually they have it in the Section folder or Snippet folder

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Swaggerlikeme
Excursionist
43 0 2

Hi I have debut theme where can i find the code so that i can copy it to my modal?

Swaggerlikeme
Excursionist
43 0 2
{%- assign formId = 'Contact_' | append: section.id -%}
    {% form 'customer', id: formId, novalidate: 'novalidate', class: 'contact-form form-single-field' %}
      {%- if form.posted_successfully? -%}
        <p class="form-message form-message--success" tabindex="-1" data-form-status>
          {{ 'general.newsletter_form.confirmation' | t }}
        </p>
      {%- endif -%}
      <input type="hidden" name="contact[tags]" value="newsletter">
      <div class="input-group {% if form.errors %} input-group--error{% endif %}">
        <input type="email"
          name="contact[email]"
          id="{{ formId }}-email"
          class="input-group__field{% if form.errors %} input--error{% endif %}"
          value="{{ form.email }}"
          placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"
          aria-label="{{ 'general.newsletter_form.email_placeholder' | t }}"
          aria-required="true"
          autocorrect="off"
          autocapitalize="off"
          {% if form.errors %}
            aria-invalid="true"
            aria-describedby="{{ formId }}-email-error"
            data-form-status
          {% endif %}
          >
        <span class="input-group__btn">
          <button type="submit" class="btn" name="commit">
            <span>{{ 'general.newsletter_form.submit' | t }}</span>
          </button>
        </span>
      </div>
      {%- if form.errors contains 'email' -%}
        <span id="{{ formId }}-email-error" class="input-error-message">
          <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
          {% include 'icon-error' %}
          <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
        </span>
      {%- endif -%}
    {% endform %}
    <!-- End newsletter signup form -->

 

above is the code for the form from debut theme. I put it in a modal window and it works but 

1. there is no form validation

2. it reloads the page and the modal is lost after that. 

see it in action here: 

https://dpf8jhebh6pybaaz-52123107526.shopifypreview.com

 

I need help customizing this. 

thanks

RJ