shopify contact 1 form error this field can be empty depending on user input. how to correct this?

in this video I'm gonna show you how you,can customize your contact form on your,Shopify site without needing any,additional apps we can use whatever,theme that you have and add in,additional customizations like a drop,down menu textbox check marks and other,fields that you can add into your,contact form to collect additional,information so stay tuned,thanks so much for watching and my name,is Elle McCann and I've been a Shopify,expert for over six years now if you're,new to this channel we post videos all,about Shopify and how to grow your,online store and if you've been here a,subscriber here for a while thank you so,much and we really appreciate you so,this video was actually a recommendation,from one of our subscribers Mitsubishi,Hashimoto and I hope I say your name,right,but he had commented on a previous video,of a suggestion for how to customize,your contact form on your Shopify site,and we thought it was a great idea and,wanted to do a video on it so if you,have an idea that you think we should,make a video tutorial out of make sure,to comment on any of our videos and we,might just make a video about it okay so,his original comment was asking exactly,how to customize your contact form on,your Shopify site and add in additional,fields like a drop-down menu text field,and checkboxes so you may want to,customize your contact form just to get,additional information from people who,are contacting you you may need to get,additional specs or know what product,they purchased or want them to put in,their order number if you're going to be,providing support or in their order,there are many different reasons why you,want to add additional field and that's,what we're going to be showing you how,to do in this video but we're going to,be showing you how to do that without,the use of a Shopify app now there are a,lot of Shopify apps out there that will,let you customize your contact form,fairly simply but it's also really easy,to edit it on your site you just need to,know a little bit of HTML and CSS to do,that now I know I'm saying this and,people are going oh my gosh I don't know,what but no worries I'm gonna walk you,through that exactly now I will say if,you want additional fields for your,contact form like an image upload or you,want to handle sensitive information,like if you want to collect payment,through the contact form I recommend a,software called jot form that will let,you really highly customized a form and,then embed it on your site so I would,recommend doing that instead of building,it all out with Shopify's form just,make sure that it's more secure but if,you're just wanting to add additional,fields like a text field a drop-down,menu or a checkbox to get them to accept,certain terms then this is going to be a,great option for you okay so let's go,ahead and hop into my screen so just go,ahead and minimize the video and put me,to one side of your desktop and then put,your Shopify store to the other side and,we're going to walk through this,step-by-step so you don't have to be,scared at all of editing the code on,your site so let's get started okay so I,am back in my Shopify store back in now,and if you go to the themes area by,clicking on online store and then themes,you'll see your themes area here with,your active theme on your site so this,is my theme which is the handy theme,which we have gone through customizing,this in a previous video so if you're,interested in either this theme or how,to customize your Shopify store I will,put a link to that in the info cards,above but you are going to want to edit,this theme and you're just going to,click on actions and then edit code and,now you see all of the different files,the template files on your site so be,very careful of what you're editing,because you don't want to make any,changes to pages that you don't want to,so you'll see here that we have a page,contact dot liquid so this is under the,templates area and you'll have somewhat,of a contact form page there and it'll,typically say contact in it so we're,going to click on this to open it in the,right-hand side so you can see now we,have all of our code for this page and,what we're wanting to edit you're going,to want to see where it says form,contact and that form area anything,between this beginning form tag and the,ending form tag is all your actual,contact form so we'll edit inside this,area so I'm going to go to the front end,of this site so you can see this is our,contact page now very very basic and so,we're going to add in a couple different,forms here so right now we have a name,field an email address phone,of our end message so we can add in some,additional ones as well so if we come,back to our Shopify store our label that,you see here this is contact form name,so back at the Shopify store area this,is our name area so that is the label,and then this will be the input field so,if we come back there this is the input,field here and then you can see that we,also have this div that is an input,wrapper and this is wrapping the whole,area so we have that starting here and,ending here so it's just keeping that,together so what we're going to want to,do so first off each theme is going to,be different slightly on how they do,this but what we want to do is make sure,that what we're adding in goes with your,existing Shopify theme so we are going,to add in this field let's actually we,could take out maybe the the phone if we,don't want the phone or we can add it in,underneath it so I'm gonna just copy,this so I'm gonna copy the full element,of this input wrapper and the label and,input so again it's gonna be different,for your theme but you want to just copy,any styling that you have around that so,I'm gonna just copy it and then I'm,going to hit enter twice and I'm going,to paste it underneath now we want our,field to be different so let's say for,this first one that we actually add in a,drop-down menu so I'm going to actually,highlight the label and input field and,I am going to just delete those so now,we have our kind of blank area that we,can add in our code in the middle now I,have pulled up in a separate tab and,linked to a Shopify form area that shows,you the exact fields that you can add to,your contact form so we have a text,field which we already have on our site,like the name and the email address,radio buttons a drop down menu and a,check box so these are your available,fields to add in into your contact form,so let's go ahead and add in a drop-down,menu,I'm just going to copy this so we can,see here we have our label and instead,of an input now it's a select field,because it's a drop-down and you can,only select one so I'm going to copy,that and go back to my Shopify store and,I'm going to just paste it in and so now,you can see that we have kind of the,default of what they had for their,labels so it says choose a flavor so we,don't really want it to be that we're,gonna choose it to be specific for us so,maybe we make this field like how did,you hear about us,so I'm just typing in the question that,we want to show up above the form into,this label area and then you can see,here it says label four so we're gonna,follow the same formatting that our form,already has so we have contact - form in,previous ones so I'm gonna just copy and,paste that here and I'm gonna change,form or phone to how this is more just,for keeping it all organized and I'm,gonna do the same for the Select field,as well you can see here the label and,the input field were the same for the,four and the ID so I'm gonna make that,the same as well and I'm going to change,this name contact to not be flavor,because again that's not relevant to us,so I'm going to just change this to how,again so this way it all appears,correctly whenever the email is actually,sent when someone fills out this form so,now you have these different options and,again this was a cheese your flavor so,it's chocolate vanilla and strawberry in,this example but we can go ahead and we,can change these to be however you want,it to be so how did you hear about us so,we could put in things like Facebook or,Instagram okay or let's even say YouTube,so we can have a couple different,options and if you wanted to add even,more you could just copy this and you,could paste as many as you want,one after the other so you would just,fill it up as much as you want it to to,give them all the different options so,I'm going to just delete that and we'll,have our three options and hit save,and now let's go back to the front end,of our Shopify store and I'm going to,refresh it to see how it looks now okay,so now you can see our form here and we,have a drop-down menu of Facebook,Instagram and YouTube however it looks a,bit different from the rest so this is,just based on how our theme is stylizing,it you may actually see that this is,exactly how you want it to,be right off the gate however in this,case it's not exactly right so for,example the the drop-down menu is right,next to the words where on this example,we have our words kind of on a separate,line so what I'm gonna do is I'm gonna,go back to my Shopify store and I'm,gonna add in some styling so in front of,this label area I'm going to type in the,word style and then do an equal sign and,then two quotation marks and this is,gonna let us stylize everything so I'm,going to make this I'm going to type in,width 100% and end it with a semicolon,so this is saying the styling for this,label which is this wording of how did,you hear about us is a hundred-percent,width so I can copy this and I'm gonna,paste it on the Select field as well,just so we can get both of those to be,on their own lines and I'm gonna hit,save and come back and refresh okay,so now you can see it's stylized a bit,better now you can continue going,through this process and we could add,some additional styling so for example,we could add some more space underneath,here and we could also make this just a,bit bigger because it's not the correct,size right now so it's not working,correctly so I'm going to come back to,the Shopify store and for the Select,field so I want this drop-down menu to,be thicker kind of like these are so I'm,gonna guess that that's about let's say,50 pixels so I'm gonna come in now and,say height 50 pixels and I'm going to,end it with the semicolon as well and,then I'm going to add some space,underneath both so for the label I'm,going to say padding bottom,ten pixels and I'm going to copy that,and put it on the Select field as well,to add a little bit more space I'm,actually gonna say 25 pixels just to,give a little bit more space between,this field and our message field and I'm,gonna hit save and let's refresh it so,that's starting to look a lot better and,you can start playing with it of how you,want it to be styled so again we kind of,would want to just tweak it a little bit,more and you can also add an additional,field so you can see here under the,Shopify all of the fields that you have,available we could do the same process,if you wanted to add in a radio button,or a checkbox and you could continue,doing that okay so I'm gonna go back to,my form and I'm gonna make a few final,edits just to get this styled like the,rest now if you don't know how to do all,of this you can follow along with the,CSS that I'm adding in here but if you,have any questions you can put a link,and questions of how to get it stylized,in the comments below but for me I want,to still add a little bit more space in,between both the how did you hear about,us and the form as well as this form the,old + e.message area I also want to,align this to be where the text is in,the center and I want to make this if,you can see here the rest of my,backgrounds are kind of transparent and,have a border where this is white and,has a black border so I want to stylize,that the same so I'm going to go back to,my Shopify store and I'm going to add in,just a little bit more so I'm gonna add,in to my label field I'm gonna say float,left and semicolon just to make that all,aligned and I'm also gonna say float,left as well for here I'm going to,change padding-bottom to margin which is,just going to force that to give a,little bit more space I'm also going to,add in,we're going to type out background and,I'm going to say transparent but if you,wanted it to be a background color well,it would help if I misspelled it if I,spelled it correctly but if you want,this to be a background color you could,then put in the hex color here so,instead of transparent you could put in,the hex color so three zeros would be,black but I am going to keep that,transparent and then lastly I'm going to,add in a border so I'm gonna say one,pixel solid and that is my hex color for,that border so we're gonna add the,border to the Select field so I think,this should do the trick so we're gonna,hit save and if you want to check out,any of my styling just pause your video,so you can type out exactly how I,haven't typed out then we're gonna go,back to the contact page and refresh it,and that looks so much better,it matches the styling of the rest of,the fields on this contact form and so,it's just a little bit of trial and,error and kind of refreshing the page to,see exactly how you want it to be so,again I'm gonna put a link in the,description to go to this Shopify area,that goes over the different fields and,you can copy in this code and if you,have any additional questions of how to,stylize something put it in the comments,below and we're happy to help thank you,so much for watching and I hope you,found this video helpful if you have any,questions or comments make sure to post,below and we would love to help you,through with that also if you have an,idea for another video that we should,create also make sure to comment below,and let us know we might make a video on,that as well if you haven't yet make,sure to subscribe so that you can be the,first we notified when we put out new,video tutorials all about Shopify and,how to grow your online store thanks for,watching

Congratulation! You bave finally finished reading shopify contact 1 form error this field can be empty depending on user input. how to correct this? and believe you bave enougb understending shopify contact 1 form error this field can be empty depending on user input. how to correct this?

Come on and read the rest of the article!