Adding <input type="file"> to contact form?

MobWeb
Shopify Partner
12 0 7

We need to add a simple <input type="file"> field to our contact form, for our customers to upload a photo.

I found some old forum posts stating this is not possible with core Shopify, and we need to use an external service or third-party app for that.

Is that still the case in 2020?

0 Likes
GCWebTeam
Shopify Partner
89 12 49

Hi MobWeb,

I have encountered this problem before. Basically Shopify does not support file upload from a website.

The very easy fix is to use an app, this one I have used and is free to a limit

https://apps.shopify.com/form-builder-by-hulkapps

But I'm sure there are others. The form builder is easy to use, and its one ( long ) line to insert onto a webpage for your site.

Simple and solves your problem.

Dan from GCWebTeam .com | Shopify Partner | If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution. Want to modify or make custom changes on your store? I'm available for hire! Website: GCWebteam.com
MobWeb
Shopify Partner
12 0 7

Figured out a more or less simple way of doing this, all that is needed is an external web server that can receive file uploads:

- Add an <input type="file" /> field to the Shopify contact form

- Add a hidden text field after the file input field, that will hold the URL to the uploaded file

- Add a Javascript handler for the input field's "change" event

- On change, use XMLHttpRequest to send the file from the field to an external web server. Unfortunately its not possible to add custom files to our Shopify webspace, so I had to use an external server, something like: https://example.com/file-upload.php

- In file-upload.php, handle the file upload and save the uploaded file on the external server

- Have file-upload.php respond with the full path to the uploaded file, for example: https://example.com/upload/file.png

- Add this full path to the hidden input field that was created earlier

- Optionally add an indication that the file was successfully uploaded

When the customer submits the form, the hidden input fields will contain the full URL to the file that was uploaded

I hope this basic write-up can help someone. If anybody needs more information just ping me here...

Umermasood
New Member
3 0 0

@MobWeb  Could you kindly post or reply some practical code as an example, i don't have any idea that how will I send the image URL to any external server and will get the full path and then add through the hidden input field?

0 Likes
MobWeb
Shopify Partner
12 0 7

@Umermasood 

My description is already pretty detailed, I'm sure a developer would be able to implement something based on it. If you are stuck, I would suggest getting in touch with an agency or freelancer working with Shopify to implement it for you.

Bandab1
New Member
1 0 0

He can you please help me.

wait for your email

info.hotiftik@gmail.com

0 Likes
adreiu
New Member
1 0 0

hi Mobweb and thank you to share this info with us.....but i don't see the example of the file-upload.php in your link....can you share  another  https://example.com/file-upload.php? thanks

0 Likes
belowyellow
New Member
1 0 0

Exactly!

0 Likes
Filicks
New Member
1 0 0

@MobWeb Hey Mate! 

It was a really a good solution but can you please share us the code of your whole solutions if possible?

Cheers.

0 Likes
Jason
Shopify Expert
10360 158 2010

The Shopify contact form doesn't support file uploads.


To get files you'd need to explore third party apps, or consider building one. The php method above is leading into that custom work but isn't something that would be possible to give a step by step guide here on the forums. Some level of coding experience would be preferred.

At the most basic level, services like Jotform, Cognitio Forms, and others just like it would let you add something for file uploads but be aware the contact form would no longer be handled by Shopify.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★