Adding Fields to Shopify Contact Forms - Part 2 of Editing Form Code, No App

No video

Adding Fields to Shopify Contact Forms - Part 2 of Editing Form Code, No App

Рет қаралды 17,211

Күн бұрын

I will be showing you how to add completely new form fields. We are going to be doing a one-line text input, a large textarea, a dropdown, and a checkbox.
I’ll also show you how to style the new form fields so they look like part of your theme and don’t stick out.
I’ll show you in Dawn but I will also teach you the skills and concepts to do this on other themes
===== Links mentioned in video =====
Shopify guide to adding fields: shopify.dev/th...
===== Related =====
Part 1: • Editing Shopify Contac...
===== Who am I? =====
Hey! My name is Eduard.
I teach the tech side of starting and running a Shopify store.
Im a professional web developer, but my goal is to make Shopify easy with simple and straight-to-the-point videos.
Visit my website: ed.codes
===== Check out my Shopify Add-ons =====
edcodes.gumroa...
Pre-built sections & features for Shopify 2.0 themes, often replacing the need for apps. Copy and paste the code into your theme.
===== Join "Shopify DIY" Community on Discord =====
Chat with me and other store owners and developers:
/ discord
===== FAQ's =====
My favorite Shopify Apps - ed.codes/blogs...
My favorite Themes - ed.codes/blogs...
===== Chapters =====
00:00 What we’re doing
01:31 Themes
02:12 My course
02:47 Open code files
04:04 Understanding form code
07:45 What are classes?
12:01 Good devs copy paste
12:55 Text input & general concepts
17:32 Field width
19:44 Multi-line textarea
22:02 Testing our form
22:48 Select dropdown
31:37 Checkbox
34:59 More form fields?
37:30 Course
#Shopify #HTML #ContactForms

Пікірлер: 68

@katelyndenneny Жыл бұрын

Wow. These tutorials are BY FAR the best one's I've come across. You're extremely clear, knowledgeable and amazing at explaining to help others understand code (especially as a beginner) . I definitely think you should create more video's on here, you would do amazing !! A lot more people are creating stores and you're definitely someone I would recommend watching. Thank you for this. I appreciate it ! I hope to see more and more tutorials from you. Keep it up Ed. *ps; I know you posted a comment saying there wasn't a lot of interest for extra parts to some tutorials, but please know.. youtube video's are always here, i came across this now and you posted this 10 months ago - it's extremely helpful and your audience will just get bigger as you continue to share more of your skills :)

@theretailambassador 9 ай бұрын

Yes! Every time I refreshed my contact form, I was SHOCKED that I actually did everything right! 😂 He’s the best-I’ve subscribed.

@VABianne_2023 2 ай бұрын

Hi Ed. I am a Shopify designer with little to no experience with coding so this video is very helpful in helping my clients with small tweaks needed for their store. Thank you so much and I hope you continue to do what you are doing to help Shopify owners and freelancers like myself. Again, thank you and God bless.

@hashirscam 4 ай бұрын

Ed, I genuinely wanna thank you for this amazing tutorial, this is exactly what I was looking out for.

@minimumviablepizza 5 ай бұрын

Needed a checkbox. You literally ticked the box with this tutorial 🙏

@ZaydsRandoms. Жыл бұрын

This is great THANK YOU! Did I misunderstand, or was there a Part 3 video that shows how to create a second contact form to use for a different purpose? I looked and couldn't see a Part 3 video. hopefully I'm not going blind! haha

@Shashi1005 Жыл бұрын

Hi Ed, I wanted to message to say thank you for these tutorials. I'm a very novice "coder" that has deep dived into Shopify for the business I work for. Your tutorials have been beyond helpful!

@luththul 4 ай бұрын

Thank you for this video ! It was actually really helpful !! I'd never coded before but I managed to do it because you are a great teacher :) So thank you verry much :))

@SoukainaElmaz 2 ай бұрын

Thank you for this amazing content, hope to see more practical videos like this

@ritapinto1143 Жыл бұрын

Ed! You are amazing! Thank you so much for taking the time to share all this knowledge, I am a noob when it comes to code and I managed to add the dropdown I needed.

@stana3900 3 ай бұрын

Really great tutorials! Amazing.

@wgstudioweb2117 4 ай бұрын

good job mate. very useful!

@lisah5611 2 жыл бұрын

I can't wait to watch these, they look great!! When does the 3rd part come out? THANK YOU!!! for your time!

@davidgoult8694 2 жыл бұрын

Hey Ed thank you so much for all the amazing content that you do, learning from you is really easy!!

@alexmarinez5730 2 жыл бұрын

Great Video, WAY better than embedding a google form. Thank you sir!!

@user-vv6ef9nt4z 22 күн бұрын

This has to be one of the best video which helped me to create a form on shopify, but with pros there are cons. This is front end where you showed how to display but what about if I as a owner of a website need those details to be stored in my backend, which incase in future will help with those information. I need that as well. Do you have any video made on it? Please share.

@HarryBradbury Жыл бұрын

This was great, only tutorial that actually allowed me to add an address field. Ta!

@grantemerson5932 Жыл бұрын

Great tutorial! Loved seeing your approach to solving this!

@calmandrest9513 9 ай бұрын

NUMBER ONE AND 2 ARE AWESOME , YOU ARE AWESOME THANK YOU

@tricaredme5539 Жыл бұрын

Thanks for video.. Simple, clear, detailed and calm...

@martinaquondamatteo1855 Жыл бұрын

Awesome tutorial! The dropdown menu was what I was looking for! Thank you so much for helping us to improve our stores! How to make the drop down selection as required filed?

@GoobIsGabe 3 ай бұрын

Thanks for the huge overview! As a entry level developer, this was super awesome to see and have a refresher, but there's one thing that I'm really curious if you could do without an app, I remember you enjoy doing things all custom/without apps but: how would you implement an attachment or a file input for a contact form where it actually sends the file itself, and not just the file name?

@dowellpowerwash Жыл бұрын

Thank you. I was able to make a 'Get a Quote' button, redirecting to quote form

@APG-CodeWarrior Жыл бұрын

okay.. YOUU need to be credited more. This is good stuff.

@Homemus Жыл бұрын

Again great content, very easy to swollow and fun to follow.

@jcvardhaan5074 Жыл бұрын

Hey Ed, this is very helpful and easy to understand video I have found by the time. Can you make some video on custom bundle products?

@akinyibikini Жыл бұрын

This was amazing!! Thank you!!

@olenahorchakova4105 6 ай бұрын

Thank you for such helpful videos! Is there any way to add CC of submitted email within this form?

@MariellaRedlin 3 ай бұрын

You're such a great teacher! thanks! I tried to add first in front of name to have first and name on all the coding paragraph and it says error. any idea why?

@simonenori9804 4 ай бұрын

hello! great video congratulations. i have created a new template from the basic "contact" template, as i want to add two pages to my online shop, one for simple contact between customer and shop, the other for sending return/exchange requests for items. how do i do this? if i edit contact-form.liquid will it edit both templates at the same time? thank you!!!

@joseginaharesco4991 Жыл бұрын

Thank you so much for the great tutorial. Do you have a video on making Shopify Contact form fields required?

@dipanshupansari6296 6 ай бұрын

Hey! It's very helpful I created a state list option in the contact form but the selected state did not receive in email response Please help

@user-kh2nb1sw4g Жыл бұрын

Hi Ed! First of all, thank you so so much for this tutorial. May I ask also if there's a part 3 video for creating a different form as you've mentioned in the part 1 video? Hope to hear from you soon and again, thank you! =]

@sarahgarcia1300 Жыл бұрын

I can't find the part 3 link - was that video made? These are so helpful!

@shubhamittal8824 7 ай бұрын

Hi I am also looking to make 2 different forms in Dawn theme. I have already created a new version of the form (by editing the code) and is live on the site now, but I want to use the original form also on another page. How do I do that? Can you please guide?

@mayankyadav206 Жыл бұрын

Hi could you please make a tutorial how to add file attachment field and deliver to mail

@BhanuSharmaiitkgp 8 ай бұрын

how to add a contact form in a collapsible row for the product page shopify dawn theme ?

@JahinShahriar 2 жыл бұрын

Thank you so much for adding the part 2.. Also do this form will send a notification in store email when someone fillup the form? It will be also a great feature

@EdCodes 2 жыл бұрын

In this video we are editing the default Shopify form so yeah any submissions are sent to your email.

@doggybuys7911 2 жыл бұрын

@@EdCodes Hi Ed, great videos I have subscribed and expressed interest in the course on your website. One thing I would be really interested to know how to do would be how to code a shopify form on a product page to collect an email address, so that the email address goes into the Shopify admin 'Customers' list with a tag added, the value on the tag being either the product sku or product title. My idea is then to only display this form on product pages for products currently out of stock. So that the page visitor can then use the form as a 'notify me when this product is back in stock'. When I get the product back in stock, i could then notify everybody who left their email.,

@onetapmeeh8702 2 жыл бұрын

I’m having a problem. So I did the drop down stuff, but it’s still popping up as the original white background selection and it’s not filling the entire box. Do you know how I can fix that?

@michellebruce1066 Жыл бұрын

Hello Ed, I have a multiple-choice selection in my contact form, for some reason, the content isn't connected with the e-mail that is received, would you be willing to help me out with this?

@CoachMoeTaleb 2 жыл бұрын

Hello, I am adding a drop down menu on the product page where a customer can choose to remain anonymous or include their name in the gift section.. I am using your product drop down menu for the code however i am having trouble linking it to the product page.. Any help?

@IK-rj7yp Жыл бұрын

Hi, thank you for the amazing tutorial video. The form is working perfectly. I would like to make the 'choose an option' field required. Can you please guide me. Thanks, very much appreciated.

@katie8151 8 ай бұрын

Hey! Im adding Capital Letters to the Placeholder in the code but it isn’t changing in the actual form. It looks messy without capital letters but I can’t seem to get it to change?

@EdCodes 8 ай бұрын

Hmm, it might be that you need to change the Labels as well? I made this video a long time ago but I think in some themes the placeholder text is replaced by labels text.

@NotFromAmsterdam Жыл бұрын

hi there love the videos but how can I change the subject field in email automatically to the selected dropdown section. It would be amazing if you could explain this

@lecourtstudio1853 Жыл бұрын

How do you make sure the spaces in the test boxes is large enough for on mobile?

@katelyndenneny Жыл бұрын

Hello ! Do you happen to have a tutorial on how to add a drop down option at checkout? As well as a custom carousel slider?

@dcgfii Жыл бұрын

How to make the drop down selection as required filed? Thank you so much for the tutorial_

@ANguyen423 Жыл бұрын

Hey Ed, would this video be good for editing the customers/register.json too? I've been trying to figure out how to set up "trade" accounts but can't seem to wrap my head around it.

@InsightKnowlege 2 жыл бұрын

Hi Ed. It's a great video tutorial and precisely what I was looking for to build a form. After all this I created a new form but Its is showing on all my default pages. I believe we created a new customise form as a section. How can I use this form on a specific page please? I am using the latest shopify expanses theme 2.0. Thanks

@RazuAhmed21 2 жыл бұрын

Great Content..... If you create a small project from scratch with hand coding with liquid. It will be great.. I didn't see any tutorial doing that way..

@nardu Жыл бұрын

Hi Ed, thank you for this. I was hoping to see a unique email subject for each different contact form in part 3. Is it possible to change this subject line of the form?

@faizabashir6259 11 ай бұрын

are you able to set unique subject for different contact form?

@tummisoncco9271 Жыл бұрын

basically if you want more basic stuff go for square space

@jipiquittot 8 ай бұрын

I believe this video is not valid anymore for the Dawn theme. For example, when you inspect the contact page, you cannot see/inspect the individual fields of the contact form. It looks like Shopify have changed the structure of their themes recently...

@shaikhfaiza3785 Жыл бұрын

Hi Ed, your tutorial was amazing as always and I have tried coding as you showed but when I tried sending the contact form with options it does not show choose an option= selected option in the emsil as other field value is shown eg name= faiza please help me with this

@dipanshupansari6296 6 ай бұрын

@shaikhfaiza3785 Hey, if your problem is solved, if yes then please help me in this, I am also facing the same issue.

@tetyananosovska8602 2 жыл бұрын

Hey Ed! thank you for the video. We are looking for Shopify expert to make changes in our store. May it be interesting for you?

@lineart8506 2 жыл бұрын

Great content !!! thank you ED, I need to add a simple field to my contact form. is that possible with Shopify, and do we need to use an external service or third-party app?

@EdCodes 2 жыл бұрын

Not possible, you need to host the file somewhere and Shopify doesn't provide that. So unless you're also going to set up some server space somewhere, you're best off just using a form app.

@kalthelaserguy 2 жыл бұрын

@@EdCodes Can the file not be immediately emailed with a PHP handler? Form > File > Email