Return to articles
Free File Uploads in Webflow
Tutorials

Free File Uploads in Webflow

Add a simple upload field to your webflow forms. Capture all types of images with ease and for free

January 29, 2019

Hey guys,

In this guide we're breaking down how to implement and style a free file uploader into your webflow forms.
An example of this is the submit form on flowbase.co

This guide is based on and uses the Uploadcare platform.
Uploadcare provides a free tier is limited to 500 uploads, or 500mb.
Images are allowed by default, however you will need to add billing to use all file types.

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

You will now need to create an account, and access your API key - located on your dashboard.
With an account, we need to add this script and replace it with our key.

<script>UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';</script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" data-integration="Webflow"></script>

Now add a custom attribute to a new or existing text input and apply the attribute role="uploadcare-uploader" to allow the widget to work in your form.

Hide that input by giving it a specific class, “hide,” for instance. Then, set it to display none in the Webflow editor.


Style the upload button

In order to style the button you will require some basic CSS knowledge. Or maybe even google the elements you need changed.
Here's what I've used to get you started.

<style></style>
.uploadcare--widget {
width: 100%;
}
.uploadcare--widget__button_type_open {
width: 100%;
min-width: 150px;
background: #01ccbe;
padding: 8px;
color: white;
border-style: solid;
border-width: 1px;
border-color: rgba(1, 204, 190, .15);
border-radius: 40px;
font-family: Karla;
cursor: pointer;
}
.uploadcare--widget__button_type_open:hover {
background: #19b3a8;
font-family: Karla;
}
}


That's it, hope it helps

ABOUT THE AUTHOR

Enjoyed this read?

Stay up to date with the latest video business news, strategies, and insights sent straight to your inbox!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Recieve webflow resources directly to your mailbox.

Sign up to get weekly insights & inspiration in your inbox.

OTHER GUIDES & LESSONS

Boost your webflow site further.