How can I add a newsletter sign up to my webpage?

[kindredpeople]

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

Thanks!

[made4Uo]

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

[made4Uo]

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

[kindredpeople]

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

[made4Uo]

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

[kindredpeople]

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]

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

[Swaggerlikeme]

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

[Swaggerlikeme]

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