How to attach an image in contact form?

[Dezolutions]

I’m looking for a way to add an image attachment(file input basically) to contact form in Shopify without apps, but it seems like there is no option from Shopify to add file type input to your contact form. Can you share any thoughts on how it could be done?

Mb some way to create your own custom form in theme code? Implement forms from other resources(like iframe) etc.

I would like to hear any ideas even if they might be wrong. Thanks!

[Liam · Accepted solution]

Hi Dezolutions,

The main challenge here is that Shopify's backend can't process file attachments that are added to native form components. You'll need an external service to handle the file upload and then send the file link or details to your email.

One possible solution is to use an external service (like AWS Lambda, or Vercel) to handle the file upload, store the file, and then forward the form data along with the file URL to you (and also maybe the customer).

If you used AWS for example the general process would be:

• Create a custom HTML <form> component in your theme that doesn't use the native `{% form %}` tags and give it a <input type="file> element where customers can attach files.
• Create an S3 bucket where you'll store the uploaded files.
• Set up a Lambda function that will handle the file upload send an email to you with the file.
• Use AWS API Gateway to expose your Lambda function as an HTTP endpoint.
• Return back to the custom form on your Shopify theme and update your form's action attribute to point to the API Gateway URL you got in the previous step. 
• Then when you submit the form with a file, the file should be stored in S3 and you should receive an email with the form details and the file link.

This is just the high-level approach but it is certainly doable via an external service. Hope this helps!

[Dezolutions]

Thanks!
Even though it's a little bit hard to accomplish it works fine!

[Liam]

Great to hear Dezolutions!!

[FormDeveloper]

This can also be accomplished through
  * a digitalocean app (deploying api),
  * a digitalocean space (storing files).

I developed a custom form and implemented it on multiple shopify stores.
Anyone can test form live too and see the result on their email.

Latest forms I have finished: Industry Discount Form, Custom Design Form,  Contact Form.

If anyone interested I can build for him too, feel free to get in contact (at the top of form files).

The form has the following features: 

  * all fields (custom) available: including file-upload,

  * a custom success message,

  * a store-owner email template,

  * a customer notification email template,

  * google sheet integration,
  * dynamic email sending,
  * conditional logic,

  * multiple forms and stores available,

  * new features too can be integrated upon request.

Thanks,

Kind regards.

[violinist01]

Hi - Saw your reply on this thread. Wonder if you might be able to help us add a file-upload submit functionality to this form down at the bottom? From what I've been reading, this might be a brittle feature in Shopify but would be curious about your experience with this. Thanks and all best, Gabe