how to implement awio contact form in shopify

in shopify the default contact form is,pretty basic,you pretty much only have name email,phone number and a message field but,what if you want to ask your customer a,few more questions right what if you,need to have a custom contact form most,people will use apps for this there are,a lot of form builder apps on the,shopify app store and they're pretty,good they allow you to build completely,custom forms but i think in many cases,they're kind of overkill because it's,actually easy enough to just copy and,paste some of the form fields,and create your own fields when you just,want to add a couple of extra questions,right so on my website for example i'm,asking people for,their,store url for their website because a,lot of my youtube subscribers use my,contact form so i'd like to know their,website we can also easily enough add,a drop down,or a check box,or radio buttons so that people can,toggle,it's not very difficult to do this stuff,so i want to teach you how to do that,and there's a few advantages to doing,this instead of using an app okay so,firstly you don't need to pay for an app,secondly it'll look nicer because it'll,be part of your theme it will still be,part of your theme design uh whereas,apps sometimes even though they let you,you know play with the,design of the fields they may not look,as,seamless when they're in your website,thirdly apps kind of slow down your site,a little bit you might notice that the,page loads first and then the app,form loads afterwards,and yeah in general i just try to avoid,apps in shopify when i don't really need,them,because if you use an app for every,single little thing that you need in,shopify then you'll have like 30 or 40,apps and you'll be paying five dollars,ten dollars a month for each one of them,and a lot of them will slow down your,store load a lot of extra code so i just,try to avoid apps wherever i can,and,that's partly what i teach on this,channel is how to get things down,without the use of apps so yeah i'm,gonna split this video into like three,different videos about 10 minutes each,because i just think that's the best way,to split up the subjects firstly i'm,going to show you how to,access the contact form code and how to,back up that code so that you can always,return it back to the default okay,next i'm going to show you how to remove,a field and how to change the,placeholder text of the fields so like,where it says name and email and all of,that you can change it to say something,else you can also change the the send,button you can change the thank you,message that people see after they send,the form so that's going to be part one,a nice slow introduction that's going to,be this video,then part two the next video is going to,be how to actually add custom fields so,i will probably show you how to add a,simple text field i might also show you,how to add a large text area then maybe,a drop down,maybe a check box something like that,and then in part three i'll show you how,to add completely different forms,on different pages of your shopify store,and it's still being the built-in,shopify form,but with completely different questions,so you might have a general contact form,and then you might have a contact form,for your custom made to order products,like an order form right,or you might have an application form if,you're a wholesaler you might have a,wholesale application form right or a,survey or anything else okay so that's,gonna be part three of this small series,so if you're interested in that make,sure you subscribe hit the bell icon,because youtube won't always show you my,new videos so if you hit the bell icon,you'll make sure that you don't miss,that video and yeah with that said let's,begin okay firstly let's talk about,creating a contact page this is pretty,simple and you might know this already,but there are a couple of important,notes that i want you to keep in mind to,create a page like this,you simply add a page,and then you select the contact template,the name of the page doesn't matter this,template is what matters okay,there is only one contact template so,there's only one form,so if you make any changes to this form,which i'm going to be showing you in,this video then those changes will,remain even if you create another page,and select this contact template again,okay it's not going to be a new fresh,copy of the contact form there's only,one contact form and it's the one that,we're going to edit now for this reason,and because we're going to be editing,code it's easy to maybe mess something,up so i think that you should do a,backup of your contact form template,just before we get started if you're,gonna follow along and actually if,you're gonna edit code it's always good,to do a backup anyway,so to do this we're just going to go,into actions edit code from the theme,page and we're going to search for a,file called contact form dot liquid okay,that's mainly what we're going to be,changing today let's just select,everything here i'm pressing ctrl a or,command a,copy,and then we're going to add a new,section,and call it contact,form,backup,dot liquid,okay,create that section,replace this okay so paste everything in,replacing,that or you can delete it and then paste,and save okay so now if you mess,anything up you can just grab all of,this paste it back into the main contact,form.liquid template and you'll be back,to normal,now that we have our contact page set up,there's a few changes that i want to,make right away firstly i don't like,this phone number field i really don't,need it then i want to change the word,comment to something like casual just,like what's up and then when the contact,form is actually sent there's a thank,you message that comes up that says,thanks for contacting us,uh this is a bit impersonal i would,rather say something like thanks for,getting in touch so i'm gonna change,that as well so let's do that now the,first thing is the phone number,i'm going to go back into the code,editor so once again you go through,themes,and then you go to actions and edit code,when you're in here you're going to look,for the contact form template again,hopefully you already made a backup and,here we're going to scroll down or we're,going to search,using ctrl for command f for the word,phone,so that we can see the,field right so we can find the div class,of field,that is wrapping this phone input you,should pay attention to the html,structure of this form template all of,our fields for example this text area,here,this is the big comment field,all of our fields are wrapped inside of,this div class field you see that,um if you're new to html this is an,opening div tag and this is a closing,div tag which has this slash at the end,so this is the actual field,and that's the part that we want to,remove,now you could just delete this,but i actually recommend commenting it,out so,in programming when programmers want to,add a comment maybe for another,programmer or for themselves in future,they write it like this,so what this does is basically,it tells the computer or you know the,server whatever is reading this code,to ignore what's between these comment,tags so this this won't be output on,your website it will be completely,ignored by the computer what ended up,happening is that,this became a very useful way to,actually hide something as well to hide,some code without completely deleting it,and so it's easy to bring it back at any,time now that i've put this end comment,tag,after this block of code this entire,block is going to be completely ignored,we can hit save and we can see that the,phone number field has disappeared now,if i ever want to bring the phone number,field back i can just delete these,comment tags,and it'll be back,the next thing that i wanted to show you,was how to change the words that are,used inside of these fields,so i want to change the word comment to,something more casual like what's up and,then i also want to change the wording,of the thank you message now we can do,this in code,okay we can find,uh where those words are and then we can,change them in code,but i actually don't recommend doing,that because there is a much easier way,and a much less destructive way right so,we don't need to mess with the code and,the way that i recommend is by editing,the language file so the language file,is something that you would usually use,if,your store is in another language and,you want to translate all of the button,text but even if your store is in,english but you just want to use,different words for certain things then,you can use the language file as well so,as you just saw you just go into actions,and edit languages and then here,you can search for things like for,example,comment i can search for the word,comment,and if i scroll down i'll see contact,form comment but instead of searching i,actually recommend going to this,part of the languages file templates,and then you will be able to see all the,fields relating to the contact form,so here we have templates,i'll click on that and then we'll scroll,down,and we can see contact form and this is,all the text relating to the contact,form so instead of comment i'm gonna,write what's up,let's hit save,and when i refresh this is gonna say,what's up great now for the thank you,message,here it is it's called post success,um and thank you for contacting us i'm,gonna write thanks for getting in touch,hit save and now you can test your,contact form just submit something if,you want to,see that thank you message,but you can also do something like this,so this part of the url will actually,show the thank you message because,that's what happens when you hit send,this gets added,so if you want you can actually just,type that out at the end of your url,here,you type question mark,contact underscore posted equals true,hashtag contact form okay and that will,show your thank you message without,actually sending the form but yeah,basically you can see that my text has,changed that is all for this part of the,tutorial in the next part i'm going to,be showing you how to create your own,fields like this website field that i've,added since you're watching this in the,future i've probably already made that,part of the tutorial so you will find,the link in the description in the,comments and at the end of this video so,you can go and watch that right now

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

Come on and read the rest of the article!