How can I add an Instagram username field to newsletter signups?

[davestavros]

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! 

[Kani]

Hi @davestavros 

You can add these fields in your Newsletter form

<input name="contact[first_name]">

<input name="contact[last_name]">

[KetanKumar]

@davestavros 

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

[davestavros]

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]

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

[Kani]

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">

[leefrankis]

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:

Hope this can help!

Warm regards,

Lee

[Hallway]

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!