Shopify Liquid Customer Register Form

Question

I'm trying to create my own custom register form. I did able to create to form but they are few thing are not working correctly. What I'm trying to achieve is when the user complete the form they default address lines should be filled out. At the moment all those informations stored as a notes. Here are some examples:

<div class="create-customer-div">   
  <div class="address-line-1">
    <label class="create-customer-label" for="address-line-1">Address Line 1</label>
    <input class="create-customer-input" id="address-line-1" type="text" name="customer[note][Adress Line 1]" placeholder="Address Line 1*" autocomplete="off" required />
  </div>

  <div class="address-line-2">
    <label class="create-customer-label" for="address-line-2">Address Line 2</label>
    <input class="create-customer-input" id="address-line-2" type="text" name="customer[note][Adress Line 2]" placeholder="Address Line 2" autocomplete="off" />
  </div>
</div>

Yes i did used "customer[note][Adress Line 1]" because that was the only solution i could find the display the address but thats not the right solution. Like i said when the user fills the form address and other informations should be stored to their account default address. Heres my full code

{% form 'create_customer' %}
  {{ form.errors | default_errors }}

<div class="create-customer-container">
  <div class="create-customer-form-div">
    <h1>Become a partner</h1>
  
<div class="create-customer-div">
  <div class="first-name">
    <label class="create-customer-label" for="first-name">First name</label>
    <input class="create-customer-input" id="first-name" type="text" name="customer[first_name]" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')" placeholder="First Name*" autocomplete="off" required />
  </div>
    
  <div class="last-name">
    <label class="create-customer-label" for="last-name">Last name</label>
    <input class="create-customer-input" id="last-name" type="text" name="customer[last_name]" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')" placeholder="Last Name*" autocomplete="off" required />
  </div>
</div>

<div class="create-customer-div">
  <div class="email">
    <label class="create-customer-label" for="email">Email</label>
    <input class="create-customer-input" id="email" type="email" name="customer[email]" placeholder="Email*" autocomplete="off" required />
  </div>

  <div class="phone">
    <label class="create-customer-label" for="phone">Phone</label>
    <input class="create-customer-input" id="phone" type="tel" name="customer[note][Phone]" placeholder="Phone* (Include Country Code)" autocomplete="off" required oninput="validateInput(this)" pattern="[0-9+]*" />
  </div>
</div>  

<div class="create-customer-div">  
  <div class="password">
    <label class="create-customer-label" for="password">Password</label>
    <input class="create-customer-input" id="password" type="password" name="customer[password]" placeholder="Password*" autocomplete="off" required />
  </div>
</div>

<div class="create-customer-div">   
  <div class="company-name">
    <label class="create-customer-label" for="company-name">Company Name</label>
    <input class="create-customer-input" id="company-name" type="text" name="customer[note][Company Name]" placeholder="Company Name" autocomplete="off"/>
  </div>

  <div class="customer-information">
    <label class="create-customer-label" for="customer-information">Tell Us Little Yourself</label>
    <input class="create-customer-input" id="customer-information" type="text" name="customer[note][Customer Information]" placeholder="Tell Us About Yourself" autocomplete="off" />
  </div>
</div>

<div class="create-customer-div">   
  <div class="address-line-1">
    <label class="create-customer-label" for="address-line-1">Address Line 1</label>
    <input class="create-customer-input" id="address-line-1" type="text" name="customer[note][Adress Line 1]" placeholder="Address Line 1*" autocomplete="off" required />
  </div>

  <div class="address-line-2">
    <label class="create-customer-label" for="address-line-2">Address Line 2</label>
    <input class="create-customer-input" id="address-line-2" type="text" name="customer[note][Adress Line 2]" placeholder="Address Line 2" autocomplete="off" />
  </div>
</div>

<div class="create-customer-div">   
  <div class="city">
    <label class="create-customer-label" for="city">City</label>
    <input class="create-customer-input" id="city" type="text" name="customer[note][City]" oninput="this.value = this.value.replace(/[^a-zA-Z]/g, '')" placeholder="City*" autocomplete="off" required />
  </div>

  <div class="country">
    <label class="create-customer-label" for="country">Country</label>
    <input class="create-customer-input" id="country" type="text" name="customer[note][Country]" oninput="this.value = this.value.replace(/[^a-zA-Z]/g, '')" placeholder="Country*" autocomplete="off" required />
  </div>
</div>

<div class="create-customer-div">   
  <div class="state-prov-region">
    <label class="create-customer-label" for="state-prov-region">State / Prov / Region</label>
    <input class="create-customer-input" id="state-prov-region" type="text" name="customer[note][State / Prov / Region]" oninput="this.value = this.value.replace(/[^a-zA-Z]/g, '')" placeholder="State / Prov / Region*" autocomplete="off" required />
  </div>

  <div class="postal-zip">
    <label class="create-customer-label" for="postal-zip">Postal / Zip</label>
    <input class="create-customer-input" id="postal-zip" type="text" name="customer[note][Postal / Zip]" placeholder="Postal / Zip*" autocomplete="off" required />
  </div>
</div>

<div class="create-customer-div">   
  <div class="tax-id-abn-vat-number">
    <label class="create-customer-label" for="tax-id-abn-vat-number">Tax ID / ABN / Vat Number</label>
    <input class="create-customer-input" id="tax-id-abn-vat-number" type="text" name="customer[note][Tax ID / ABN / Vat Number]" placeholder="Tax ID / ABN / Vat Number" autocomplete="off" />
  </div>

  <div class="upload-resale-documents">
    <label for="upload-resale-documents" class="custom-file-label">
      <svg class="file-upload-svg" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-arrow-up-fill" viewBox="0 0 16 16">
        <path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2m2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0z"/>
      </svg>
    Upload Resale Documents*
    </label>
    <input class="create-customer-input" id="upload-resale-documents" type="file" name="customer[note][Upload Resale Documents]" accept=".jpg, .jpeg, .png, .pdf" multiple required />
  </div>
</div>
          
<div id="selected-file-names"></div>
  
  <div class="create-customer-submit-div">
    <input type="submit" value="Create" />
  </div>

  </div>  
</div>
  
{% endform %}