Saving custom data in shopify via liquid template

Question

I want to create a custom questionaire on a custom page and save the answer against the logged in customer.

I have made a custom page that is connected to a custom .liquid template which contains the following code:

{% if customer %}
  
    {% form 'customer' %}
  
      {{ form.errors | default_errors }}
  
      {% if form.posted_successfully? %}
  
        <div class="form--success">
            <div class="success">Thank you, we have saved your questionaire and calculated your programme.</div>
        </div>
        <br><br>
        
      {% else %}
  
        ... my html form here
    
        <!-- Save -->
        <span class="input-group__btn">
            <button type="submit" name="commit" class="btn">
                <span>Save</span>
            </button>
        </span>
        <br><br>
  
      {% endif %}
  
    {% endform %}
  
{% else %}

    <div style="custom-error">
        Not logged in, this feature is available for registered customers only!
        <br>
        <a href="/account">Click here</a> to register/login now.
    </div>

{% endif %}

My html form renders when I visit my custom page. What I am trying to figure out is how to save the form data (serialise the form data as json preferably) back onto the logged in customer on a custom metafield; when you click save.

Any idea?

Answer 1

From Shopify's Docs

Customize your form fields

To customize your form fields, you will edit the code from the above examples before saving them to your customer registration form template.

The name attribute

It is important that and elements have a name attribute that is set to customer[note][Some Text], where Some Text identifies what question the field is looking to answer. The customer[note] value is essential, as this is what allows the information to be submitted as a customer note. Without it, nothing will be submitted. The only part of the name attribute that you should edit is the text between the second set of square brackets.

So, you might try:

<input type="text" placeholder="" name="customer[note][Company]" required />

And that's gonna show up in their user profile like:

In the liquid on the other side, you'd have to use some regex, or perhaps dump the note into a .js variable and write a small interface to extract values by key.

(I understand that (sadly) metafields aren't accessible via form updates like this.)