Why is my newsletter generating an error message?

[Sovel]

Hello,

I have some problems with my newsletter. When I enter an email adress and then press the button, a new browser pops with an error.

Could you please advise on this issue?

Thank you

[Ritu-25]

Hello @Sovel ,

Could you please share your website url here? 

[Sovel]

sure https://www.sovel.ro/

[BrainStation23]

Hi@Sovel. Your newsletter signup code is not correct.

Your form action is empty.

Is it possible to share the code of files like newsletter.liquid or email-signup.liquid?

[BrainStation23]

@Sovel. Your form action should be like this.

[Sovel]

Hello,

Here is the code for home-lewsletter.liquid.

{%- if section.settings.reponsive_mt != blank -%}

{%- assign margin_top_responsive = section.settings.reponsive_mt | split: ',' -%}

{% capture margin_top %}mt-{{ margin_top_responsive[0] }} mt-sm-{{ margin_top_responsive[1] }} mt-md-{{ margin_top_responsive[2] }} mt-lg-{{ margin_top_responsive[3] }} {% endcapture %}

{%- endif -%}

{%- if section.settings.reponsive_bt != blank -%}

{%- assign margin_bottom_responsive = section.settings.reponsive_bt | split: ',' -%}

{% capture margin_bottom %}mb-{{ margin_bottom_responsive[0] }} mb-sm-{{ margin_bottom_responsive[1] }} mb-md-{{ margin_bottom_responsive[2] }} mb-lg-{{ margin_bottom_responsive[3] }} {% endcapture %}

{%- elsif section.settings.margin_bottom != blank -%}

{% capture margin_bottom %}margin-bottom-{{ section.settings.margin_bottom }}{% endcapture %}

{%- endif -%}

<div class="home-newsletter{% if section.settings.layout_use == 'layout_2' %} newsletter-layout-2{% endif %}{% if section.settings.layout_use == 'layout_1' %} newsletter-layout-1{% endif %} {{margin_top}} {{margin_bottom}}" style="{%- unless section.settings.reponsive_mt != blank -%}margin-top:{{ section.settings.margin_top }}px;{%endunless %}{%- unless section.settings.reponsive_bt != blank -%}margin-bottom:{{ section.settings.margin_bottom }}px;{%endunless %}">

  <div class="container">

    <div class="newsletter row">

      <div class="newsletter-left col-12{% if section.settings.layout_use == 'layout_1' %} col-md-4{% endif %}">

        {% if section.settings.home_newsletter_title != blank %}

        <div class="heading-block">

          <h3 class="title">

            {{ section.settings.home_newsletter_title }}

          </h3>

          {% if section.settings.home_newsletter_subtitle != blank %}

          <p class="subtitle">

            {{ section.settings.home_newsletter_subtitle }}

          </p>

          {% endif %}

        </div>

        {% endif %}

      </div>

      <div class="content col-12{% if section.settings.layout_use == 'layout_1' %} col-md-6 offset-md-2{% endif %}">

        <form action="{{ section.settings.mailing_list_form_action }}" method="post" name="mc-embedded-subscribe-form" target="_blank" class="input-group">

          <div class="input-group newsletter_form_content">

            <input  class="input__field input-group-field" type="email" value="" name="EMAIL" aria-label="Email Address"  placeholder="{{ 'footer.footer_newsletter_content' | t }}">

            <span class="input-group-btn">

              <input type="submit" class="btn"  value="{{ 'footer.footer_newsletter_go' | t }}" name="subscribe">

            </span>

          </div>

        </form>

      </div>

    </div>

  </div>

</div>

{% schema %}

  {

"name": "Newsletter",

    "class": "index-section section",

    "settings": [

      {

      "type": "range",

      "id": "margin_top",

      "min": 0,

      "max": 100,

      "step": 1,

      "unit": "px",

      "label": "Margin Top",

      "default": 10

    },

    {

      "type": "text",

      "id": "reponsive_mt",

      "label": "Responsive Margin Top",

      "info": "Example is '20,30,40,60'"

    },

    {

      "type": "range",

      "id": "margin_bottom",

      "min": 0,

      "max": 100,

      "step": 1,

      "unit": "px",

      "label": "Margin Bottom",

      "default": 10

    },

    {

      "type": "text",

      "id": "reponsive_bt",

      "label": "Responsive Margin Bottom",

      "info": "Example is '20,30,40,60'"

    },

{

            "type": "select",

            "id": "layout_use",

            "label": "Style:",

            "default": "layout_1",

            "options": [

            {

              "value": "layout_1",

              "label": "Style layout 1"

            },

  {

              "value": "layout_2",

              "label": "Style layout 2"

            }

            ]

          },

      {

        "type": "text",

        "id": "home_newsletter_title",

        "label": "Heading",

        "default": "Newsletter"

      },

      {

        "type": "text",

        "id": "home_newsletter_subtitle",

        "label": "Subheading",

        "default": "Subscribe now to get daily updates "

      },

      {

        "type": "text",

        "id": "mailing_list_form_action",

        "label": "MailChimp form action URL",

        "info": "[Where do I find my MailChimp form action URL?](http:\/\/docs.shopify.com\/support\/configuration\/store-customization\/where-do-i-get-my-mailchimp-form-action)"

      }

],

    "presets": [

        {

          "name": "Newsletter",

           "category": "3) Builder"

        }

  ]

 }

{% endschema %}

{% stylesheet %}

{% endstylesheet %}

{% javascript %}

{% endjavascript %}

[BrainStation23]

@Sovel. I think there are some errors in your code.

But if it is working in your side, then leave it at it is.

Just replace

<form action="{{ section.settings.mailing_list_form_action }}" method="post" name="mc-embedded-subscribe-form" target="_blank" class="input-group">

with this line

{% form 'customer' %}

[BrainStation23]

There are many issues. Like:

1. Missing translations

2. input field don't have the necessary name field.

You can view the below code and update your code accordingly.

{% form 'customer', class: 'newsletter-form' %}
                <input type="hidden" name="contact[tags]" value="newsletter">
                <div class="newsletter-form__field-wrapper">
                  <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 %}

without the customer form and necessary name attributes of input fields, newsletter will not work

Let us know if you've any queries.

[Sovel]

I dont get it. Its giving me errors over errors. Am i supposed to replace the whole line of form with the line you provided?

[BrainStation23]

Yes you can try. If it stilling giving the error, share the code again pleas.

[Sovel]

Hello,

Sorry for the late response. Its giving this error if I try to replace the code with the line your provided.

Also, there is another newsletter liquid called: newsletter-form.liquid. I attached the code for this code, maybe this is what causes the problem.

{% comment %}

MailChimp is the go-to newsletter service for Shopify.
Use the link below to find your MailChimp "form action"
and insert it in your site settings.

MailChimp newsletter integration and requirement:
- http://docs.shopify.com/support/configuration/store-customization/where-do-i-get-my-mailchimp-form-a...

{% endcomment %}
<form action="{{ settings.mailing_list_form_action }}" method="post" name="mc-embedded-subscribe-form" class="input-group {% if settings.display_ajax_mailchimp %} clv-ajax-from {% endif %}">
<div class="input-group newsletter_form_content">
<input type="email" value="" placeholder="{{ 'footer.footer_newsletter_content' | t }}" name="EMAIL" class="input-group-field" aria-label="Email Address">
<div class="message-newsneter"></div>
<span class="input-group-btn">
<input type="submit" class="btn harman_btn4" value="{{ 'footer.footer_newsletter_go' | t }}" name="subscribe">
</span>
</div>
</form>