Advanced CSS: Adding Conditional Form Fields to My Donation Block in Squarespace 7.1

In this video I explore how I used some really neat CSS selectors that enabled me to create conditional form fields that could be shown or hidden based on responses in previous form fields. This was needed because donation block forms don't support conditional fields yet. 🔗 Links: ✅ Get the Code: Related Resources: 💻 Free Squarespace CSS Beginners Course: https://schwartz-edmisten.com/learn-css-4-day-ecourse 📝 Free Squarespace Design Course: https://schwartz-edmisten.com/custom-layouts-with-flexbox 📚 Squarespace CSS Snippet Library: https://schwartz-edmisten.com/css-toolbox 📷 Gear I use to Film My Videos: https://schwartz-edmisten.com/resources#video-gear Help Support My Channel: ☕ Buy me a coffee: https://schwartz-edmisten.com/donate ✉️ Hire me: https://schwartz-edmisten.com/contact WHO AM I? If we haven’t yet before - Hey 👋 I’m Chris, a Squarespace web designer specializing in customizing sites with CSS. Through my videos here on this channel, my courses and plugins, I help Squarespace web designers all over the world create more customized layouts and bring their website vision to life. PS: Some of the links in this description are affiliate links that I get a kickback from 😜 ⌚ Timestamps: 0:00 - Introduction: The problem with Squarespace donation forms lacking conditional fields 0:51 - Overview of the CSS solution and what the form looks like 2:24 - Inspecting the form structure in Chrome DevTools 3:46 - How input values are exposed in HTML and can be targeted with CSS 4:15 - Breaking down the CSS selectors: Direct child selectors 5:23 - Using the :has() selector to target parent elements 5:52 - Targeting direct sibling elements with + 6:33 - Showing/hiding fields based on checked state 7:35 - More complex example: Description of tribute field 9:38 - Using the tilde ~ selector for non-adjacent siblings 10:53 - Recap of the selectors learned (:checked, placeholders, values) 11:33 - Bonus: Hiding empty labels with :empty selector 12:33 - Final example: Checkbox conditional fields 15:20 - Wrap-up and closing thoughts #css #squarespace #squarespacecss Music: https://soundcloud.com/justin-kolas