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
Fancy a Free Quote?
Got a crazy idea? We’re all ears. Reach out, share your story, and let’s make some magic together. Click below to get your free quote.
