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:

  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.

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

Springboard Intranet
for Google Workspace

We provide a well-designed and well-structured intranet to enable your employees to: start work with the right tools; find people with appropriate skills; collaborate with the their teams; access authorized resources; thank and recognize heroic colleagues and coworkers.

Steegle Springboard Intranet for Google Workspace

Steegle People for Google Workspace Logo

Steegle People
for Google Workspace

Searchable staff directory for Google Workspace, with real-time search results, that automatically generates org charts to show your organisation structure - Steegle People.

Steegle People

Steegle Share for Google Drive Logo

Steegle Share
for Google Drive

If the standard Google Drive Folder embed does not give you everything you need, take a look at the Steegle Share for Google Drive that offers search, sorting, download links and more...

Steegle Share

Steegle News Gadget for Google Sites Logo

Steegle News
for Google Sites

Display headlines, snippets and metadata linked to your news articles and blog pages on your Google Site and filter by tags added to the news gadget. See the Steegle News Gadget.

Steegle News

Steegle Heroes
for Google Workspace

Employee recognition system: Steegle Heroes allows you to thank and recognise your colleagues, coworkers and employees spotlight a hero as an Employee of the month.

Steegle Heroes