Sense Theme: Add First Name to Email Signup Landing Page

[tabletandquill]

Hello, 

I would like to create a landing page I can link to so I can collect email addresses. I'm using Sense theme. When I add the "Email Signup" section to the page, there's no option to add additional fields. How can I add a First Name field? This is my email signup page currently. 

Similar question but for Dawn theme, this solution was close to working for me as there was an error (image below). 

Similar question but for Sense footer, this solution won't work for me as I'm using it on a page not the footer. 

Thanks in advance!

[pawankumar]

Hi @tabletandquill 
You can create the form using shopify forms and copy embed code
This is the easiest way that you can try

OR you can duplicate the newsletter section, adding first name field there and adjust some styling, it can work that way also
Thanks!

[tabletandquill]

Hello, 

thanks for your response, however this doesn’t answer my question as I’m not looking to add a form via the Form app. Also, the Sense theme does not have a “Newsletter” section when adding the email collection form to the page, only the “Email Signup” section is available to add. The “Email Signup” section only collects the email by default and doesn’t have any other fields I can add (that I can find), I’m asking for a way to have the Shopify section “Email Signup” collect the first name too. 

[pawankumar · Accepted solution]

Please create another section newsletter-2 and add this content there, then you will find this section in theme settings as "Newsletter 2"

{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
{{ 'newsletter-section.css' | asset_url | stylesheet_tag }}
{{ 'component-rte.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="{{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
            {{ block.settings.heading | escape }}
          </h2>
        {%- when 'paragraph' -%}
          <div class="newsletter__subheading rte" {{ block.shopify_attributes }}>{{ 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">
                        <div class="field">
          <input
            class="field__input"
            autocomplete="name"
            type="text"
            id="ContactForm-name"
            name="contact[first_mame]"
            value="{% if form.first_name %}{{ form.first_mame }}{% elsif customer %}{{ customer.name }}{% endif %}"
            placeholder="{{ 'templates.contact.form.name' | t }}"
          >
          <label class="field__label" for="ContactForm-name">First Name</label>
       
                        </div>
                 <br />
                <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>
                
                  <div class="contact__button">
        <button type="submit" class="button">
          {{ 'templates.contact.form.send' | t }}
        </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": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label"
    },
    {
      "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": "text",
          "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": "Newsletter 2",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "paragraph"
        },
        {
          "type": "email_form"
        }
      ]
    }
  ]
}
{% endschema %}

Please check if it works for you

Thanks!

[tabletandquill]

This worked perfectly, thank you! The only change I made was to add a <br> between the div sections for the email field and button to add some space between the two.