how to add a form in shopify

in this video i'm going to show you how,to set up a custom form,on your shopify store without needing,any code,okay so let's look at a pretty typical,example on a shopify website,let's say i want to create a contact us,page so people,on my skincare store can get in touch,with me,and easily contact me by clicking a link,in my main menu,so the first thing i need to do is go,over to my shopify store and then i'm,going to click on,online store down here then i'm going to,navigate down and click on pages and,then we're going to go and add a new,page,and we'll call the page contact us so,now i can go ahead and add content to,the page but what we're going to do is,just,save the page so that we can add it to,the main menu now you'll see after you,create a page there's actually a,convenient link here,added to your store's navigation so,let's click that link,and then what we're going to do is go to,our main menu here and then we're going,to click,add menu item click into the link box,here,select pages and we'll select contact us,and then click add now the contact us,page has been added at the end of the,menu but if i wanted to shift it around,i can just drag and drop it so once,that's done,click save okay so back on our website,now if we hit refresh,we'll see the contact us page appear and,we can go in and verify that by clicking,into the contact us page,now the next step is to log into your,autopilot,account and under marketing you need to,navigate to capture,from here we're going to click new,widget we'll select start from scratch,and then we're going to select form so,by default we get this subscribe to our,newsletter form but we want to go in and,customize the form,so we'll click edit so the first thing,we want to do is,change the title of the form so we'll,change this title to,get in touch now what we want to do is,build out the rest of the form so we've,already got,email first name and last name in here,but i want to rearrange them so,first name and last name are before,email and then i'm going to click into,these fields and make them both required,because i want to make sure we collect,their name,the next thing we'll do is add a field,and we're going to create a new field,and we'll call this reason and this will,be the reason why they want to get in,touch with us and under field type we're,going to select,long text and we'll select ok and what,that'll do is give us this big box where,they can enter more information about,why they want to get in touch,so under reason we want to change it a,little bit because reason's not a very,good description of the field for the,user so we can actually just change the,field,label here and we'll change it to how,can we,help and we'll also make this field,required,so now we'll go ahead and add one more,field so we'll select create new again,and we'll call this field reason type,and we're going to select,a single select field now we want to,enter some values that define,why they're getting in touch so we can,say help with,an order questions related to,products something else and we'll select,okay,okay so we want to move the reason type,here above the,reason so we'll just go and drag and,drop it above and then just like we did,with the other field we're going to,change the label here to,what do you need help with and we'll,also make that feel required,okay so the final thing i want to do,with this form is just change the button,and we'll change that to,get in touch and on the click we can,change it to navigate to a url,or what we call say thank you and,that'll just mean that,the form will submit and go to this,thank you screen down here,and we can customize that as well so,let's do that,we'll say thanks for submitting the,contact form we can also add an image,here as well by selecting add content,and selecting image,and then click into the image and we'll,upload a nice relevant image,okay so that looks great now we can see,what the form looks like,and the thank you page by tabbing,between the form and thank you,so the final thing we want to do is,adjust the style of this form because,i'd like the form to be a bit wider and,have a transparent background so it,looks great,with my website so we'll click into,style and this is where we can modify,all the different styles background,fonts and background images,and just the overall width of the form,as well so we're going to change the,width to 650 to make it a little bit,wider we're going to position it,left and then remove the padding because,shopify's page,already has nice padding and it's left,aligned in my particular theme,my shopify theme also has a background,color so under,fill i'm going to click this button here,which will remove the background color,and make it transparent for this form so,once you've finished styling the form,just click save,and you'll see that the form code is now,updated and this just means that if you,would already put the code for the form,on your shopify store because you've,made changes you'd now need to update,that code so we're just going to click,ok,and then you can see in the design,preview here a copy of the form that we,just created so the final step is just,to copy this,embed code here and this is the code,that will make the form work for us,on our shopify site so we'll go back,over to our shopify site here and then,we're going to navigate back to pages,and then we'll click into the contact us,page that we created earlier you can add,content to the page and different,stylings but what we need to do is paste,the form as,code so we're going to go up and select,this show html button here,and click it and this allows us to paste,the html code from,autopilot onto the contact us page on,our shopify store so then if we click to,show the editor again,you'll see that the form has now been,added to,the contact us page so that you don't,interfere with the form code it's,important not to go in and edit the form,through this editor here you're better,to edit the content that you want on the,page,first and then paste the form code in,exactly where you want it,when you're done click save and the page,will be updated,we can now click view page to view the,changes that we've made,on our website so now all that's left to,do is,fill in the form and try it out i'll,enter my details,into the form and then i'll select what,i need help with,we'll say questions related to products,and then,why i need help and then we'll click get,in touch so now,as expected we see the thank you message,that we created earlier,and this nice thank you image we placed,in here back over,in autopilot we can now tab over to the,report tab,and see as people are shown and convert,on the form and you can see that in this,chart here,okay so that brings us to the end of,this video i hope you learned something,new,and feel confident now adding forms to,your own,shopify website the form building,capability in autopilot,is incredibly powerful and you can,create forms for almost,any idea that you have if you enjoyed,watching this video please give it a,thumbs up,and make sure you subscribe to the,channel if you'd like to be notified,when i publish more videos like this,thanks for watching and i'll see you in,the next one

Congratulation! You bave finally finished reading how to add a form in shopify and believe you bave enougb understending how to add a form in shopify

Come on and read the rest of the article!