How to create a contact us page || Shopify Help Center

In this video, we are going to show you how to add a contact us page to a modern online store 2.0 theme. Before we get started, it's important to highlight that contact forms can be one of the most effective methods for converting shoppers into customers. This is why most successful stores have a contact form or email for customers listed on their website - it can help build relationships with customers and drive sales. There are two main ways merchants typically use contact forms - by customizing the existing default contact us page or by adding a contact form to an existing page. To customize the default contact us page, start on the Shopify admin and click "Online store". Click "Customize" to go into your theme editor. From here, use the page selector dropdown menu to go to "Pages", then select "contact". If you don't see a contact page listed here, then check out the resources on how to create a new page linked in the description below. This contact page is built into all modern stores and can be customized using the sidebar. Many Shopify stores include include a section with frequently asked questions included. When you're done customizing the page, click "save" To add a contact form to an existing page. click "Online store" from your shopify admin. Click "Customize" to go into your theme editor. From here you can navigate to the page that you want to customize, or you can use the page selector dropdown menu. Once you're on the page that you want to add a contact form, to click "Add section". in the sidebar, Click "Contact form" to add it to the page. You can customize the options in the sidebar. If you don't see the option to add a "Contact form" section in your theme, then you may be using a paid party theme or an older non-Online Store 2.0 theme. To explore and learn more about Online store 2.0 themes, check out the resources linked in the description below. With your pages customized, the final step is making it easy for customers to access. We can do this by adding it to our store's navigation. To create this link, start on the Shopify admin and click "Online store". Next click “Navigation”. Here you'll see any existing menus that you have set up. In our example, we're going to add our page to the footer menu. From within the menu, click "Add menu item". Here you can enter a custom title and add a link to your page. Once selected, click "add". The contact us page will be added to the list of links in your footer. You can rearrange the order of the links to appear in the order that you like To do this, click and hold the six dot icon and move the link up or down to rearrange the order. Once you are happy with the position, click "Save". You now know how to create, customize and add a contact page to your navigation. If you run into any issues, check out the resources linked in the description below. Thank you for watching.

I show you how to build Shopify Forms for your store.

in this video i'm going to show you how to set up a custom form on your shopify store without needing any code [Music]. 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 partikular 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.

More:t shirt printing shopify

Editing Shopify Contact Forms Without an App - Part 1

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 notike 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 tok 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 formliquid 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 ca.

More:selling dropshipping store

How to Add Contact Form to Shopify Contact Us Page

hello and welcome. my name is. you are watching tubemint. in this video i'm going to show you how to add contact us page on your dawn theme- shopify dawn theme. so let's get started, go ahead and log into your shopify theme and then go to online store and then go to pages and here you'll have to create a page. so i'm simply going to say add page name. it subconduct asks and then here you will have to choose the template. so every theme has this template: contact. you simply go ahead and select it and save it. make sure it's visible. once saved, we need to go ahead and add the contact form to this contactors page. so go to online store. remember, you can customize your seo here. so this is slug. if you don't want, don't want to have this contact us, you can delete this part. okay, but i'm going to keep it as it is. you can also write your page title, whatever the name is, so contact us. and then let's say your brand name is whatever you contact, whatever. so this is going to be description. it has to be within 320 character. once saved, you can go ahead and add the contact form to it and quickly going to show how you can do it. so go to online store and then themes and then click customize and now from here on the drop down, you have to select pages and then contact. so basically we are going to select the template. this is contact us assigned to one page. and here you see, this already has this contact as form. if it doesn't, you will have to click on this add section and scroll down to contact for edit. you can add two if you wish, but why? i don't think you need one too, so go ahead and delete it so it gets automatikally added the contact form when you choose that template. and here we have the contactors page from the pages. if you need to ever edit it, so click on it, add something here and you're done. all right, you can also go ahead and view it from here. so that's it for this video, guys. if you have any questions, suggestion, leave in the comment below. thank you for watching. bye.

Shopify Contact Us Page Creation | EASY Step By Step Setup

what's up guys? this is Jake and in this video I'm going to be showing you how you can create a Contact Us page inside of your Shopify store. it's pretty simple and will have you set up and ready to go in a couple of minutes. so, with that said, the first thing you need to do is go ahead and log into the backend of your Shopify store and then, once you're in here, you need to go to online store and come down here to pages, and then we are going to select add page right here and then we just need to go ahead and name our page. so in this case, we'll just name it contact us and then we are going to come down here to template and change the template to page dot contact and then click on save, and what we're gonna go ahead and do real quick is view the page real quick and we can see that it creates a contact form right here where the customer can input their name, their email, their phone number and send us a message, and when they use this form, what it's going to do is it's going to send an alert to our email that we have on our general settings inside of our store and that's how we can reply as well. I'm gonna be showing you that in a second, but first I'm gonna show you how you can further edit this page. so if this is all you want on your contact page, then this is all you have to do. however, if you would like to add some additional text of this contact page, you can come in here to content and you can add different things in here. if you wanted to put images or anything above the form, you could. so any text that you type in here or any images that you put in here are going to show up below here and above the form. so let's say you wanted to put something like you can call us. so let's say you wanted to go ahead and put in something like this, letting your customers know that they can also call you as well. or you can type pretty much whatever you want if you want to add a little bit of personal touch or branding in here, and that if I click Save again and we come over to this page and refresh it, we'll see that now the text that we just typed in goes ahead and shows up in on top of the contact form. so, like I said, if you want to go ahead and put your phone number, any other ways to get in touch with you there, or if you want to put in an image or anything like that- like, maybe, if you're a local business, a picture of where you are on the map is normally pretty good- you can go ahead and put that here. so that's how you edit the contact page and go ahead and create that. now the next thing we need to do is we need to add the contact page to one of our menus. so we can see on this sample store here we have the menu up top and we have the footer menu down here. so we need to go ahead and add our contact to one or both of these menus. that way people can find the page. so then we need to come back over here and right below pages, click on navigation and we just need to select the menu we want to add the contact page to. so in this case I'm gonna add it to the main menu on top. so I'm going to click main menu and I'm gonna select add menu item and we're gonna click on link right here and then I'm gonna click pages and then we're gonna look for the page we just created, which is contact us, and I'm gonna click Add and now we can see that I want to add an ad at that page right here, and we can see that the order that it shows up in so we can see home catalog about us- is going to be left to right. so we can go ahead and drag on these six thoughts right here and change the positioning of where the contact is going to show up on our menu and then we click Save and then, if I come over here and refresh again, we can see that now the contact us page is in the menu. so if I want to- and I went back to contact us- we can see that now it's fully functioning. and if you wanted to put it in the footer menu, you can go ahead and do the same thing by adding it to the footer menu right here. so the last thing I'm going to show you is when somebody contacts you through this form, where is that notification going to be sent? so if we come down here to settings and then click on general, whatever email you have right here, so your account email and customer email- this is where the notifications are going to be sent. so make sure that you have your customer support email in the customer email right here, in the account email right here, and what we're going to go ahead and do now is I'm gonna go ahead and just fill this out really quickly and send a test email to ourself so I can show you what its gonna look like. so if I go ahead and send this real quick, I'm gonna go ahead and go to this email account now and show you what it looks like. so now I'm inside the email and we can see right here you received a new message from your online stores contact form and we get to see the message right here and if we want to go ahead and reply to it, we can reply to it just like a normal email right here. so this is why you want it to be your customer support email, so that way, all of the customer outreach that comes through the contact us form goes right to your customer support email. so that's how you set everything out with the contact us page on Shopify and that's how you go ahead and integrate and get everything rolling smoothly. but, that said, you found this video helpful. go ahead, leave it a thumbs up, subscribe to this channel for more content and I'll see you guys in the next video.

Shopify how to edit the contact us page - how to create custom contact forms

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 practikal 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 tiknical 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 c.