How to customize the file upload field in a Squarespace form

People can now submit files directly through your Squarespace form. Whether it’s a photo, a resume, or a design mockup, you can collect exactly what you need without the hassle of back-and-forth emails.

We know what you’re thinking: “Sounds amazing, but how do I even start?” Don’t worry, I’ve got you covered! 😉 

In this blog post, and the tutorial video below, I’ll walk you through the step-by-step process of adding a file upload field to your Squarespace form. I’ll even you some cool CSS tricks to customize the look and feel to match your brand perfectly.

You’ll also get helpful tips for optimizing your file upload field, like setting file size limits and specifying allowed file types. This way, you can make sure your form runs smoothly and only accepts the files you need.

Whether you’re a seasoned Squarespace pro or just starting out, this tutorial is perfect for you. Checkout the video below for an easy-to-follow tutorial to guide you along. By the end of this post, you’ll be a file upload expert, ready to impress your clients and streamline your workflow.

So, are you ready to unlock the power of file uploads on your Squarespace forms? Let’s get started!

Here are the codes used in this tutorial.

Be sure to edit the values so they match the style of your own website!

/* change the upload field style - code from insidethesquare.co */
.file-upload{
background:#fff;
border-style:solid
}

/* customize the upload + icon - code from insidethesquare.co */
.eUutwLaLZHC95NpNx_PG{
background:pink;
border-radius:0!important
}

/* Change the “add your file” text to a custom message - code from insidethesquare.co */
.utsR_PbuBlohcFioliRe{
font-size:0
}
.utsR_PbuBlohcFioliRe:after{
content:"replace this with your text";
font-size:1rem;
font-family: serif
}