Changing the placeholder text color of form and newsletter blocks (7.0 & 7.1)
A few members inside the Club recently asked about how the placeholder text color of some blocks could be altered via CSS since, at the moment, there’s no way of changing it through Squarespace’s Site Styles.
So, in case you’ve been wondering the same thing, today I wanted to share with you how to achieve that for your own client projects.
This is going to be a quick one, so let’s jump right into it!
Form blocks
Starting out with a customized form block in 7.1, the first thing we need to do is look for the container where the placeholder lives:
As you can see in the screenshot above, we’re currently looking at a textarea element, that has a class of .field-element, and carries the placeholder text “What can we do for you?”.
Notice that the placeholder text is NOT an actual element, it’s part of the textarea element.
To target it, we’ll need to use the ::placeholder selector on the field(s) that have one.
This means that we could use the following to achieve our goal:
textarea::placeholder { }
However, if we take a quick look at the other fields in our form…
…we’ll notice that they’re NOT textarea elements, they’re input elements.
Note: the type of elements on the form will vary depending on the fields you've added through the form block’s settings!
So, if we keep going with the previous snippet we won’t affect them all.
However, you may have noticed that the .field-element class IS being shared by all the different fields…
…so we can use that instead to make sure that we modify the whole lot without leaving any of them out!
.field-element::placeholder { }
Much better!
Nonetheless, this is a bit too generic now, as it will modify all forms on the site AND newsletter blocks if we leave it like this.
Note: you’ll see further down this tutorial, newsletter block fields also have the class of .field-element
Personally, I don’t want that to happen, so I’ll look for a more block-specific class to only alter all my form blocks and NOT newsletter blocks:
Alright, so upon reaching the “main wrapper” of our form we can see that we have a class of .form-block that we can use in our code to make things much more specific:
.form-block .field-element::placeholder { color: white !important; }
Perfect!
And, just like that, we know have our custom color for the placeholder text of our form block.
Newsletter blocks
Now, what if you want to apply the same change but ONLY to newsletter blocks?
Well, let’s take a look at our newsletter fields!
As you can see above, we now have an input element that has a couple of classes including one called .field-element (just like the fields from the form block), and a placeholder text of “Last Name”.
So, using the same approach as before, instead of targeting the placeholder for the input elements like this:
input::placeholder { }
We’ll use the .field-element class to make sure that all fields (with placeholder text) are selected.
Note: in this case, it’s not necessary to use the class vs the element type since it’s unlikely that a different type of field will be added to the newsletter block but, since it doesn’t hurt, we’ll stick with the class anyway.
.field-element::placeholder { }
Now, to make sure that we’re only targeting newsletter blocks, let’s go find the corresponding class that will let us make that clear:
Alrighty, so in our main block wrapper we can see a few classes including one called .newsletter-block, so let’s use that in our code:
.newsletter-block .field-element::placeholder { color: white; }
Awesome!
So, there you have it.
You can now easily alter the placeholder text color of both form and newsletter blocks in Squarespace!
Until next time,
B.
Full code
Form block placeholder
.form-block .field-element::placeholder { color: white !important; }
Newsletter block placeholder
.newsletter-block .field-element::placeholder { color: white; }
