Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Add custom fields to newsletter signup (Dawn Theme)

Add custom fields to newsletter signup (Dawn Theme)

hello20
New Member
4 0 0

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!

 

 

Replies 3 (3)

Vortifytech
Shopify Partner
54 9 10

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>


 

Do you need Shopify experts?Get in touch on WhatsApp
Expertise in (Theme Development | Customization | Modifications | Bug Fixing and much more )
Blending Your Coffee advice with My Code, a Perfect Mix!
Transforming Your Shopify Aspirations into Reality – Join the Conversation and Craft Together Visit our site
hello20
New Member
4 0 0

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!

shopjobie
Tourist
5 0 1

Where do you add this code please?