All things Shopify and commerce
I am trying to add custom fields to my newsletter sign up form. Right now the only field in the newsletter sign up is "email." I would like to add a field for first name, last name, and zipcode. Ideally I would like to make changes to the code and not worry about adding an additional app to do this.
I am currently using Dawn 2.0 and have made the latest update to 12.0. Any suggestions would be much appreciated. Thank you!
Hello @hello20 !
Hope you are doing well.
Use these two fields where there is Email field in the code , use these both before the Email field code. Make sure the code you will paste should be within the { form }.
Style fields accordingly.
Thanks
code for First name :
<style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top:0}.custom .field__input{padding-top:0.8rem}</style>
<label class="form__label custom" for="first-name">First name</label>
<div class="field custom">
<input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="first-name" name="properties[First name]" required>
<script>
document.addEventListener("DOMContentLoaded", ()=>{document.querySelector("form[novalidate]").removeAttribute("novalidate")})
</script>
</div>
code for Last name :
<style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top:0}.custom .field__input{padding-top:0.8rem}</style>
<label class="form__label custom" for="last-name-">Last Name </label>
<div class="field custom">
<input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="last-name-" name="properties[Last Name ]" required>
<script>
document.addEventListener("DOMContentLoaded", ()=>{document.querySelector("form[novalidate]").removeAttribute("novalidate")})
</script>
</div>
Thank you so much for your response! Could you be a bit more specific about where to place this code? Is it in "email-signup-banner.liquid" under "sections"? If so, where exactly do I place it? I'm sorry, I don't have much coding experience. Thank you for your help!
Where do you add this code please?
In Canada, payment processors, like those that provide payment processing services t...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025