How to customize Squarespace forms with CSS // Squarespace Contact Form Tutorial

In this tutorial, you'll learn how to customize the contact form block in Squarespace. To all my long-term fans, you might be thinking, “but Becca - you already did a tutorial form customization like 2 years ago!” and you’re right! I totally did BUT that was the old form block, and today, we’ve got a new one to work with. Squarespace recently updated their custom code options for forms, and I’ve got some exciting new info & design ideas to share with you. 🤩 Get ready to enhance user experience, capture valuable data, and make a lasting impression with your customized Squarespace forms! Here are the selectors used in this tutorial: /* Change the input field border & background */ .sqs-block-form .field-list .field input, .field textarea { border: 1px solid #eee; border-radius: 5px; background: #e5f5f6; } /* Change the focus style */ .sqs-block-form .field-list .field input:focus, .field textarea:focus{ background: #F6EDCE; outline: none!important } /* Change (required) to an asterisk */ .sqs-block-form span.required{ visibility:hidden } .sqs-block-form span.required:before{ content:" * "; visibility:visible!important } /* Change the submit button colors */ .form-wrapper input[type=submit]{ background-color: #A1D9DD!important } .form-wrapper input[type=submit]:hover{ background-color: #EDD17D!important } With the new custom code options we just covered, you can create awesome personalized forms that engage your audience and match your brand perfectly. Forms aren't just for info capture; they're a chance to wow users and give them a seamless experience. So, get creative! BE sure to adjust the colors and borders, and try adding other creative codes to make it uniquely yours. But most importantly, have fun with your Squarespace website. 😉 - - - ❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ https://buymeacoffee.com/insidethesquare - - - 📑 Get access to my collection of CSS codes for Squarespace at https://insidethesquare.co/css - - - ⭐ NEW: List of my top 7 FREE Squarespace tutorials: https://insidethesquare.co/top7 - - - 🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options. - - - 💻 WEBSITE → https://insidethesquare.co 📧 NEWSLETTER → https://insidethesquare.co/email 🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare 👍 FACEBOOK → https://facebook.com/insidethesquare 📌 PINTEREST → https://www.pinterest.com/insidethesquare - - - 💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → https://insidethesquare.co/inside10 - - - The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥