how to edit shopify contact form

hey this is young from let's go chopper,fire and today I will quickly show you,how to set up a contact page if you,don't already have one and then we get,into customizing the default form if it,doesn't quite fit your needs and,actually the things that we will learn,today are fairly simple not too,complicated but still I'm very excited,to make this video because by preparing,it I had the idea that in my next video,I will show you a very practical use,case of all the things that we will,learn today and then I will also explain,why some developers can charge a hundred,or even above dollars per hour for their,services even if they don't always,require some advanced technical skills,so this is going to be super interesting,for all the freelancers and developers,in the audience,make sure to watch out for that but,today we have to learn the basics first,and let's get into it all right setting,up a contact page can be done in 20,seconds you would just go to the pages,section of your Shopify admin dashboard,and you click on add page and we could,call it contact or contact us doesn't,really matter and you can also add a,short description maybe contact us here,for simplicity now and most important,you would apply the page template to,page contact and then save it,on the front end you would see that this,already brings up the default contact,form and you can see this is nothing too,fancy we have the page content on top,followed by two text fields that are,taking half of the container with then,we have one full row text field and down,below a text area followed by the submit,button and we can already keep the,structure in mind so that we will have,an easier time getting an overview in,the theme files soon but one other thing,is very important and that is when,someone submits this form Shopify will,send you an email and they will send it,to the customer email that you can set,up in the general store settings so I,would just search for general and this,would bring up the general settings and,then you can enter the customer email,right here alright next we will start,adding some new fields to the contact,form itself so therefore I will navigate,to my theme files and here's this little,action button and then go to edit code,this would bring up with a Shopify theme,file editor and in the templates section,I would search for the page table,contact template and actually I would,copy everything in here and then I would,create a new template just so that we,have the backup it's a new page template,and we could call it contact - custom,create the template and paste everything,in here and then save it and now that,we've created the custom page template,we would also need to go back to our,page and then apply this template right,here and save the change all right so,before we start making some,customizations to our new contact page,template let's get ourselves an overview,and therefore I switch to full width and,zoom in a bit so you can read this,better and let's start from top to,bottom so we can see on top we have a,few container elements that should limit,the content width on the page and down,here we have the page title put out to,the page and down below we can see the,page content is put out with the page,and here it starts to get interesting we,see the opening form tag and everything,that is in between the opening form tag,and this end form tag right here makes,up the actual contact form and if you,are very new to HTML you might find my,intro video on that helpful I will link,it in the top right corner but for now I,think we can walk through this,together so the first thing I want to,draw your attention to is that every,input field on the front end is actually,made up of two elements in HTML and,first we have a label element to,describe what kind of input we expect,from the user and then we have some,markup for the actual text field or,input box however you want to call it,and just by reading them through we can,identify all the elements that we,currently have on the front-end so for,instance here we have the label for the,contact form name and the corresponding,input is of type text and further down,we have the label for the contact form,email and the input is of type email,which is basically text as well but with,some validation and further down you can,find a label for the phone number and,the corresponding input element then we,have a label for the customer message,and the text area with ten rows down,below and last but not least we find an,input element of type submit' which is,the send button and you can see it's,very easy to associate the elements from,the front end with the corresponding,code and now that we've identified all,these input elements we could already,start removing unwanted ones so for,example if I don't want to ask the,customer for his phone number then I,could remove these two lines and then,save the change and after refresh on the,front end the phone number field should,be gone and it is but we don't want to,limit this to removing fields but,instead we want to be able to add custom,ones okay so the first custom field that,we will add to our contact form will be,a drop down menu to ask the user for his,or her concern and this will help to,segment these emails better and you can,prioritize them better or maybe even,process them faster and it's not too,complicated to do so we will start by,adding a label element and this should,describe what the input field is for so,we will go with what's your concern for,now what's your concern and down below I,will create a select element and in,between this select element we will add,a few option elements so option one,maybe we can go with three options,and the first one will be lets say,question regarding a product and then we,could have question regarding your order,and third we could have let's say,partnership in marketing and maybe we,could even add a fourth option if none,of these fit very well we could just say,other and now comes the most important,part because we have to add a name,attribute to our select element and this,name can't be anything it needs to be,very precise contact and in square,brackets and in between these you could,write any text so for example customer,are concerned but this is the only way,that it would get picked up from the,Shopify system if a user sends the phone,and then there's one more thing we need,to do and that is tell the label element,for which input element it is meant to,be and therefore I will edit for,attribute and to reference our new,select I will first need to give it a,unique ID and for now we could go with,let's say contact - concern and then I,can say the label element should be for,contact concern or better to say for the,input element with the ID contact,concern and now after saving our new,changes we can have another look at the,front end and after refreshing the page,we should now see our new drop-down and,it seems to work fine and what about,adding another text field but this time,I don't want it to take the full,container width but instead only half of,it like the text fields above - let's,figure it out so back in the theme files,I will now scroll back up to the top and,we already saw the input element or the,customers name and the input element or,the customers email and we can see that,both of these elements are wrapped in,between one container element that is,called grid and both of these elements,have an individual container with the,class of grid item and the modifier,class,medium up - - 1/2 and that class,suggests that on every device with the,screen size of medium and up we want,this container to take 1/2 of the,available width so I think in order to,add a new element we can just copy this,container and I will paste it right,before the end of the grid and close the,HTML tag and now we can implement our,new text input in between this container,so I will start with the label element,again and down below I will have an,input of type text and maybe we could,ask for the users company and maybe you,are selling on a b2b shop or something,so we would add a company and text ok,and now the most important thing again,we need to provide a name attribute and,it has to be contact square brackets and,then some arbitrary text so we could go,with company and then save the new text,field and after another refresh you,would now see our new company field and,it seems to work just fine and obviously,for aesthetics reason you want to put,another half with text field right next,to it but if you don't have another then,you can make this full width and pull it,outside all the grid containers and half,width containers but right here this is,just for demo purpose all right last but,not least I will show you how I can add,some radio buttons because some people,like them moreover these drop-down menus,and let's work on that so once again,back in the theme files,I would scroll down to the bottom and,maybe in between the text area and the,submit button we can add a new label,element and let's do or we could ask the,user how we discovered the shop so we,could ask how did you hear about us,and then we would add a few input,elements but let's do one first so how,we go with input and the type will be,radio and we also have to add the name,attribute again so name will be you,guessed it,contact square brackets and let's do,discovery and now we could copy this,element three times or let's say two,more times and at the end of each,element I will add a break line tag so,that it drops to a new line and,otherwise they would be just in line,which is also fine and here we can edit,the description so the options could be,Facebook and Instagram or other and then,we would also need to provide a value,attribute because the description,actually doesn't matter and only the,value in the value attribute will be,submitted so here we could go with,Facebook Instagram or other and then,save our new changes and after the next,refresh we should now see our new radio,buttons and here they are and they seem,to work fine but one thing that I notice,is we can't select them by clicking on,the text and that's not the best,usability so let's fix that really quick,and to do so we would need to wrap our,plain text description inside a label,element so I will create a label element,and I think we can,just copy this two times and then I,would cut and paste the description in,between that label element and our would,again need to tell the label to which,radio button it belongs so I will,provide the four attribute and in order,to reference this value these radio,buttons we need to provide an ID again,so the ID could be discovery Facebook,and the next one could be discovery,Instagram and discovery other so let's,do this was copy-paste Instagram and,Alma and then this one could be for,discovery Facebook this one could be for,discovery Instagram and this one could,be for discovery other hope this wasn't,too fast and make some sense and when I,save this one more time and check the,front-end again,improved usability nice all right let's,before today's video and I really hope,you learned something new and you will,be able to implement all the,customizations that you come up with and,as I mentioned in the beginning in my,next video I will show you a very,practical use case of everything that we,learned today and then I will also talk,about how you should price yourself as a,freelancer or web developer if you're,implementing such things so this is,going to be super interesting and for,yourself invited to subscribe and if you,have questions you can always leave them,down in the comment section and I really,hope to see you back then I

Congratulation! You bave finally finished reading how to edit shopify contact form and believe you bave enougb understending how to edit shopify contact form

Come on and read the rest of the article!