How to integrate a file field into a contact form using Liquid?

Store Design

Topic summary

Problem: Ein Benutzer versucht, ein Datei-Upload-Feld in ein Shopify-Kontaktformular mittels Liquid zu integrieren. Das Feld wird zwar angezeigt, ist aber funktionslos, und das Formular erscheint ungewollt auf jeder Seite.

Technische Einschränkung: Shopify’s natives Backend kann keine Dateianhänge verarbeiten, die über Standard-Formularkomponenten hochgeladen werden.

Vorgeschlagene Lösung:

  • Verwendung eines externen Services (z.B. AWS Lambda, Vercel) zur Dateiverarbeitung
  • Erstellung eines benutzerdefinierten HTML-Formulars (ohne native {% form %}-Tags)
  • Einrichtung eines AWS S3-Buckets zur Dateispeicherung
  • Implementierung einer Lambda-Funktion zum Handling des Uploads und E-Mail-Versands
  • Nutzung von AWS API Gateway als HTTP-Endpoint
  • Verknüpfung des Formulars mit der API Gateway-URL

Status: Die Diskussion bleibt offen; es wurde eine high-level Lösung skizziert, aber keine vollständige Implementierung bereitgestellt.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hey,

ich habe ein Frage bezüglich des Kontaktformulars. Ich versuche über einen Liquid ein Dateifeld in das Kontaktfeld zu intergrieren. Damit soll man Bilder oder andere Dateien hinzufügen können. Das Feld ist zwar anwesend, ist aber noch ohne Funktion und somit nutzlos, darüberhinaus wird dieses Formular nun auf jeder Seite angezeigt. Muss man eine extra Verknüpfung für dieses Feld machen? Könnte mir jemand bei diesen beiden Problemen helfen? :slightly_smiling_face:

Liquid code:

/* CSS für das Formular-Layout */ .contact-form { padding: 0 20px; /* Innerer Abstand links und rechts für Mobilgeräte */ margin: 20px auto; /* Zentrierung und äußerer Abstand für Desktop-Bildschirme */ max-width: 600px; /* Maximale Breite des Containers */ } .contact-form label { display: block; /* Blockelement machen, um Labels unterhalb der Felder anzuzeigen */ margin-bottom: 10px; /* Abstand zwischen den Feldern und ihren Labels */ } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea, .contact-form input[type="file"], .contact-form button { width: 100%; /* Felder sollen die volle Breite des Containers einnehmen */ border-radius: 8px; /* Abrundung der Felder */ font-family: Arial, sans-serif; /* Ändern des Fonts */ padding: 15px; /* Innenabstand für Felder und Button */ box-sizing: border-box; /* Berechnung von padding und border innerhalb der Breite */ margin-bottom: 15px; /* Abstand zwischen den Feldern */ } .contact-form input[type="email"] { margin-top: 0px; /* Abstand zur oberen Kachel */ } .contact-form .split { display: flex; /* Flexbox verwenden, um Kacheln nebeneinander anzuordnen */ margin-bottom: 0px; /* Abstand zwischen den Kacheln */ } .contact-form .split input[type="text"], .contact-form .split input[type="email"], .contact-form .split textarea, .contact-form .split input[type="file"] { flex: 1; /* Gleiche Breite für alle Kacheln */ border-radius: 8px; /* Abrundung der Felder */ font-family: Arial, sans-serif; /* Ändern des Fonts */ padding: 10px; /* Innenabstand für Felder und Button */ box-sizing: border-box; /* Berechnung von padding und border innerhalb der Breite */ } .contact-form .split input[type="text"] { margin-right: 5px; /* Abstand zwischen dem Namen- und E-Mail-Feld */ } .contact-form button { background-color: #000; /* Hintergrundfarbe des Buttons */ color: #fff; /* Textfarbe des Buttons */ border: none; /* Keine Rahmen um den Button */ cursor: pointer; /* Zeiger beim Überfahren des Buttons */ } /* Media Queries für Mobilgeräte */ @media only screen and (min-width: 600px) { .contact-form { padding: 0; /* Innerer Abstand für Desktop-Bildschirme aufheben */ margin: 20px auto; /* Zentrierung und äußerer Abstand beibehalten */ max-width: calc(100% - 700px); /* Maximale Breite des Containers für Desktop-Bildschirme */ } }

Senden

Bildschirm­foto 2024-04-01 um 23.05.06.png
Bildschirm­foto 2024-04-01 um 23.05.06.png2880×1800 334 KB

2

Hi @Nties ,

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!