Need help moving email subscription form in the footer section of the Dawn Theme.

[404virtues]

Hi there,

I would like to make my email subscription form significantly smaller, and I'm essentially trying to emulate this store here.

(https://wkwclub.com/)

The email form with the (subscribe button next to it) is set to the complete right of the footer section, and if possible a directory message on the left.

I currently have the email subscription at it's default setting.

https://404virtues.com/

Could you suggest what I should do?

[Kyle_liu · Accepted solution]

Hi @404virtues ,

1、You can customize theme and uncheck Show email signup

2、Edit code and edit header.liquid，add the following code under</header>

<div style="display: flex; width: 100%; font-weight: bold; height: 50px; background-color: #eac039">
    {%- form 'customer', id: 'ContactFooter', style: 'width: 100%; height: 50px; line-height: 50px;' -%}
      <input type="hidden" name="contact[tags]" value="newsletter">
      <div style="display: flex; width: 100%; font-weight: bold;">
        <div style="margin-left: 26px;">SUBSCRIBE TO THE MAILING LIST FOR EXCLUSIVE OFFERS AND SAMPLES</div>
        <div style="display: flex; position: absolute;float: right;right: 0;width: 312px;">
          <div style="width: 150px;margin-right: 10px;">
            <input
              id="NewsletterForm--{{ section.id }}"
              type="email"
              name="contact[email]"
              class="field__input"
              style="border-bottom: 1px solid; height: 45px; background-color: #eac039; outline: none;"
              value="{{ form.email }}"
              aria-required="true"
              autocorrect="off"
              autocapitalize="off"
              autocomplete="email"
              {% if form.errors %}
                autofocus
                aria-invalid="true"
                aria-describedby="ContactFooter-error"
              {% elsif form.posted_successfully? %}
                aria-describedby="ContactFooter-success"
              {% endif %}
              placeholder="Email address"
              required
            >
            <label class="field__label" for="NewsletterForm--{{ section.id }}">
              Email address
            </label>
          </div>
          <div style="width: 121px;">
            <button
              type="submit"
              name="commit"
              id="Subscribe"
              style="border: none; border-bottom: 1px solid; height: 45px; background: none; font-weight: bold;"
            >
              SUBSCRIPT {% render 'icon-arrow' %}
          </button></div>
        </div>
        {%- if form.errors -%}
          <small class="newsletter-form__message form__message" id="ContactFooter-error">
            {%- 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="ContactFooter-success"
          tabindex="-1"
          autofocus
        >
          {% render 'icon-success' -%}
          {{- 'newsletter.success' | t }}
        </h3>
      {%- endif -%}
    {%- endform -%}
  </div>