How can I create multiple tags from text field input for newsletter subscribers?

Store Design
1

Hey Everyone !

I have created a form for people to subscribe to my newsletter and i would like to classify them by getting their gender and size (i’m in the garment industry). So i need to create tags.

I achieved to create the tag “newsletter”, which will be the same for everyone subscribing.

No i need to get both the size and gender on text field input and know it must be:

 (newletter, something(size), something(gender))

but i don’t know exactly what.

Here is the code:

//tag line//:

{%- form “customer”, class: “subscribe-form-flex” -%}

{%- form "customer", class: "subscribe-form-flex" -%}

//text field line:

Size:

Gender:

My text field IDs are then:

  • Size
  • Gender

Any idea, someone ?

Thank you in advance !

2

Hi @Alexandremoine ,

Because newsletter form only supports contact tags so if you want to add fields you need to add JS code to add value to the field.

First, you need to create 2 fields like your request, when a customer enters data for it you need to add JS code so that it adds value for ‘contact[tags]’.

Hope it is clear to you.

3

Hi ! Thanks for the reply !

Is that what you meant ?

Capture d’écran 2022-07-03 à 10.10.58.png
Capture d’écran 2022-07-03 à 10.10.58.png564×486 66.1 KB

Does this add data already to the ‘contact[tags]’ ?

Hope I understood it well.

4

Hi @Alexandremoine ,

Logically yes, but your code is incorrect. It would be code like this: https://www.javascripttutorial.net/javascript-dom/javascript-change-event

And you need to add conditions to it, like check if Size value exists to change.

5

Thanks for your reply !

here is what i have for now:

<div id="Form7" class="form-block-7 w-form">
          {%- form "customer",  class: "subscribe-form-flex" -%}
          <input type="hidden" name="contact[tags]" value="newsletter">
            <div class="subscribe-form-input-wrapper">
                <input type="email" class="subscribe-form-input w-input" maxlength="256" name="contact[email]" data-name="Email" placeholder="Enter your email address..." id="Email" required="">
            </div>
          <input type="submit" value="Join" data-wait="Wait..." id="Form7SubmitButton" class="cart-button desktop _2nd w-button">
            <div data-w-id="d73250cb-edf3-eb2e-fa2b-510fffca93fd" style="opacity:1" class="join--button-screen">
              <div class="text-block-36">{{ 'tn36610a88' | t }}</div>
            </div>
            <input type="text" class="text-field-6 desktop w-input" maxlength="256" name="contact[note][size_]" data-name="Size 2" placeholder="" id="Size">
            <input type="text" class="text-field-7 desktop w-input" maxlength="256" name="contact[note][gender_]" data-name="Gender 2" placeholder="" id="Gender" required="">
          {%- assign form_success = form.posted_successfully? -%}
          <script type="text/javascript">            $('#Form7 form').submit(function (e) {
                var $formTags = $("#Email");
                var preferences = $("#Size").val();
                $formTags.val($formTags.val() + "," + preferences);
                return true;
            });
        </script>
          {%- assign form_errors = form.errors -%}{%- render "form-general-script", form_success: form_success, form_errors: form_errors -%}{%- endform -%}
          <div class="success-message-5 w-form-done  {% if form_success %}form-posted-successfully{% endif %}">
            <div class="div-block-142">{{ 't5a0ea5a1' | t }}</div>
          </div>
          {%- unless form_success -%}<div class="w-form-fail  {% if form.errors %}form-has-errors{% endif %}">
            <div>{%- render "form-errors", form_errors: form_errors -%}</div>
          </div>{%- endunless -%}
        </div>

If I understand well, the Jquery section should change to a “OnChange” event right ?

Someone else, on Stackoverflow recommended this:

https://stackoverflow.com/questions/72845109/multiple-tags-from-text-field-value/72852742#72852742

Thanks again !

6

Hi @Alexandremoine ,

If you want to use jquery, the theme needs to install the library for it.

Can you send me the site link, I will check it for you.

If things are uncertain, I recommend you to hire a experts for it, they will help you edit it quickly.