How to resolve a problem where the Google Custom Search watermark does not appear if you display the same search box more than once on a page.
This error occurs only if you have designed a search box which has the Google Custom Search watermark (logo) within it – the first search box displays the watermark but subsequent boxes do not (even though the box works fine for searching).
The problem must be fixed – it is against the terms of Google’s Custom Search not to display attribution such as the watermark on each and every Custom Search Box. Failure to do so could result in your site being penalized or kicked out of their program.
I first encountered this error when trying to add a Custom Search box to our 404 (Page Not Found) error page – to provide a better option for users to find what they were looking for. As we already had an existing box (at the top right of our site) I just copied the code and a second search box was indeed displayed on our custom 404 page – but with the Google logo missing as shown below:
I wasted a long time recopying the code and looking for a solution but most discussions related to getting a single box working. I finally came across the cause of the error buried deep in a four year old Google forum thread so hopefully this may save someone time.
Cause Of The Missing Watermark
This issue occurs if you have 2 or more Google Custom Search boxes appearing on the same page because the watermark uses JavaScript elements to display. Web browsers don’t support 2 or more JavaScript elements with the same id on the same page. [Actually, none of the elements in a HTML document may have identical ids]
As the code for both boxes is the same, both contained the following two lines:
<form action="http://www.google.com/cse" id="cse-search-box"> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
Note how both search boxes are using the same id for the JavaScript element cse-search-box – as browsers only support the first one, the second is just ignored so the watermark is not applied to the second (and any subsequent) search box.
Fix The Missing Watermark
The solution is easy – just amend the id of the JavaScript element used by the second box so that it is different to the first. In our case we would keep these two lines of code for the first search box:
<form action="http://www.google.com/cse" id="cse-search-box"> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
But we would change the id of the JavaScript element for the second search box by appending -alt to it as shown below:
<form action="http://www.google.com/cse" id="cse-search-box-alt"> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box-alt&lang=en"></script>
Now that the second box uses a different id (cse-search-box-alt) to the first, both JavaScript elements are supported by the browser and the Google Custom Search watermark is displayed in both boxes:
Conclusion
This problem isn’t strictly an error as the web browser is just displaying what it is designed to do i.e. ignore JavaScript elements with the same id on the same page. However, the issue is easy to resolve and you can display the Google logo within multiple Custom Search boxes on the same page as required by the program’s guidelines.
