How to Make a Custom Styled File Input in Webflow

Memberscripts needed

https://www.memberstack.com/scripts/99-custom-file-inputs

Tutorial

Cloneable

https://webflow.com/made-in-webflow/website/custom-file-uploader?utm_medium=affiliate&ps_partner_key=ZHVuY2FuaGFtcmE1MTg5&ps_xid=rpPEnX89mdEqNQ&gsxid=rpPEnX89mdEqNQ&gspk=ZHVuY2FuaGFtcmE1MTg5

Why/When Would you need to Make a Custom Styled File Input in Webflow?

1. Replace the default HTML file input with one that is more in line with your site’s design.
2. Improve your UI with a nicer looking HTML file input.

As you’re probably well aware, you can’t style HTML file inputs in Webflow.

However, this guide will show you how to work around that limitation and use a custom-styled file input which is a better fit for your site’s design.

Keep in mind that just creating this custom styled file input won’t allow you to pass files through your form. For that, check out Memberscript #97 for uploading to an S3 bucket or this demo for uploading to Google Drive.

Making a custom-styled file input in Webflow

To make a custom-styled file input in Webflow, we’re going to use MemberScript #99 – Custom File Inputs. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

The first thing you’ll need to do is create a button and style it however you want.

Make sure there is a text block inside it as this text will change to show the name of the file your users have selected.

Select the text block and add the following attributes to it:

• ms-code-file_uploader=”cv” – you can just replace “cv” with whatever you want the name of the file input to be.
• ms-code-file_types=”application/pdf,image/png” – you can use any MIME types you want depending on the type of files you expect from your users. These essentially restrict the file types that users can upload.

Making it work

Now that you’ve got your custom button and you’ve added the appropriate attributes, all you need to do is add the MemberScript #99 custom code to your page, before the closing body tag.

Schlussfolgerung

That’s everything, you can now go ahead and test your custom styled file input on your live site.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you add a custom styled file input on your website to better match the rest of its design.

Take me to the Scripts