Search bar on custom page

Help / Discuss
1

I created a custom search page as I wanted to add text and a tag cloud directly on the page.
I was able to add a functional search field by adding:

{{velocity}}
{{html clean="false"}}
<form action="$xwiki.getURL('Main.Search')">
  <input type="text" name="text" />
</form>
{{/html}}
{{/velocity}}

To the page, but it just gives me a short ugly field to type in.
Is there a way to add the longer bar with the magnifying glass icon found on the system search page to my custom page?

Bonus points if there’s a way to add links to pages that have been favorited at least once.

Double bonus points if there’s a way to add links to pages with the most views.

2

I’m still looking for the bonus items, but I stole the code from the search panel and that gave me what I was looking for as far as the search bar.

{{html clean="false"}}
<form action="/bin/view/Main/Search" class='xformInline'>
<div class="globalsearch input-group">
<label for="globalsearchinput" class="hidden">Search query</label>
<input id="globalsearchinput" class="globalsearchinput withTip useTitleAsTip" type="text" name="text" title="search..." size="15"/>
<span class="input-group-btn buttonwrapper">
<button type="submit" class="btn btn-primary">
<span class="fa fa-search" aria-hidden="true"></span><span class="hidden">Go</span>
</button>
</span>
</div>
</form>
{{/html}}