Solved

How to attach an image in contact form?

Dezolutions
Shopify Partner
4 0 1

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!

Accepted Solution (1)

Liam
Shopify Staff
2731 297 768

This is an 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!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 3 (3)

Liam
Shopify Staff
2731 297 768

This is an 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!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Dezolutions
Shopify Partner
4 0 1

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

Liam
Shopify Staff
2731 297 768

Great to hear Dezolutions!!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog