Create a form with file upload fields. Make sure to include enctype="multipart/form-data" in your form tag.
Form with File Upload
<form action="https://myformcapture.com/f/YOUR_FORM_UUID_HERE" method="POST" enctype="multipart/form-data">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<input type="tel" name="phone" placeholder="Phone Number">
<!-- Single file upload -->
<label for="resume">Upload Resume (PDF, DOC, DOCX)</label>
<input type="file" name="resume" id="resume" accept=".pdf,.doc,.docx">
<!-- Multiple file upload -->
<label for="documents">Upload Documents (Multiple files)</label>
<input type="file" name="documents[]" id="documents" multiple accept=".pdf,.doc,.docx,.jpg,.png">
<!-- Image upload -->
<label for="photo">Upload Photo</label>
<input type="file" name="photo" id="photo" accept="image/*">
<!-- Video upload -->
<label for="video">Upload Video (MP4, MOV)</label>
<input type="file" name="video" id="video" accept="video/*">
<button type="submit">Submit</button>
</form>
Important Notes:
- Always include
enctype="multipart/form-data" for file uploads
- Use
multiple attribute to allow multiple file selection
- Use
accept attribute to restrict file types (optional but recommended)
- Total file size limit: ~95-100 MB for Pro Plans (all files combined)
- Files are automatically processed and stored securely
Use JavaScript with FormData to handle file uploads via AJAX, including progress tracking.
Form with AJAX File Upload
<form id="upload-form">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<input type="tel" name="phone" placeholder="Phone Number">
<label for="resume">Upload Resume</label>
<input type="file" name="resume" id="resume" accept=".pdf,.doc,.docx">
<label for="documents">Upload Documents (Multiple)</label>
<input type="file" name="documents[]" id="documents" multiple>
<!-- Progress bar -->
<div id="progress-container" style="display: none;">
<div class="progress-bar">
<div id="progress-bar" style="width: 0%; background: #3b82f6; height: 20px; transition: width 0.3s;"></div>
</div>
<span id="progress-text">0%</span>
</div>
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('upload-form').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
const progressContainer = document.getElementById('progress-container');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
// Show progress bar
progressContainer.style.display = 'block';
fetch('https://myformcapture.com/f/YOUR_FORM_UUID_HERE', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Upload failed');
})
.then(data => {
progressBar.style.width = '100%';
progressText.textContent = '100%';
setTimeout(() => {
alert('Thank you! Your files have been uploaded successfully.');
this.reset();
progressContainer.style.display = 'none';
progressBar.style.width = '0%';
progressText.textContent = '0%';
}, 500);
})
.catch(error => {
alert('Error uploading files. Please try again.');
console.error('Error:', error);
progressContainer.style.display = 'none';
});
});
</script>
Best Practices:
- Use
FormData to handle file uploads in JavaScript
- Show progress indicators for large file uploads
- Validate file types and sizes on the client side before submission
- Handle errors gracefully with user-friendly messages
- Reset the form after successful submission