How to attach an image in contact form?

Retired Boards Appdev Store Design
,

Topic summary

Adding an image/file upload to a Shopify contact form without apps.

Key constraint: Shopify’s native contact form ({% form %}) cannot process file attachments server‑side, so uploads must be handled externally.

Working approach (confirmed by the original poster):

  • Build a custom HTML form (not using {% form %}) with an input type=“file”.
  • Use AWS components: S3 (file storage), Lambda (serverless function to process upload and send email), and API Gateway (HTTP endpoint).
  • Point the form’s action to the API Gateway URL. On submit, the file is stored in S3 and an email is sent with the form details and file link.

Alternative stack: DigitalOcean app (API) + DigitalOcean Spaces (storage). A developer offers custom forms with features including:

  • File upload, custom success message, store-owner and customer email templates.
  • Google Sheets integration, dynamic email routing, conditional logic, support for multiple forms/stores, and extensibility. Demo links provided.

Status:

  • The AWS-based method was implemented and reported working (though somewhat complex).
  • A new participant requested help adding file upload to an existing form; a screenshot was shared. The thread remains open for that request.
Summarized with AI on December 24. AI used: gpt-5.
2

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

4 Likes