We need to add a simple 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?
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.
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 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…
@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?
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.
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
Exactly! 
@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.
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.
Do you have the code for all of this you are saying? Thanks ahead!
Sorry to 90% of people it does not make a lot of sense. As we are all noobs and not so code savie as you.
Thanks, this makes sense!
TL;DR
Shopify wont support file uploads to their servers,
SIMPLE WAY
USE A 3rd PARTY APP, from the apps.shopify.com
If you are technically inclined;
Then above coded solutions using a seperate web server are required for the form / fileupload. You cannot upload to the shopify server from the website.
For anyone interested,
I finished a form application which has file-upload functionality too and integrated it into multiple shopify stores.
The latest forms I have developed:
The form has the following features:
all fields available: including file-upload, input, dropbox, progress-bar, color-picker, date-picker etc.,
a custom success message,
a store-owner email template,
a customer email template,
google sheet integration,
dynamic or multiple email sending,
new features too can be integrated upon request.
Also, you can test the form and get two email templates on your email.
If anyone interested feel free to contact. Thanks.
Thanks for sharing this!
I actually tried your approach and it works really well for bypassing Shopify’s built-in file restrictions on contact forms.
Here’s what I did based on your outline:
Added a regular <input type="file"> field to the form.
Added a hidden text input right after it to store the uploaded file’s URL.
Used JavaScript to listen for the file input’s change event and post the file to my own endpoint (e.g. https://mydomain.com/file-upload.php).
My PHP script saves the uploaded file on the external server and returns the full file URL.
The JS then sets that URL into the hidden field, so when the customer submits the contact form, the URL is included in the email.
Works perfectly — the Shopify email notification now includes a clickable link to the uploaded file.
Thanks again for the simple and effective solution!
Hello @MobWeb ,
I hope you are well!
Basically, the form can be added using the third party app. I would like to let you know that the photo/image with forms can be uploaded with the help of AiTrillion. AiTrillion can create the form using form builder module. If you want to know more feel free to let me know.
You can check our app by visiting - https://www.aitrillion.com/
