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

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

[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.

[magnapix]

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

[ChasesonSmith-bb]

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?

[riley]

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!

[tesskelly]

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.

[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!

[Jenny-yyob]

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

[plagueddemon]

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

[JezWilson-cs]

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.

[danielvecino]

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

[joelbraich]

this video is amazing!! thank you so much

[mrs.bernard]

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

[IK-rjyp]

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

[ginaharesco]

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

[Unknwn_User]

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.

[sssafeawareness]

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

[mrs.bernard]

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?

[blakemarsden]

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!

[Zota]

HI, Can I make upload image file for the custom filed on the Contact page?

[josemariramirez]

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.