File Upload for Squarespace Forms: How To Create & Customize File Upload Field in Squarespace

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

About This Tutorial

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

I’m super excited to share a game-changing feature: file uploads for Squarespace forms.

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 video tutorial below, I’ll walk you through the step-by-step process of adding a file upload field to your Squarespace form. I’ll also show you some cool CSS tricks to customize the look and feel to match your brand perfectly.

I’ll also share some 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!

Squarespace Tutorial

Here are some helpful timestamps for the video above:

00:00 - Intro & Adding a File Upload Field

00:26 - Customizing File Upload Settings

01:05 - Required Fields & File Types

01:26 - Matching Form Field Style with CSS

02:16 - Customizing the File Upload Button

04:38 - Changing the Button Shape

05:07 - Customizing the "Add File" Text

Code Example

Here are the codes used in this tutorial.

You’ll find more selectors and style plugins like this inside the Squarespace CSS cheat shet, available at insidethesquare.co/css

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

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

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

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

If you found this tutorial helpful, you can Buy Me A Coffee to say thanks!
Your contribution will help me keep this content free for our Squarespace community.

---

Related Content

📖 Beginners Guide to Squarespace CSS → insidethesquare.co/learn

💌 Join my weekly email list → insidethesquare.co/email

📖 Squarespace CSS Cheat Sheet → insidethesquare.co/css

🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help