Question 11699 in Shopify Question posted in
The Shopify help center can be found here.

Multiple Tags From Text Field value – Shopify

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.

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

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

Here is the code for the contact[tags]:

{%- form "customer", class: "subscribe-form-flex" -%}<input type="hidden" name="contact[tags]" value="newsletter, ">

For the size:

<input type="hidden" class="text-field-6 desktop w-input" maxlength="256" name="size_" data-name="Size 2" placeholder="" id="Size" value="Size" >

For the Gender:

<input type="hidden" class="text-field-7 desktop w-input" maxlength="256" name="gender_" data-name="Gender 2" placeholder="" id="Gender" required="" value="Gender">

My text field IDs are then:

Size

Gender

Any idea, someone ?

Thank you in advance !

Tags:

2

Answers


  1. 0

    There are probably other solutions, but what I have done to solve a similar problem is

    <div id="my_form_container">
{%- form "customer", class: "subscribe-form-flex" -%}
    <input id="form_tags" type="hidden" name="contact[tags]" 
value="newsletter">
        <div id="select_container">
            <select required="required" name="sizes" 
onchange="var opt=this.options[0];if(opt.getAttribute('role')==='placeholder'&&!opt.selected)opt.parentNode.removeChild(opt);/*This is just to remove the placeholder*/" 
id="form_sizes">
                <option role="placeholder" value="">Size...</option>
                <option>S</option>
                <option>M</option>
                <option>L</option>
                <option>XL</option>
            </select>
        </div>
 {% unless form.posted_successfully? %}
            <script type="text/javascript">
                $('#my_form_container form').submit(function (e) {
                    var $formTags = $("#form_tags");
                    var preferences = $("#form_sizes").val();
                    $formTags.val($formTags.val() + "," + preferences);
                    return true;
                });
            </script>
        {% endunless %}
{%- endform -%}
</div>

    So in practice you have your form with your inputs (I have added just the size) and then, before you submit the form, you modify the tag input to have all the tags you need.

    I don’t know your level of Javascript, let me know if you need more details.

    Login or Signup to reply.
  2. 0

    For a Shopify store that doesn’t use JQuery, you can use the below code.

    Firstly create a hidden input with the name="contact[tags]" to point it at the Shopify tags field.

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

    Get all of your inputs and concatenate them using comma separation which will send these as separate tags.

    <script>
  document.querySelector("form#contact_form").addEventListener("submit", function(e){
    const maleSize = document.getElementById("male-shoe-size").value;
    const femaleSize = document.getElementById("female-shoe-size").value;
    
    document.getElementById('form_tags').value = maleSize + "," + femaleSize;
  });
  </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search