Add mobile camera access to your Webflow forms

Enable mobile users to access their device camera directly from file upload fields in Webflow forms.

Javascript

Copy Code

<!-- Use file upload to access camera -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const fileInput = document.querySelector('#file');

  if (fileInput) {
    fileInput.setAttribute('capture', 'environment');
    fileInput.setAttribute('accept', 'image/*');
  }
});
</script>

How to set it up:

Add a file upload field to your Webflow form with the ID 'file'
Paste this code in your page's custom code section (before </body> tag)
Update the querySelector to match your file input's ID (if different)

How it works:

The 'capture' attribute tells mobile browsers to access the camera directly
Setting it to 'environment' uses the rear camera (use 'user' for front camera)
The 'accept' attribute ensures only image files are accepted
On mobile devices, tapping the file input will prompt camera access instead of file browser