Jump to content

Formatting placeholder text in forms

Go to solution Solved by tuanphan,

Recommended Posts

Hi there,

I am hoping someone may be able to help - I feel like I've tried everything but cannot work out how to format placeholder text in my contact form. 

I have injected some code into the page footer which is allowing me to add placeholder text into the form:

(function() {
document.querySelector(".first-name input").setAttribute("placeholder", "First name");
document.querySelector(".last-name input").setAttribute("placeholder", "Last name");
document.querySelector(".email input").setAttribute("placeholder", "Email");
document.querySelector(".message input").setAttribute("placeholder", "Type your message here");

However, I cannot seem to find a way to change the formatting of the placeholder text. I'm ideally looking to change it to:

  • Font family: 'Circular-Book' [custom font]
  • Font colour: #00282e

If anyone has any ideas about how I do this, I will be forever grateful! 

Page URL: https://rectangle-wisteria-55e2.squarespace.com/contact
Password: AstonHolmes23

Thank you very much in advance.


Screenshot 2023-01-16 at 14.31.35.png

Edited by MattDerrickAH
Link to comment
  • Solution

Add to Design > Custom CSS

input, textarea, input::placeholder, textarea::placeholder {
    color: #00282e !important;
    font-family: 'Circular-Book' !important;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.