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://myformconnect.io/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://myformconnect.io/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