Store value from a form input field in a metafield

[Claudio4018]

Hi everyone

I really like the new metafields that Shopify introduced last year. However I'm having problems storing values from frontend forms to these metafields.

What I want to achieve is this:

Adding a client number field to my registration form and storing it in a previously added metafield on the customer.

I achieved storing the number as a client note, but I would prefere to store it as a metafield. So I generated a new metafield through the settings: customer.metafields.my_fields.number

But I couldn't figure out the correct way to store the users input to this new metafield. I tried a lot of things similar to the following code.

<label for="Number" >Number</label>
      	<input type="number" name="customer[metafields][my_fields][number]" id="Number" placeholder="" value="{{ form.number }}">

But no matter what I tried, the value was never stored in the metafield. What am I doing wrong? I also did a lot of reasearch but couldn't find any reference on how to store front end input values to metafields. I am greatful for any help.

Best

Claudio

[Plasmid]

Im trying to accomplish the same thing - any luck?

[Claudio4018]

Hi @Plasmid 

No, unfortunately not. I've also contacted Shopify support but they don't give technical advice. Besides that I have not invested more time in solving it, as it is not yet urgent for me. However there must be a way to accomplish it. I really like the new meta fields but not being able to store user input in them seems to be strange. So let's hope someone comes up with a solution.

Best

[Claudio4018]

I'm now storing all the needed values as tags. It works, but somehow it's a pity as meta fields would be the cleaner solution. However, if you are interested in my tag-based solution, let me know.

[Sushma09]

Hi Claudio,

Have you got some time to figure out the meta fields storing the input data? Could you please help me in this,

Else, which document should I follow for storing values in tags and using these tag fields in my code?

Your help would be appreciated

Thanks in advance,

Sushma

[Claudio4018]

Hi Sushma

Sorry, I thought that I wrote a reply some days ago. Obviously I haven't ... 😃
I couldn't figure out how to store input data in meta fields. However I can help you storing these data as tags. Do you want to store one or several input fields as tags?

Best

Claudio

[Sushma09]

Hi Claudio,

Several inputs. Want to create a pet profile linked to customer profile.

Thanks,

Sushma

[Claudio4018]

Hi Sushma

So if you wan't to store multiple values, you can not only assign them seperately, because then you're overwriting existing tags and only the last value gets stored. That's why you have to join all the values in one string and then assign it to the customer[tags]. 

Here is an example how I did it. Maybe there are better solutions. But so far it works for me.

       // Create input fields for desired tags. Change "variableX" to your liking.
       <input type="checkbox" id="variable1" name="tag_variable1" value="Variable1"/> 
        <label for="variable1" >{{ 'customer.variable1.tags' | t }}</label>

        <input type="checkbox" id="variable2" name="tag_variable2" value="Variable2"/> 
        <label for="variable2" >{{ 'customer.variable2.tags' | t }}</label>

        <input type="checkbox" id="variable3" name="tag_variable3" value="Variable3"/> 
        <label for="variable3" >{{ 'customer.variable3.tags' | t }}</label>

        // Script to join the values in one string.
        <script type="text/javascript">
            function join_tags()
            {
                var variable1 = document.getElementById('variable1').value;
                var variable2 = document.getElementById('variable2').value;
                var variable2 = document.getElementById('variable3').value;   
                document.getElementById('joint').value = variable1+","+variable2+","+variable3;     
            }
        </script>

        // Hidden field to store string of joint values
            <div class="field">
                <input type="hidden" id="joint" name="customer[tags]" value='joint'>
            </div>

        // On submit, execute the script above and assign the value to the hidden field
            <input type="submit" value="{{ 'customer.register.submit' | t }}" class="button expanded" onclick="join_tags();">

I hope that helps. 
Best,

Claudio 

[Rachelle5]

Thank you for this. I'm trying to solve the same issue using metafields. Helium Customer Fields gets close to doing what I need, but then I don't like that their boxes don't close like the address fields does. Bonify Custom Fields also gets close by using metafields, but then the input function is lost and users can't enter the data. 

Claudio, are the tags still working for you? Any limitations on getting the data to be read by other apps like Klaviyo?

[Claudio4018]

Hi Rachelle

Sorry for my late reply. So yes, tags still work for me. I don't use them with Klaviyo or similar apps but with a custom app which relies on those tags and it works fine. So I guess every app that can deal with tags should be able to access this information and work with it.

[Rachelle5]

Thanks. I have email flows that rely on that data intergration. I'll play with tags and see how it goes. I may have to have an app built for what I want ##- Please type your reply above 

[arrowmarketing]

This is something I've been wanting to achieve as well. Shopify support wasn't able to assist me either and unfortunately the only solution that HeyCarson could offer for me was via the customer note field you mentioned which we also already utilize. 😞 

Following along here in hopes someone else has an idea.

[Claudio4018]

Hi Arrowmarketing

Thanks for your reply.

We are actually using customer tags, not notes - but meta fields would make much more sense. Let's hope Shopify comes up with a solution. 

Best

[KarimTarek]

Out of the box it's not possible to create/update metafields from the storefront.
However last year I built a niche app (FieldsRaven) for theme developers to make it possible.

Your use case is perfect fit for the app, if you're comfortable working with code it should be really simple, otherwise you'll need some dev help. Here is the quick start guide.

If you've any questions please let me know.

[elnfhr]

Hi Karim! Sounds amazing! Will this work if I want to create a form with fields tied to custom metafields on customer profiles? your demo shop wasn’t really working for me, so I had a hard time understanding what the app can do ☺️ thanks!

[Rachelle5]

Great question. All of the apps seem to deal with everything except the customer profile where it makes the most sense when trying to expand the customer profile. My challenge is allowing the customer a way to edit their own custom data inside of their own profile, then have it read by Klaviyo or Omnisend. My research continues...

[KarimTarek]

FieldsRaven is perfect for allowing the customer a way to edit their own custom data inside of their own profile and syncing some or all of the data with Klaviyo – assuming that you're comfortable enough with code.

I created a wishlist theme feature on top of FieldsRaven before, here is the example. Also the example I shared in my comment above had the fields sync with Klaviyo.

And here is one last example of a Shopify customer registration with custom attributes.
I'm happy to shed more light if you want 🙂

[KarimTarek]

FieldsRaven can create/update metafields of the following types:

single_line_text_field
multi_line_text_field
number_integer
number_decimal
json

On the following resources:

• article
• blog
• collection
• customer
• page
• product
• variant
• shop

Now, your use case of creating a form with fields tied to custom metafields on customer profiles, is a perfect use case for the app, here is an example for collecting custom customer attributes on Shopify and update them on the frontend/storefront.

I hope that helps!