Steegle logo

 Add HTML, CSS and JavaScript - classic Google Sites

Classic Google Sites provides an HTML Box so you can add more complicated HTML, CSS and JavaScript.  This allows more functionality but does not allow all possible JavaScript as the code only works within the HTML Box.

For new Google Sites see these instructions: Insert HTML, JavaScript and CSS - new Google Sites

Recent Update to HTML Box on classic Sites

If your HTML Box has recently stopped working here's what you need to do:

Add an HTML Box to classic Google Sites

Notes

The HTML Box will not allow all code, e.g. you cannot make calls to external JavaScript files, but you can use JavaScript embedded on the page.

Examples

Site Search Box anywhere on the page

Sample Code

<form id="sites-searchbox-form" action="[SiteURL]/system/app/pages/search">

  <input type="hidden" id="sites-searchbox-scope" name="scope" value="search-site" />

  <input type="text" id="jot-ui-searchInput" name="q" size="20" value="" aria-label="Search this site" autocomplete="off" />

  <input type="submit" id="sites-searchbox-search-button" class="goog-inline-block jfk-button jfk-button-standard" tabindex="0" value="Search this site" />

</form>

Instructions

You will see a search box that looks just like the site search box, a working example follows (remember this is not a gadget and is on the page).

Working Classic Google Site Search Box

Not everything is possible but it brings a whole new world of possibilities.

Screenshots

(click for larger images)

Insert menu - HTML Box

Insert HTML Box - Empty

Insert HTML Box - Unacceptable Code

Insert HTML Box - Acceptable Code

Feedback

Please let us know if this article helped or if you know of of any improvements.

Keep up-to-date

Join the Sites Update Group on the Google Sites Classic Comparison to get email notifications about New Google Sites updates.

Newsletter

Subscribe to our newsletter for emails about all things Steegle.com