Custom Fields for Shopify User Registration Form

Custom fields for Shopify User Registration Form

Save your pet name in a tag, or a note since those exist for customers. pet_name obviously is not a customer field.

<p>
  <label>Pet Name:</label>
  <input type="text" value="" name="customer[note]" class="input-text-1" />
  <input type="radio" name="customer[tags]" value="cat">Cat
  <input type="radio" name="customer[tags]" value="dog">Dog
</p>

how to add custom field in customer registration page in shopify?

There is no way to show a note field in the front end but you should be able to store it the way you are saving it.

If you like to output something you will have to use a tag instead.

For example: <input type="text" class="field" name="customer[tags]" value="" >

And you will have access to the tags from customer.tags. That way you will be able to show the tag/field.

Shopify DAWN Theme - Add custom fields in Cart page and Show results in Orders Admin panel

The UI generator mise form="cart" this will make the magic. It will add the element to the cart form no matter where they are on the screen.

Why use that? well, remember the principle on 2.0 is flexibility using blocks, apps blocks, moving it around the screen, organizing differently, etc. form="cart" give this flexibility on the cart page

I use something like that on an app I write to add PO numbers on the orders.

The result using the UI generator should be:

    <p class="cart-attribute__field">
      <label for="long-custom-text">Long Custom Text</label>
      <textarea 
        required 
        form="cart" 
        class="required"
        id="long-custom-text" 
        name="attributes[Long Custom Text]"
      >
        {{ cart.attributes["Long Custom Text"] }}
      </textarea>
    </p>

the other very important part is Name the part inside the braquets is how it will appears on the admin side and how you should search the info on the order name="attributes[Long Custom Text]"

You can change what is inside the brackets Long Custom Text but the rest of the name should be there.

<input type="text" name="attributes[other custom Atribute]" form="cart" />
<input type="email" name="attributes[custom email]" form="cart" />

Shopify validation for custom attribute fields in cart page

I figured out the issue here

I changed the checkout button from type="submit" to type="button" and changed the name attribute of checkout button to "checkout1". I'm not sure how these things affecting the form submission, but i had to do these.

Then I commented out these default form submission code in the cart page footer file:

document.querySelector('#checkout').addEventListener('click', function(event) {
   document.querySelector('#cart').submit();
 });

Also implemented the below validation code in custom js file:

document.querySelector('#checkout').addEventListener('click', function(event) {
  event.preventDefault();
   let errors = 0; 
document.querySelectorAll('input.required').forEach((input) => {
  let val = input.value;
   console.info(val.length);
  if(val.length == 0){ 
       errors = errors + 1;
   }
});

if(errors > 0){
  alert("Please fill all the required fields.");
    return false;
}
else if(!document.querySelector('#disclmr-chk').checked) {
      alert("Please check the checkbox.");
      return false;
    }else{
document.querySelector('#checkout').setAttribute('name', 'checkout');
document.querySelector('form#cart').submit(); }});

Link for new template for register

Any new template can be accessed front end by using "?view=" in the webpage URL

For your case try /account/register?view=xyz

---

Related Topics