how to add 1 more field for contact form shopify liquid

Hi guys welcome back to Websensepro I'm your  host Bilal Naseer with another tutorial video  ,for you guys in today's Shopify tutorial  video we will be learning how to add custom  ,fields in the contact form of Shopify so after  following this tutorial you will be able to add  ,input field like this and you'll have you'll  be able to add a drop-down menu like this,a checkbox field,and the radio button fields,shopify doesn't have any option to add custom  fields through UI so you will have to do it via  ,code and all of the codes which you need to add  in the liquid file i'll share in the youtube video  ,description so if you want to learn stick to the  video and don't forget to subscribe the channel  ,comment in the video below if you have any  questions and keep watching so let's get into it,so, guys, that's how the default contact  form of the Shopify page looks like where  ,you have name email phone number, and comment  field now if you need to ask for additional  ,information from your user you can add an input  field drop-down field, and check box field  ,which I'm gonna show you how so in order  to do that let's go back to the back end,by navigating to slash admin and once you do that  after logging in you will see a screen like this,and from this screen from the left hand  side bar you need to click on online store,and from online store you will see your active in  this case we are editing the contact form fields  ,in dawn theme you might have any other theme  but the code should probably be the same okay  ,now click on actions and edit code before doing so  make sure to duplicate the theme in case you mess  ,up anything you can easily revert it back after  duplicating your theme you'll have it as a copy  ,like i have it copy of dawn so you can easily  revert it back by clicking on publish and then  ,redo the changes which you did wrongly  okay now go to actions and then edit code,and from there search for contact form and  here's the file which is contact form dot liquid  ,where we will be adding  additional code for input field  ,so first we will add our input field which will  show below phone number field in order to add it,you'll have to add the code on  line number 74 so that's the diff  ,for our phone field we'll be adding our  additional input field in line number 74.  ,so that's the code for input field  again don't worry about the quotes  ,i'll add a blog post in youtube video description  where you will find all of the code so you don't  ,need to mess up your up with the code okay we  have our input field added now click on save,and then go back to your page and hit refresh,and here we go our custom input  field has been showing up now,at the end of this video  after adding all of the fields  ,i'll do a test submission and i'll show you how  the value is being passed through contact form  ,okay instead of custom question if you want to  rename it what you will do is change it here for,name and id in order to do  that let me show you how,so ask for the user h,i'm going to say what is your age,and then replace the  placeholder with the same value,and here we can simply say age,similarly for id,and for attribute we can simply  say age now click on save,and then go back to your page and hit refresh  ,and here we go our newly input  field is now asking for your age,okay we were successfully able to add the  custom input field which was asking age now  ,we will add a drop down field now go back to  your contact form code and just below this  ,field will add additional drop down field so  that's the diff again the code you will found  ,in the youtube video description so  i'm going to paste this code here,okay now after pasting the code hit save,and now let's go back to our page and hit  refresh to see how the field looks like,okay so our drop down field in  shopify contact form has been added  ,but but as you can see it's looking a bit  weird if you compare it from other fields so  ,what we're going to do we'll add some css cord  go back to the code editor and search for base  ,then you will find the base.css file  click on that scroll down to the bottom,and add the code provided by  main youtube video description  ,so i'm just going to copy the  chord and paste it here click save,go back to the page and hit refresh,and here we go our drop-down fields looks  like the rest of the fields now cool right  ,now we will be adding our checkbox fields checkbox  field in shopify contact form and that's the code  ,for our checkbox field in shopify contact  form copy the code paste it below the drop  ,down menu code which we added so that's  the code for the drop down drop down  ,uh menu which we added in contact form  now hit enter and paste record hit save,go back to the page hit refresh,our checkbox field is showing up now now as  you can see we have a little spacing issue here  ,with this field so what we're going to do we'll  add the css code which is being provided i'm going  ,to copy the board go back to my base.css file  scroll down to the bottom and add the css code,hit refresh,now this should this court  should fix this spacing issue  ,in checkbox field of our contact form hit refresh,and there we go now we can see  it looks similar to what we have  ,uh in other fields the over effect and the  padding okay now the final is the radio buttons  ,code is already ready just copy the code paste  it below the checkbox field code which we added,in contact dash form dot liquid so that's our  checkbox field hit enter paste the code click save,go back to the page hit refresh  ,now we can see our radio button fields in shopify  contact form again this also have the spacing  ,issue which we'll be fixing through css so i'm  going to go back to my code file copy the css code  ,go back to the code editor click on base.css  file scroll down to the bottom paste the css cord  ,hit save,and now go back again and hit refresh,here we go okay so in this tutorial we added  a custom input field a custom drop down menu  ,custom checkbox field and custom radio  button field in our shopify contact form  ,now at the final stage we will test if all of  these drop down and the input field in the check  ,box radio button fields is passing on the value  to the email i'm going to do a test submission,what is your age 29 turns i'll select shipping  ,when is the best time to reach you you can  select morning how do you want us to contact you  ,just give me an email comment nothing  to comment about okay now hit send,and there we go our submission has been made  now i'm going to go back to i'm going to check  ,my email if we have received the submission  properly with the values which we pulled on,okay so as you can see we have our  submission showing up here click on that  ,and as you can see we have  all of the fields showing up  ,so these are the default ones name email  phone number and these are the custom ones  ,which we added age 29 request type shipping  contact time warning contact method email  ,okay cool right so we're done with this  tutorial guys make sure to comment on the  ,video below and let me know how can i improve  and contribute more to make you guys learn  ,about shopify web develop web designing and  development until next video have a great day

Congratulation! You bave finally finished reading how to add 1 more field for contact form shopify liquid and believe you bave enougb understending how to add 1 more field for contact form shopify liquid

Come on and read the rest of the article!