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

No video

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

Рет қаралды 75,428

Күн бұрын

Setting up a Contact Us page is super easy, but what about adding fields to the default contact form? That's exactly what we'll go over today.
► How I can help
--------------------------------------------------------------------------
🎯 Get some free personal advice for your developer-career:
codingwithjan....
👨‍💻 Are you looking for a Shopify Developer who can help out on your project?
codingwithjan....
💻 Become a Developer yourself by enrolling in our Bootcamp “Freemote” (Freelance or Fulltime)
codingwithjan....
► Let's stay in touch :-)
--------------------------------------------------------------------------
🤝 LinkedIn (business journey and behind the scenes)
/ jan-frey
🎬 KZfaq (Shopify and Web Development)
www.youtube.co...
► SEO Description
--------------------------------------------------------------------------
Modifying the contact form is what we will focus on in this video. We will learn how you can edit your theme files and dive into the contact page template. Here we will use some basic HTML to include new form fields. Every step will be explained in detail so that you can follow along and implement all the changes you come up with for your own contact us page.

Пікірлер: 195

@CodingWithJan 9 ай бұрын

🎯 get personal advice for your developer career. (free for a short time) codingwithjan.com/career-advice

@inezcaesar769 2 жыл бұрын

Your an amazing teacher. I never learnt coding but I could just do it by following your video Thank you so much.

@Cre8tivediva 3 жыл бұрын

You are such a great teacher. Very precise, detailed and very easy to follow. Thank you.

@evrgreenheart 3 жыл бұрын

thanks Jan I appreciate your honesty and how you don't market yourself :)😁😁👍

@giorgoslavrentiou4296 3 жыл бұрын

Really awesome! I rarely subscribe by watching just one video of a channel but you deserve it.

@CodingWithJan 3 жыл бұрын

thank you very much glad to hear 😁

@Cherry88847 3 жыл бұрын

I love all your tutorials. From how you explain and listening to you explain. Thank you Jan.

@CodingWithJan 3 жыл бұрын

you are welcome glad to hear 😁

@JustForFun-kp6ul 4 жыл бұрын

Hi, Jan! If you share all customize code after end of the video then it will be help for us. Thank you.

@AfricanFlightStar 3 жыл бұрын

Agreed! :-)

@compilationofvariouscamera422 2 жыл бұрын

I am laughing so hard because I actually did it and it worked!!!! I'm amazed! I am almost 50 and know nothing about coding! Jan you are amazing! 😁

@willt1003 3 жыл бұрын

Hi! My page.contact.liquid only has the following code: {% section 'page-contact-template' %} So I am struggling with the steps of this video!

@vinsonlozano60 2 жыл бұрын

Thanks for sharing this easy to follow tutorial! I wonder if it is possible to create a custom form that sends the data to a different email address? Because by default all enquiries will be sent to the email saved on the General-Store Settings.so what if I need a custom form that needs to be received by a different recipient. Is that possible? thank you.

@christinacerqueira4068 2 жыл бұрын

I'd also love to know if this is possible please?

@annalyncharmyjeffrey5458 5 ай бұрын

I definitely needed this! Thanks

@deanpariseau7972 2 жыл бұрын

Fantastic tutorial. Have never coded anything, and just complete a custom contact form with your help!

@veerbansal507 4 жыл бұрын

Hello, how we can create multiple custom query form in one page (like product query and other query)with sending on different emails. Without using any app.

@lafr9683 2 жыл бұрын

Is it normal that the contact-form.liquid is located in the sections area and not the template ? because there's just a page.contact.jsn and in there are just a 19 lines with few codes. (I am using the Dawn theme)

@nicoleigho5374 Жыл бұрын

Same i think

@Jesus_Broski 2 жыл бұрын

WoW I’m so glad I found you!!

@LamboDonaters 3 жыл бұрын

Value = this Comment. THANK U SIR.

@yukorecords 4 жыл бұрын

Hey, do you know how to add a check box instead of a drop down?

@dems2550 3 жыл бұрын

thanks from France bro

@lightning4201 4 жыл бұрын

I tried it and it worked. Great work as usual.

@user-qh1lh3cj8t Ай бұрын

Hi Jan, always amayzing tutorials. I have a question though. How do you add an auto-reply for the contact page in Shopify?

@AfricanFlightStar 3 жыл бұрын

Great job thank you, just what I was looking for!

@CodingWithJan 3 жыл бұрын

great glad to hear 👍

@Borriiiss 2 жыл бұрын

How can you make the new fields you add a mandatory item so it is filled out whenever the form is filled? like how email is mandatory, thanks!

@yashjhaveri219 4 жыл бұрын

Hi Jan, I need to know one thing How could i put all the input fields to the right side of page and put some text about my company info on the left side of the page because this type of vertical scrolling is taking up too much space and there is too much space wastage around the fields.

@zendannyy 3 жыл бұрын

I think what you want is tag for every half side of the page so All your left side content All your right side content

@NappaNVegetaCOUPON2 2 жыл бұрын

Thank you for your help Jan! I was able to add a drop down menu and it works great! As a complete newbie to coding, I was able to follow along very easily. Thanks!

@CodingWithJan 2 жыл бұрын

Hey jennifer, glad this was helpful to you! 😁

@juleshedgcock 3 жыл бұрын

when i add my contact page, I have the default shopify diagram underneath my submit button with the google search box (but obv not linked to my address) how do I remove this?

@happiroo4193 3 жыл бұрын

Just starting my amazing business. Thank you for your help.

@aliciamuxel7852 Жыл бұрын

Hey Jan:) Could you maybe do a video on how to add a (multiple) File Upload in the contact form using bootstrap? I was able to implement the field and upload files, however the attachments are not actually sent in the message.

@Crixo13 4 жыл бұрын

Hi Jan, congratulations for your videos. You are awesome. It would be great if you could make a video about how to pass (or include) the language-switcher on Brooklyn Theme to the Header. It is currently on the bottom bar what doesn't make sense. You could also include some customization like adding some country flag image inline with the country name or something like that. Thank you very much and congrats for your work. Regards!

@applebitme 3 жыл бұрын

Thanks Jan, Very informative and helped me solve my problem.

@caseycaudle7052 2 жыл бұрын

lol loved the ftx commercial

@shiktoahmed5746 4 жыл бұрын

very nice. need more shopify tutorials thank u.

@felixchan2081 3 жыл бұрын

Hi Jan, I've been following since I started in late '20. Back to this topic. Would you consider coming up with another video, on how to create a Thank You page, after the customer has contacted us?

@shakil355 3 жыл бұрын

THANKS Jan, but how do I put the "contact us" on my main page. I created the contact us like you said, however I cant find it on my site when I look as a customer

@ChelseaMadamba93 3 жыл бұрын

Yay! Thank you so much for a clear and helpful video

@mohammedelela6895 3 жыл бұрын

Thannk u man keep going

@charmainenaomi8971 3 жыл бұрын

Extremely helpful. It worked perfectly. You've gained a new subbie :)

@CodingWithJan 3 жыл бұрын

Yay 😃🙌

@mikehudgins8545 4 жыл бұрын

Hi! Your videos were really helpful for me to start moving businesses from WooCommerce to Shopify. One common thing I am seeing is I don't like how a lot of themes handle "add to cart" actions. Namely, I don't like the little message that pops up to view cart. I would prefer an auto redirect OR the side drawer that some themes have. What I would love is a video that explains how to change the add to cart behavior of any theme to one of these behaviors. This would give me more autonomy as to which themes I test, and it would allow me to do some CRO to quantify the differences between each method. Again, thanks for what you do and I will be watching long term! I have been using my own method of an onclick javascript redirect, but it doesn't feel like best practice. I'd prefer to learn a better way. I can't really find info about it online, so it could be a useful vid.

@CodingWithJan 4 жыл бұрын

Hi Michael, nice too meet you and thank you for your detailed feedback :-) Many themes come with a build in Option in their customizer. Sometimes you find these settings if you navigate to a product page or you in the "general Theme Settings" Tab. If your theme is lacking a setting for that you can also consider to remove the AJAX related CSS-Selector-Class from your add-to-cart button. (But this would be a bit hacky) Hope I could still help :-)

@jahanzaib3381 3 жыл бұрын

thanks jan you are doing great job!

@ayakokiener5022 3 жыл бұрын

awesome and so helpful thank you!

@CreatingCreations 3 жыл бұрын

Great video, any idea how to have an file upload option. I did it by changing type from "text" to "file" but when shopify sent the email it didn't actually have the file attached.

@CreatingCreations 3 жыл бұрын

I am wonder is possible to use a program that would convert the image to html text and then the shopify server would be able to send that through the email. There are free code on git hub of such a program. I just can't figure out how to connect it in a way that would work. Thanks!

@owais1972 3 жыл бұрын

Hi Jan, Can you please elaborate a bit about the importance and the structure of the name attribute used here in the input and select tags? Btw your videos are amazing.

@lightning4201 4 жыл бұрын

I used your example and did some checkboxes but for some reason only the last value that is checked is sent to my e-mail even when I select multiple checkboxes and submit. Do you know why? ty in advance.

@raymonchen7312 2 жыл бұрын

Great video. Learned a lot till this day. But I am currently using Shopify 2.0 Dawn theme. I don't think this method can still work. Can you please make a short video the updated approach to customize the contact form? I'd greatly appreciate it.

@sclamable 3 жыл бұрын

@Coding with Jan - The select buttons for the facbook, instagram, or other are on top of the words not beside it. Can you help me with this issue.

@LovedbytheMostHigh9353 4 жыл бұрын

Thank you Jan. This is very helpful 😊

@ankeshgupta496 Жыл бұрын

can we call the Shopify Rest API on Contact form Submission?

@dreamer-xz2sl 4 жыл бұрын

love you Jab! You are great!

@thomasklubo2176 3 жыл бұрын

Hello Jan, thank you for this video. I decided to add into section What's your concern option *SELECT* . How to set code for solid option? I mean, if customer go to Contact us, he won't be able to choose this option and send a message. I want him to choose from all the rest. Is it possible? Thank you.

@AmedeeBoulette 3 жыл бұрын

How do you deal with errors? I've done a custom "create_customer" form in a custom page and whenever there's an error, I get sent to the /account/register page, which is not good...

3 жыл бұрын

Very helpful. Thanks a lot !

@alex35256 4 жыл бұрын

Please make a tutorial on "launching soon password page " for more contact info like "NAME" bar rather than only collecting "E-mails " bar

@theory8036 2 жыл бұрын

Hey, how could you add the customer who entered this info to the "customer" database/list on Shopify store--perhaps under a new category if they don't have a profile already. Thanks

@jyotirajpal5286 3 жыл бұрын

Hey guys, I can't see any custom fields responses on my mail after submitting. Please let me know what could be wrong here.

@hackfleischhassenderzerhac8014 4 жыл бұрын

Hey, is it also possible to add an file upload box? I tried it but the problem is, that I can't open/download the file in my webmailer... it's just safed as a text... (I use ionos as webmailer)

@broom6958 3 жыл бұрын

How do I change the Email subject that gets sent to me? All the Emails have the same name and subject and I cant distinguish between them!

@dwisut 3 жыл бұрын

Hi Jan, thanks very much for your tutorial. I have a question of how to add a "file upload" field to the contact form. Many thanks.

@IeuanAlli 4 жыл бұрын

How would I send this to multiple emails?

@gracetaylor5230 3 жыл бұрын

Hello Jan! Fantastic video, thank you so much! Do you have any advise on how to make a heading on the label for either the radio or drop down bold? Thank you!

@tcyva4845 3 жыл бұрын

please answer to me :( when open the template i dont see all these same codes... all i see is "%section 'page-contact-template'%"

@phil5354dd 2 жыл бұрын

Hi Jan, tks for your guide on contact us page. and i have a question that if i want to change the title as my theme, the contact.form.title is not what i want in words. so i want to chnage it but i can not find where it is in the page. contact. liquid. I hope you can explain to me how to do. tks

@CodingWithJan 2 жыл бұрын

Hey Zhao, :-) If you meant the title of the page or the link to it, you can change the theme on the page editor If you meant the title of the template, you can change it when you edit the code

@tiffanibraxton7818 4 жыл бұрын

Great info Thanks! 👍🏾

@elcapitan1539 2 жыл бұрын

Hi Jan, glad to have found your channel! I have a question for you - I'm looking to move the contact form div to be below the content on the page, at present it is preset to be on the left side. I'm not so great with divs, and it is using data containers. Any tips?

@patrickbaumle4198 4 жыл бұрын

Hi Jan, we got everything working but somehow the submitted contact us requests don't land on our email. Where exactly do we have to paste our email adress? or does shopify get the email adress from the shopify settings? - in that case though, that didnt work for us.

@kin.ovi. 2 жыл бұрын

Wow that was super easy thanks! I added a 'subject' box. It all works great, except the notification email I get lists that section as "New customer message on %{creation_date}:" I still get whatever info the customer submits, so not a huge deal. But can you point to where I need to go to edit the email notification title, so my new field is listed as 'subject'?

@CodingWithJan 2 жыл бұрын

Hey, Happy to help.😁 Unfortunately, you can only customize customers' email notifications titles, not the ones you will receive with the contact form. Have a good day :-)

@nicoledowley8367 4 жыл бұрын

Thank you for the awesome video. very helpful. How would i change contact form color fields?

@jakejakejakejakejakejake 3 жыл бұрын

Wonderful!!! 👌🥰 X

@thelittlecatthatcould 2 жыл бұрын

Jan - Could you please update this tutorial for the new Dawn 2.0 environment?

@CodingWithJan 2 жыл бұрын

Hey Luna, It's noted, thanks for the feedback!😀

@dreamer-xz2sl 4 жыл бұрын

I am facing a problem that I am working on a page on Shopify "About US". In the "About Us" page, I have some images that would like to put on the page. And I would like to put some text right next to an image. This is the example for your reference: www.nativeshoes.com/our-brand.html Since I find the Shopify page editor is limited me to do this. And also, the reference website above provides a different view on the laptop and mobile. I think this need some advanced coding? Much appreciate it if you can help with this. Thank you so much!

@hasher22 2 жыл бұрын

How do I make e-mail NOT required? I want it to be an optional field.

@confidencematters7660 3 жыл бұрын

Hi , i loved watching your video and subscribed as well! Just have one question on shopify contact form , field. Can we edit name of ' Send' button? like put 'submit' instead of 'send?' Thank you so much for posting this video 👍

@evabourgknecht6530 2 жыл бұрын

Hi there thank you so much for the video, on my shop it is not .liquid it is .json, I dont know how to do !

@CodingWithJan 2 жыл бұрын

Hi Eva, happy to help! This is because you’re using a more modern theme. JSON templates were introduced lately and need to be treated slightly differently. We might have an update video in the future. You can find the form in the sections listed in the JSON file. (called generally contact-form) If you still can't find it, we’d be happy to get you in touch with a developer. codingwithjan.com/developers Have a good day :-)

@user-zw6tg9rb1s 4 жыл бұрын

Hey Jan.. how would you or can you change the borders(the rectangular space where we type in the info) in the contact us to a smooth curvey look.. Is that possible ? thanks man

@azzaluna689 2 жыл бұрын

I added the label with the radio and it looks nice in the contact form but I sent email to my self as a test and when I receive the message, there is no info about "where did you hear about us?"... So, even if people chose any option, I would not know. Is there a way to fix it?

@CodingWithJan 2 жыл бұрын

Hey, Make sure you have the radio buttons inside the form, and that the radio buttons have the name attribute. If it still doesn't work, you must be using a different or an updated theme. Good luck 😀

@JohnImbault 3 жыл бұрын

Hi Jan, I like your style of teaching, thank you. BUT my page.contact.liquid only has (4 lines of code) with the following code: {% comment %} {% endcomment %} {% section 'page" %} {%section 'map-contact' %}- What are my options here? I am using a Booster theme. does your code only work with the Shopify theme perhaps? Thanks Jan

@omarb.4527 4 жыл бұрын

Hello Jan, Thank you very much for your very helpful content . I added the drop down menu, it appeared fine on the website, but it did not appear in the notification email that I receive. Is there a way to ensure that it appears in notification? Thank you very much

@ryanwalsh6530 2 жыл бұрын

How would I add this new contact page to just one specific product you are selling?

@sarahseago4678 3 жыл бұрын

Hi, Jan great video, just one thing. I previously changed the colour of the fields by modifying the theme.css but the new field I created has gone back to the original colour and I can't see how to change it to match the others. Can you help?

@adeisaac 4 жыл бұрын

Ooh man, you read my mind, although figured it out. Thanks again

@CodingWithJan 4 жыл бұрын

I´ll do my best 😁 Awesome you already found that out by yourself. Is there anything else you would like to see, that might be interesting for others as well? :-)

@rajawaqar323 3 жыл бұрын

i need help, my customers are sending me emails from contact us page but im not receiving them, what is wrong?

@NOHOLDSBARREDWITHIT 2 жыл бұрын

Thanks guy, I will just use the template as it were, I don' t want complications with all these html codes 😂😂.

@CodingWithJan 2 жыл бұрын

Alright fair enough. It's more for aspiring developers to be honest 😃

@midshipsport 3 жыл бұрын

Thank you so much. Also, I how do we display our mailing address "below" the Contact Us form, please?

@EnglishLk. 3 жыл бұрын

Pls do a video. How to add a form to get client's project details to a product page for servicing site?

@justcompilations9161 4 жыл бұрын

please tell me how to change the font colour of the form labels only

@phisit8813 Жыл бұрын

I don’t have default contact codes :( could you please post default contact codes? Thanks

@AmeerSaib 4 жыл бұрын

That was very useful, Thanks. Could you also show us how to add Recaptcha to the contact page?

@CodingWithJan 4 жыл бұрын

Hey Ameer, thanks for your positive feedback :-) Actually Recaptcha is already included. Shopify has some anti-spam mechanisms in place. You´ll see that if you try to submit the form multiple times. Hope that helps :-)

@AmyNeville 2 жыл бұрын

Hey there great video! is there a way to create a form for a customer to fill in when they are buying a product before they checkout?

@CodingWithJan 2 жыл бұрын

Hey Amy, If your theme has this feature you can enable it here: Theme > Customize > Theme settings > Cart > Enable cart notes It shows a small field in the cart page where the customer can write a message Hope this helps 🙌🏻

@TatumTurnUp 2 жыл бұрын

Hi, Jan. First off, extremely great tutorial. But I come to you with an error I'm finding. When attempting to find the page.contact.liquid under Templates, I only see page.contact.json, which, as you know, is very different. It also has a blue dot next to it, which I am unsure of what that means. I did, however, find contact-form.liquid under Sections, which I thought was the closest thing. So I began playing with trial and error. I copied the code, then pasted it in a new template (not section). I then saved it just to see what it would look like, but there was a syntax error with the line containing {% schema %}. So I deleted that section and then tested it on a test page using that template. The form looked perfect, however, the heading which I typed in the previous page would not show up. I am very confused and I think this has to do with my entry level HTML. Any advice?

@CodingWithJan 2 жыл бұрын

Hey, It might be a good idea to hire a developer, luckily we can get you in touch with a reliable one: codingwithjan.com/developers Hope that helps :-)

@satyaprakash029 3 жыл бұрын

Hi Jan, How can i implement pincode mapping on city , state shopify. Please help. thank you

@hassanaitmazirt194 3 жыл бұрын

the for is not send to mail with additional fields

@dto1902 3 жыл бұрын

Hi, do you have any idea how to make this form export to an excel sheet?

@fachrulariestarahman939 4 жыл бұрын

Hi Jan! Can you also please teach us how to create a custom embedded signup form? And how to integrate it with MailChimp or Klaviyo. For example there is a theme that provide a signup form on footer, but there is no integration settings on customizer. Thank you so much.

@CodingWithJan 4 жыл бұрын

Hey Fachrul, in Mailchimp you can actually genereate the code for an embedded form. You can either paste that in your theme files, or sometimes you could even use the customizer and add a custom HTML section to paste your code there. Just make sure to backup your theme before hope that helps :-)

@giacofa99 3 жыл бұрын

Hi Jan, How can I move the "send" button to the left side?

@kydsklothing 2 жыл бұрын

hey you're awesome.... i love your videos..... question: how do you make a field on the form required like the email?

@CodingWithJan 2 жыл бұрын

Hey Kyds, you can add simply add required inside the html tag :-)

@maquinaud5683 3 жыл бұрын

I did my custom page but it’s not showing on the website, How do I fix that?

@ismailbarnoussi8458 3 жыл бұрын

Hey Jan, thank you for this great tutorial. Have you any suggestions on how to implement file attachement in the form. I tried input form that handle images for instance but it seems to work just in front-side. Any thoughts? Thank you

@CodingWithJan 3 жыл бұрын

Unfortunately not possible on contact form unless you're using an app :-)

@edizercan4013 3 жыл бұрын

Does not work with brooklyn theme. The new field always looks so small and I can not add a Field next to the other

@CodingWithJan 3 жыл бұрын

Basically works on any theme, but theme files may look a bit different

@hafsahuzaifachannal513 12 күн бұрын

I want to send email also to the person who is filling the form on his provided email address for confirmation and proof

@paul1515-s6n 4 жыл бұрын

Do you do custom builds/freelance work? Or on upwork/etc. Thanks for these vids they're great. Would love to chat about booking you for an upcoming project -

@CodingWithJan 4 жыл бұрын

Hey Paul, nice to meet and thank you for your interest :-) Currently I´m working in an agency and unfortunately don´t have any capacities to do freelancing on the side. If you have any suggestions for new videos or if there is something you always wanted to learn more about, I´d be happy to hear that. Hope you have a good day :-)

@amaurychedan 3 жыл бұрын

Hi, do you know how to receive images input from costumer using contact template pages ? I tried a custom code with an image input but it doesn't show on the e-mail.

@CreatingCreations 3 жыл бұрын

Been trying the same thing. Have you managed to get it figured out? When shopify sent me the email, it just had the file name and not actually the file itself.