Change Search Block Placeholder Text in Squarespace

Free

Jul 31

Code

<!-- =====
Adjust Search Block Placeholder Text 
From Will-Myers.com
========== --> 
<script>
  window.addEventListener('DOMContentLoaded', changeSearchPlaceholder);
  
  function changeSearchPlaceholder() {
    let newText = "Search Me";
    let searchBars = document.querySelectorAll('.search-input');
    
    searchBars.forEach(el => el.placeholder = newText)
  }
</script>

Here is a fairly simple Javascript Snippet that will allow you to replace the Search Block Placeholder text on all your Squarespace blocks. Change the newText value, "Search Me", to whatever you want it to be. Paste in the above code in your Settings » Site Footer Code Injection area for this to work. If you’re on a personal plan, add this into a “Markdown Block” within your footer area.

I’m convinced Javascript is made for creatives and artists. Learning it gives you incredible control of your website and really opens up many doors for your creativity. . If you’re interested in learning more about how this code works, keep reading.

How This Works

There are two parts to this code:

The 'DOMContentLoaded' Event Listener, and
changeSearchPlaceholder function.

DOMContentLoaded

When the content of a website is loaded, your browser is notified that it’s complete. Because it makes us more comfortable to anthropomorphize technology, we call this "Listening". Your browser is “Listening” to be told when this is complete.

There are, in fact, many different things that your browsers is consistently listening for behind-the-scenes, and DOMContentLoaded is just one of them.

WHAT IS THE DOM?
You may have heard of the "DOM" before and wondered what in the heck that means. DOM stands for Document Object Model and very simply put is our HTML, but turned into a format where we can start manuipulating it through Javascript.
Party Trick: use the word "DOM" around non-tech people to sound super smart.

This tells your browser when the content of the webpage has loaded up, but maybe all the media haven’t loaded up yet. It’s the in-between state of everything is on the page, but the media (images / videos) haven’t completed loading yet.

So line 6 above saying once the DOM Content has Loaded, run the function "ChangeSearchPlaceholder".

changeSearchPlaceholder Function

While DOMContentLoaded is a standard event across all browsers, changeSearchPlaceholder (from the code above) is a random name that I just made up. So don’t try to memorize that name.

That name is attached to a function, starting on line 8, with the same name. So your browser will run that function once the DOM Content has loaded.

These functions can be anything we want them to be, and allow us to do incredible things with out website. But for this example, we’re keeping it simple.

You’ll notice our function does 3 things: on line 11, on line 12, and line 14.

On line 11: we’re create a new variable, calling it newText and giving it a value of "Search Me", this will be the new placeholder text.

On line 12: we’re creating a list of all of the elements on the page that have the class search-input and storing them in a single variable called searchBars this is the class that Squarespace adds to each Search Block Input Field.

On line 14: This is the meat of our function. We’re cycling through the list we created on line 12, and for each of the seach-input fields (it’s possible there is only one), we’re setting the specific one we’re on as a variable called el and then setting it’s placeholder value to whatever we set on line 11.

Let me know if you have any questions about this specific snippet or more about Javascript in the comments below!

Keep building,
Will