← All Scripts

#99 - Custom File Inputs v0.1

Turn anything into a file input!

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo

document.addEventListener('DOMContentLoaded', function () {
  const uploadButtons = document.querySelectorAll('[ms-code-file_uploader]');

  uploadButtons.forEach(button => {
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.style.display = 'none';
    fileInput.name = button.getAttribute('ms-code-file_uploader');
    fileInput.accept = button.getAttribute('ms-code-file_types');


    button.addEventListener('click', function (e) {

    fileInput.addEventListener('change', function () {
      const fileName = fileInput.files[0].name;
      button.querySelector('div').textContent = fileName;
No items found.

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to Make a Custom Styled File Input in Webflow

Memberscripts needed





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.


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.

A screenshot of a file uploadDescription automatically generated

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