Add customer note from registration form

Sorryzor
Tourist
8 0 1

Hello,

 

I'm on the IMPACT theme.

 

 I have add 2 extra fields in the registration form.

- Company name (Société)

- Company ID number (SIRET)

 

But these two new fields are not recorded as a note in the customer file.

Below you can see in the code that I have added.

 

Could you help me please ?

 

thank you

 

<div class="sm:container">
  <div class="customer-form">
    {%- if section.settings.image != blank -%}
      {{- section.settings.image | image_url: width: section.settings.image.width | image_tag: loading: 'lazy', sizes: '50vw', widths: '300,400,500,600,700,800,1000,1200,1400', class: 'customer-form__image rounded' -}}
    {%- endif -%}

    <div {% render 'surface', class: 'customer-form__box', background_gradient: section.settings.background_gradient, background: section.settings.background, text_color: section.settings.text_color, background_fallback: 'bg-secondary' %}>
      <div class="customer-form__box-inner text-center">
        <div  class="v-stack gap-12">
          <h1 class="h2">
            {%- assign content = 'customer.register.title' | t -%}
            {%- render 'styled-text', content: content, gradient: section.settings.heading_gradient -%}
          </h1>

          <div class="v-stack gap-6">
            {%- for block in section.blocks -%}
              {%- case block.type -%}
                {%- when '@app' -%}
                  {%- render block -%}

                {%- when 'liquid' -%}
                  {%- if block.settings.liquid != blank -%}
                    <div {{ block.shopify_attributes }}>
                      {{- block.settings.liquid -}}
                    </div>
                  {%- endif -%}

                {%- when 'fields' -%}
                  <div {{ block.shopify_attributes }}>
                    {%- form 'create_customer', class: 'form' -%}
                      <div class="fieldset">
                        {%- if form.errors -%}
                          {%- assign form_errors = form.errors | default_errors -%}
                          {%- render 'banner', status: 'error', content: form_errors -%}
                        {%- endif -%}
                      
                        <p class="additional-text">Informations personnelles</p>
                        {%- if request.locale.iso_code == 'ja' -%}
                          {%- assign last_name_label = 'customer.register.last_name' | t -%}
                          {%- render 'input', name: 'customer[last_name]', label: last_name_label, autocomplete: 'family-name', required: true -%}

                          {%- assign first_name_label = 'customer.register.first_name' | t -%}
                          {%- render 'input', name: 'customer[first_name]', label: first_name_label, autocomplete: 'given-name', required: true -%}
                        {%- else -%}
                          {%- assign first_name_label = 'customer.register.first_name' | t -%}
                          {%- render 'input', name: 'customer[first_name]', label: first_name_label, autocomplete: 'given-name', required: true -%}

                          {%- assign last_name_label = 'customer.register.last_name' | t -%}
                          {%- render 'input', name: 'customer[last_name]', label: last_name_label, autocomplete: 'family-name', required: true -%}
                        {%- endif -%}

                        {%- assign email_label = 'customer.register.email' | t -%}
                        {%- render 'input', type: 'email', name: 'customer[email]', label: email_label, autocomplete: 'email', required: true -%}

                        {%- assign password_label = 'customer.register.password' | t -%}
                        {%- render 'input', type: 'password', name: 'customer[password]', label: password_label, minlength: 5, autocomplete: 'new-password', required: true -%}

<br><p class="additional-text">Informations de l'entreprise</p> {%- render 'input', note: 'customer[note]', label: 'Société', autocomplete: 'organization', required: true -%} {%- render 'input', note: 'customer[note]', label: 'SIRET', autocomplete: 'siret', required: true -%} {%- if block.settings.show_email_consent -%} {%- assign consent_label = 'customer.register.accepts_marketing' | t -%} {%- render 'checkbox', name: 'customer[accepts_marketing]', label: consent_label -%} {%- endif -%} </div> {%- assign submit_label = 'customer.register.submit' | t -%} {%- render 'button', content: submit_label, type: 'submit', size: 'xl', stretch: true, secondary: true, background: section.settings.button_background, text_color: section.settings.button_text_color -%} <div> <a href="{{ routes.account_login_url }}" class="link text-subdued">{{ 'customer.register.login' | t }}</a> </div> {%- endform -%} </div> {%- endcase -%} {%- endfor -%} </div> </div> </div> </div> </div> </div>

 

Replies 3 (3)

Brett_Helium
Shopify Partner
182 36 63

Hey @Sorryzor!

I am not sure how (or if it's even possible) to do this in Liquid, but you can create a custom input that saves directly to a customer note using an HTML input with the following format, based on Shopify's guide here.

<div class="birthday">
    <label for="birthday">Birthday</label>
    <input id="birthday" type="date" name="customer[note][Birthday]" />
</div>

 

Otherwise, it would also be possible to accomplish this without coding by using an app such as Helium Customer Fields, which allows you to save custom data directly into customer metafields, and has an option to save the data into the note as well. If you're interested, you can try the app free for 14 days from the Shopify app store here.

Brett | Helium
Helium builds apps that thousands of merchants depend on:
- Customer Fields ✪✪✪✪✪ (330+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (250+ reviews)
Sorryzor
Tourist
8 0 1

Hello Bret,

 

I tried an other code

 

{%- assign companyname_label = 'customer.register.companyname' | t -%}
{%- render 'input', name: 'customer[note][Société]', label: companyname_label, autocomplete: '', required: false -%}

{%- assign companyid_label = 'customer.register.companyid' | t -%}
{%- render 'input', name: 'customer[note][SIRET]', label: companyid_label, autocomplete: '', required: false -%}

 

It works well but I have this error message on the register form. I need to see company ID and company name.

Sorryzor_1-1702642115696.png

 

Could you help ?

Brett_Helium
Shopify Partner
182 36 63

Hey @Sorryzor, sorry I am really not familiar with translations at all. A good place to start would probably be to see if you can add translations for these items through the translation app you are using.

Brett | Helium
Helium builds apps that thousands of merchants depend on:
- Customer Fields ✪✪✪✪✪ (330+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (250+ reviews)