Google Sites Help
Steegle

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:

  1. Go to a page where you have an HTML Box
  2. Edit the page
  3. Open the HTML box and you will see the new HTML Box
  4. Set the height and width to something sensible to fit your content
  5. Close the HTML Box
  6. Save the page
  7. Repeat for each page/HTML box that is not working.

Add an HTML Box to classic Google Sites

  1. Navigate to the page where you want to add the HTML, CSS or JavaScript.
  2. Use the Insert menu, then HTML Box.
  3. Once the Insert HTML Box editor appears add the code you want to use.
  4. Google Sites checks the code, while you edit, for errors and will not add the code to the page until correct.
  5. Once finished use the Save button on the Insert HTML Box.
  6. Use the Save button to save the page and view the page with your new code.

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

  1. Insert a HTML Box as described above in steps 1 to 3
  2. Copy and paste the code above to make a Site Search box (make sure you add the full site URL to the action attribute)
  3. Use the Save button on the Insert HTML Box.
  4. Use the Save button to save the page and view the code.

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.

Please let us know if this article helped you.

Screenshots

(click for larger images)

Insert menu - HTML Box

Insert HTML Box - Empty

Insert HTML Box - Unacceptable Code

Insert HTML Box - Acceptable Code