Custom Search bar/module
 

My goal has been to add a custom search bar to the home/landing page of my site similar to that of Googles simplicity to help users quickly search for what they are interested in. I have edited the CSS via css_additional.css and successfully altered the captive search bar at the top right of the forum. I used the same HTML in a module on the page but the search did not come out the same and has display errors?

Below is the HTML I used for the module:

<div class="toolbar">
<ul class="center">
<li class="search-container">
<form id="searchForm" class="left desktopSearch" method="GET" action="http://www.loanforum.org/search">
<div class="left">
<div class="search-box search-btn-inside-box">
<input id="q" class="textbox search-term" type="text" autocomplete="off" placeholder="Search" name="q">
<div class="vertical-divider"></div>
<button id="btnSearch" class="search-btn" title="Search" type="submit">
<span></span>
</button>
<div id="searchPopupControl" title="Filter search">
<span class="arrow"></span>
</div>
<div id="searchPopupContent">
<div class="searchPopupBody">
<label>
<input class="searchFields_title_only" type="checkbox" value="1" name="searchFields[title_only]">
Search in titles only
</label>
<div class="clear"></div>
<label>
<input class="searchFields_channel" type="checkbox" value="1" name="searchFields[channel][]">
Search in Home Page only
</label>
</div>
<input type="hidden" value="" name="searchJSON">
</div>
</div>
</div>
<div class="left">
<button id="btnAdvSearch" class="button adv-search-btn" value="1" name="AdvSearch" type="submit">Advanced Search</button>
</div>
</form>
</li>
</ul>
</div>

Any ideas?