Forms with File Upload

Learn how to create forms that accept file uploads including images, documents, and videos. Pro Plans support up to ~95-100 MB total file size per form submission.

File Upload Limits

Pro Plans: File uploads are available for Pro Plans. Up to ~95-100 MB total file size per form submission (including all files combined)

Basic Plans: File uploads are available temporarily for testing purposes only. This feature may be removed or restricted in future updates for Basic plans.

Supported File Types:

Images: JPG, PNG, GIF, WebP
Documents: PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, TXT, CSV
Videos: MP4, MOV, AVI, WebM, MKV, WMV, FLV, 3GP

Files are automatically uploaded to secure storage and accessible through your dashboard.

Implementation

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

Client-Side File Size Validation

Add client-side validation to check file sizes before submission:

File Size Validation Script

<script>
function validateFileSize(input) {
  const maxSizeMB = 100; // Total limit for Pro Plans (~95-100 MB)
  const maxSizeBytes = maxSizeMB * 1024 * 1024;
  let totalSize = 0;
  
  if (input.files) {
    for (let i = 0; i < input.files.length; i++) {
      totalSize += input.files[i].size;
    }
  }
  
  if (totalSize > maxSizeBytes) {
    alert(`Total file size exceeds ${maxSizeMB} MB limit. Please reduce file sizes.`);
    input.value = '';
    return false;
  }
  
  return true;
}

// Add to your file input
document.getElementById('documents').addEventListener('change', function() {
  validateFileSize(this);
});
</script>

Accessing Uploaded Files

Once files are uploaded, you can access them through:

Dashboard: View and download files from the Form Responses section
Lead Activities: Files are attached to lead records for easy tracking

Related Resources

Getting Started

Learn the basics of form submission

View Guide →

Form Configuration

Notifications, redirects, and form settings

View Guide →

Need Help?

Our support team is here to help you with your integration.

Contact Support

Implementation

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

Client-Side File Size Validation

Add client-side validation to check file sizes before submission:

File Size Validation Script

<script>
function validateFileSize(input) {
  const maxSizeMB = 100; // Total limit for Pro Plans (~95-100 MB)
  const maxSizeBytes = maxSizeMB * 1024 * 1024;
  let totalSize = 0;
  
  if (input.files) {
    for (let i = 0; i < input.files.length; i++) {
      totalSize += input.files[i].size;
    }
  }
  
  if (totalSize > maxSizeBytes) {
    alert(`Total file size exceeds ${maxSizeMB} MB limit. Please reduce file sizes.`);
    input.value = '';
    return false;
  }
  
  return true;
}

// Add to your file input
document.getElementById('documents').addEventListener('change', function() {
  validateFileSize(this);
});
</script>

Forms with File Upload

File Upload Limits

Implementation

Form with File Upload

Important Notes:

Form with AJAX File Upload

Best Practices:

Client-Side File Size Validation

File Size Validation Script

Accessing Uploaded Files

Related Resources

Getting Started

Form Configuration

Need Help?

Forms with File Upload

File Upload Limits

Implementation

Form with File Upload

Important Notes:

Form with AJAX File Upload

Best Practices:

Client-Side File Size Validation

File Size Validation Script

Accessing Uploaded Files

Related Resources

Getting Started

Form Configuration

Need Help?

Thank you for scheduling a demo!

Thank you for your request!

Forms with File Upload

File Upload Limits

Implementation

Form with File Upload

Important Notes:

Form with AJAX File Upload

Best Practices:

Client-Side File Size Validation

File Size Validation Script

Accessing Uploaded Files

Related Resources

Getting Started

Form Configuration

Need Help?

Forms with File Upload

File Upload Limits

Implementation

Form with File Upload

Important Notes:

Form with AJAX File Upload

Best Practices:

Client-Side File Size Validation

File Size Validation Script

Accessing Uploaded Files

Related Resources

Getting Started

Form Configuration

Need Help?

MyFormCapture - Request Demo

Thank you for scheduling a demo!

MyFormCapture - Any issues?

Thank you for your request!

MyFormCapture - Tailored Solution