Adding custom field to newsletter signup

davestavros
Tourist
5 0 1

I am running an Instagram competition and want to collect Instagram usernames of participants in addition to first name, last name and email address. 

 

I have tried a bunch of different apps, but they only seem to edit the customer registration forms (which require a password - which I don't want). It seems like the newsletter signup is the only way to add customers to the email list without requiring a password? I believe something like Klaviyo could do what I want, but that would be many hundreds of dollars per month for even a few thousand subscribers.  

 

How would I code a form that collects this information? I know that there isn't a specific "Instagram username" field in the Shopify customer section, but it's OK if the Instagram username goes into the customer notes part of the customer information so I can at least export it as a CSV. There are a few bits of code floating around these forums that add first and last name, but I can't find the code that will populate the customer notes section.   

 

Thanks for your help! 

 

 

Replies 7 (7)

Kani
Shopify Partner
468 125 221

Hi @davestavros 

 

You can add these fields in your Newsletter form

<input name="contact[first_name]">

<input name="contact[last_name]">

Kani_1-1663381273156.png

Kani_2-1663381321565.png

 

 

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂

KetanKumar
Shopify Partner
36830 3635 11962

@davestavros 

yes,  please share your code so i will check and update 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
davestavros
Tourist
5 0 1

It's Dawn theme btw. I have already added the first and last name code and that works. I just need a field to add Instagram username. There is also no "submit" button, it's just an arrow in the "email" field, which may be a bit confusing to customers. Thanks! 

{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
{{ 'newsletter-section.css' | asset_url | stylesheet_tag }}

<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">
    {%- for block in section.blocks -%}
      {%- case block.type -%}
        {%- when '@app' -%}
          {% render block %}
        {%- when 'heading' -%}
          <h2 class="h1" {{ 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-first_name" name="contact[first_name]" value="" aria-required="true" placeholder="First Name" required>
          <label class="field__label" for="ContactForm-first_name">{{ 'customer.register.first_name' | t }}</label>
        </div>
        
        <div class="field">
          <input class="field__input" autocomplete="name" type="text" id="ContactForm-last_name" name="contact[last_name]" value="" aria-required="true" placeholder="Last Name" required>
          <label class="field__label" for="ContactForm-last_name">{{ 'customer.register.last_name' | t }}</label>
        </div>
        
        <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 %}
          </div>
      {%- endcase -%}
    {%- endfor -%}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.newsletter.name",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.newsletter.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.newsletter.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.newsletter.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.newsletter.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.newsletter.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.newsletter.settings.color_scheme.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"
    }
  ],
  "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": "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": "t:sections.newsletter.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "paragraph"
        },
        {
          "type": "email_form"
        }
      ]
    }
  ]
}
{% endschema %}

 

 

davestavros
Tourist
5 0 1

Hi. I have added the code for my current newsletter below.   

Kani
Shopify Partner
468 125 221

Hi @davestavros 

 

You can catch Instagram username and add it to tags. It need some JavaScript skill

 <input type="hidden" name="contact[tags]" value="newsletter,InstagramUsername">

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂

leefrankis
Excursionist
14 2 5

Hey Davestavros,

 

I know this question is a little dated now, but here's how you can implement this, for yourself or anyone else looking to add an Instagram field to the newsletter signup form.

 

Inside the {% form %} find the follow line

<input type="hidden" name="contact[tags]" value="newsletter">

This line adds a hidden input field which is used to add a tag to the customer entry called 'newsletter', this lets you know that customer signed up using the newsletter form.

 

Replace the line above with the following

<input id="form_tags" type="hidden" name="contact[tags]">

What we have done is removed the value being assigned (newsletter) because we will assign the value from the text field instead using Javascript.

 

Now add the text field to the form where the user will enter their Instagram username, add the following code above the email field.

<div class="field">
<input class="field__input" type="text" id="instagram" name="contact[instagram]" value="" aria-required="true" placeholder="Enter your username" required>
<label class="field__label" for="instagram">Instagram</label>
</div>

 

Here's where we'll make everything work, add the following Javascript above the opening schema tag.

<script>
// add event listener for when submit button of form is clicked
document.querySelector("form#contact_form").addEventListener("submit", function(e){

// assign variable to instagram field
const insta = document.getElementById("instagram").value;

// assign value from instagram field to hidden input
document.getElementById('form_tags').value = "newsletter," + "IG: " + insta;
});
</script>

This code takes what was entered into the Instagram field and assigns it to the value of the hidden input field. It also prefixes the value with "IG:" (for context) and also keeps the "newsletter" tag too, so you still know this user signup came from the newsletter form.

 

When a user submits this form you'll see they have a tag added, see image:

insta-tag.png

 

Hope this can help!

 

Warm regards,

Lee

Hallway
Shopify Partner
19 3 6

Hi @davestavros ,

 

I know this is an old question, but I thought I would update it with a modern answer that doesn't require coding.

 

Shopify have released their own "Forms" app which allows you to create a custom newsletter signup form, including custom fields (which are stored as customer metafields), and you can also assign tags if you wish.

 

The details are all on the Shopify help page here:

https://help.shopify.com/en/manual/promoting-marketing/create-marketing/forms-app

 

The Forms app on the Shopify App Store is below:

https://apps.shopify.com/shopify-forms

 

Please mark this as the accepted answer if it solves your question!

Matthew Hall - Founder @ Hallway
Shopify design, build, optimisation, support & consultancy
→ Was my reply helpful? Click Like to let me know!
→ Did I solve your question? Mark it as an Accepted Solution!