How To Create Custom Contact Forms in Shopify [Add more fields]

Рет қаралды 9,366

Күн бұрын

Do you need to create a custom contact form for your Shopify store?
In this video, I'll show you how to create a custom input field contact form in Shopify. This can be really handy if you need to gather specific information from your customers, or if you want to add an extra layer of security by requiring customers to fill out a contact form before they can reach out to you.
Adding custom contact forms to your Shopify store is a great way to gather information from your customers. In this video, I'll show you how to create three different types of custom contact forms: an input field contact form, a drop-down field contact form, and a checkbox field contact form.
You'll learn how to add the forms to your store, customize the fields, and configure the email notifications.
00:00 Intro
01:00 Editing code in Shopify
02:40 Adding text input field in Shopify contact form
03:30 Renaming text input field in Shopify contact form
05:00 Adding drop down field in Shopify contact form
06:45 Adding checkbox field in Shopify contact form
08:05 Adding Radio button field in Shopify contact form
09:30 Testing all fields
Code: websensepro.com/blog/how-to-c...
If you want help with Shopify Customization, store development, or any other web development help. Contact us at websensepro.com/contact-us/

Пікірлер: 69

@WebSensePro 3 күн бұрын

kzfaq.info/get/bejne/d5iViq91yKyzqZc.html Checkout updated tutorial here

@magnapix8796 Жыл бұрын

Absolutely amazing, must have watched 5 other videos on how to do this and your's is the only one that worked!

@WebSensePro 11 ай бұрын

Glad it helped dont forget to subscribe

@mrs.bernard5415 Жыл бұрын

You are amazing!!! I love your content and how easy you are able to instruct us. New subbie!!

@WebSensePro Жыл бұрын

Thanks

@joelbraich1187 Жыл бұрын

this video is amazing!! thank you so much

@WebSensePro Жыл бұрын

Your welcome

@omakasejapanwholesaleplatf4039 Жыл бұрын

You are great! Thank you!

@WebSensePro Жыл бұрын

Thanks for appreciation, if this video/channel you helped in any way please support by Subscribing and Hit the Like button.

@albertoaranda1799 Жыл бұрын

Thank so much!

@WebSensePro Жыл бұрын

You're welcome! Dont forget to subscribe and turn on notifications

@PhoenixFilmTV Жыл бұрын

This was a great tutorial and great resource for me. Shopify couldn't help me make a second contact form, I duplicated the original form and edited it using your code with custom fields. fantastic! Thank you.

@WebSensePro Жыл бұрын

Glad it helped! Don't forget to like, share and subscribe

@mikkelhaaning6546 Жыл бұрын

@@WebSensePro Hi. Great video!! Liked and subscribed! I did the same thing as @phoenixFilm but i experienced that the "send" button instead of showing the "thank you for your message...." it redirected the page to my front page. Can you guide me fix that?

@WebSensePro Жыл бұрын

@@mikkelhaaning6546 Please email websensepro@gmail.com with your Store URL and a screen recording of the issue so we can help you fix the issue

@mikkelhaaning6546 Жыл бұрын

@@WebSensePro Thank you will do!

@mikkelhaaning6546 Жыл бұрын

@@WebSensePro E-mail sent!

@sssafeawareness Жыл бұрын

Thanks Mate. Worked really well. How can I create a required field?

@danielvecino9879 Жыл бұрын

Thanks for this! Any way to make the custom questions nested? I’d like for specific custom questions to appear when an option from the dropdown menu is selected

@WebSensePro Жыл бұрын

Yes, can be easily done with jQuery

@tesskelly5790 8 ай бұрын

This is a great tutorial! are you able to update it for Dawn thems 12.0? I see the field son my form but the data is not being captured in the email.

@WebSensePro 8 ай бұрын

Sure, on the list of videos to make

@riley9057 Жыл бұрын

Hi! Such a great video and so helpful! We're now on Sense 8.0 so the CSS for the dropdown menu isn't quite working for us. How can I update this so that the CSS comes through for the dropdown menus? Also, is it possible to have a placeholder question for the dropdown? For eg. "How did you hear about us?" and then the answers listed in the dropdown? Thanks so much!

@WebSensePro Жыл бұрын

Yes possible but liquid code required

@KING0HENRY 3 ай бұрын

hey great video you have really helped me a lot can you also show how to insert a file insert box into the contact form ?

@WebSensePro 3 ай бұрын

Hmm... good question, will prepare a video for that

@MinaRazo Жыл бұрын

Hello! Thanks so much for the awesome video. Everything worked great and the directions were clear as day. I had a question, am I able to duplicate the contact form liquid so I have two contact options on my website? I want a contact option that asks just for basic information and then a contact option that is for business inquiries, so I would need two separate contact forms that differ from each other. Is this possible? Thanks so much in advance!

@WebSensePro Жыл бұрын

Yes you can! You will have to create 2 different section files

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

So I did do this and everything looks great! Thanks man! Only thing is on the check box, if they fill out multiple boxes for some reason it only shows me 1 option they selected when they selected 3 options. How do I fix this so I make sure I get all the information after they submit it?

@WebSensePro Жыл бұрын

That is correct it will only shop 1 option as for multi option code will need to be changed

@ginaharesco3765 Жыл бұрын

Thanks for the great video! How do you make a field required?

@WebSensePro Жыл бұрын

You can try adding required in HTML code like this www.w3schools.com/tags/att_input_required.asp

@Jenny-yy7ob Жыл бұрын

Hello!! Thanks a lot for the tutorial!! I'd like to know how to change the add-on fields' color of context because it defaults to black instead of following the theme settings

@WebSensePro Жыл бұрын

Super simple with a little bit of CSS coding change

@Jenny-yy7ob Жыл бұрын

@@WebSensePro Thank you for replying!!! May I know the CSS coding :) not sure how to modify one myself🙏

@user-nr3ez3et3e 6 ай бұрын

Thanks for this, one issue as I think shopify changed on the front end input box I now get 'Translation missing in: en.templates.contact.form. NEW FIELD NAME where can i fix this? Using ride theme.

@WebSensePro 6 ай бұрын

Can't tell without actually seeing your code which you added

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

Hi thanks for the codes for contact form. Excellent work. I have one question. The drop-down on the contact form shows double frame. Is it possible to display single frame so that it looks like other fields. Any help is appreciated. BTW I am using Dawn 2.0

@WebSensePro Жыл бұрын

You can use CSS to syle it btw you are using dawn 2.0? Thats really old version

@mrs.bernard5415 Жыл бұрын

@@WebSensePro How? I am having same issue - square around the circle - how can I remove in refresh theme please?

@vvss958 Жыл бұрын

Awesome 👍 In drop down block how to make it curve edge because currently using sense theme and all the other field are in curve edge

@WebSensePro Жыл бұрын

Add border radius via CSS

@vvss958 Жыл бұрын

@@WebSensePro Thanks, added now looks perfect

@WebSensePro Жыл бұрын

@@vvss958 your welcome dont forget to subscribe

@mrs.bernard5415 Жыл бұрын

@@vvss958 hi where exactly do you add border radius in the css area please? the word border radius? What line number? thanks

@vvss958 Жыл бұрын

@@mrs.bernard5415 You need to add "border-radius: 100px 100px" css to this "#ContactForm .field select" adjust the px according to your requirement

@josemariramirez7475 6 ай бұрын

It is work and send it to my email if I set the form to the customer account Page. I need the form for my customer account.

@WebSensePro 6 ай бұрын

Not sure what you mean here

@mrs.bernard5415 Жыл бұрын

so my contact area has rounded boxes vs your square angle boxes. Everything worked fine except I have a sqaure outline around the circle - how do i remove please?

@WebSensePro Жыл бұрын

Can be easily done via few line of CSS code

@plagueddemon 8 ай бұрын

is there a way to restyle the way the drop down fields look when they are loaded up in iOS systems?

@WebSensePro 8 ай бұрын

Yes you can use CSS like following: @supports (-webkit-touch-callout: none) { /* CSS specific to iOS devices */ } @supports not (-webkit-touch-callout: none) { /* CSS for other than iOS devices */ }

@squish085 Жыл бұрын

None of the custom fields show up in the actual sent email which makes adding them kind of pointless. How do I fix this?

@WebSensePro Жыл бұрын

Thats weird, which theme you are using?

@Unknwn_User 5 ай бұрын

How would I make multiple contact pages and point them to different links. I would like to create a sign up page that is different from my contact page.

@WebSensePro 5 ай бұрын

Contact form and Sign Up form are different things

@blakemarsden910 Жыл бұрын

hi there, what css can I add to stop the text from overflowing the container on mobile - it flows into the next question even when typing the placeholder text is over the top of the typed text. Thankyou!

@WebSensePro Жыл бұрын

Hi Blake, can you share screenshot of the issue

@blakemarsden910 Жыл бұрын

@@WebSensePro do you have an email I can send it to?