Webflow Forms

Uploading Files with Uploadcare

Overview
Webflow Forms Basics
001
Webflow Forms Limitations & Bugs
002
Basic Form Controls
Form Select
051
Form Textarea
052
Customizing Input Controls
Customizing Radio Buttons & Checkboxes
101
Input Number & Decimal Places
102
Numeric Range Sliders
102
Multi-Select Dropdown
104
Auto-Size Textareas
110
Date Pickers
111
Forms Validation
Forms Validation Basics
200
Input Types
201
Using Regex Patterns in Forms Validation
202
Validating Phone Numbers
202
Custom Validation Errors
203
Forms Validation Techniques
Validating Emails
301
Blocking Free Email Provider Addresses
302
Requiring Checkboxes
302
Address Autocomplete
302
Autocomplete / Predictive Input
302
International Phone Numbers
6:50
304
Databinding
Databinding CMS Collections to a Form Select
8:42
401
Forms Validation Techniques
3rd Party Form Handlers
401
Making Forms Dynamic
Displaying Form Parts Conditionally
14:36
501
Multi-Step Forms (MSFs)
501
SPAM Blocking Techniques
Minimizing Form Submission SPAM
600
SPAM Blocking Techniques
CAPTCHA Approaches
601
Form Handlers
3rd Party Form Handlers
901
Integrating the Basin Form Handler
902
Uploading Files
Uploading Files
950
Uploading Files with Uploadcare
951
Uploading Files with Basin
952
No items found.
Published
March 21, 2024
Updated
March 21, 2024
in lightbox

Uploadcare provides a specialized service for handling file uploads, and it integrates well with Webflow forms.

Key features;

  • Supports multiple file uploads
  • Has a generous free plan
  • The "group" URL for the file set will be added to the email
    • You can also configure it to send individual file URLs

Adding Uploadcare to a Form

  1. Create an account on the Uploadcare site.
  2. Add this block of code in an Embed inside of your form element.
  3. Make certain to replace YOUR_PUBLIC_ KEY with your own key from your account.

Code;

Email Notifications

The uploader will add a hidden input element that will be populated with a CDN URL of a group of uploaded files. Once the form is submitted, the URL will be attached to the form data and sent to your form handler along with other fields. If you want to send each file URL as a separate field, just remove the group-output attribute from lr-config.

Files as Email Attachments

This can also be achieved using a 3rd party automation service like Zapier or Make.

Here's a template for Zapier: https://zapier.com/apps/email/integrations/webflow/7041/send-emails-for-new-webflow-form-submissions.

Notes

Pricing

Uploadcare has a generous free plan, however it has a steep first step in its pricing model once you leave the free plan. Make certain to budget accordingly.

https://uploadcare.com/docs/integrations/webflow/

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.