How to I add a search bar shortcode that looks similar to that of http://help.edublogs.org/?

So I added the following to my theme's function.php file

function wpbsearchform( $form ) {

    $form = '<form role=&quot;search&quot; method=&quot;get&quot; id=&quot;searchform&quot; action=&quot;' . home_url( '/' ) . '&quot; >
    <div>
    <input type=&quot;text&quot; value=&quot;' . get_search_query() . '&quot; name=&quot;s&quot; id=&quot;s&quot; />
    <input type=&quot;submit&quot; id=&quot;searchsubmit&quot; value=&quot;'. esc_attr__('Search') .'&quot; />
    </div>
    </form>';

    return $form;
}

add_shortcode('wpbsearch', 'wpbsearchform');

I am trying to make it look similar to the search box on the header section of help.edublogs.org where it says "What are you looking for?" inside the search box and for that text to disappear when the user starts typing the search term/s. And also for the "Search" button to go after the search box and not below it.

Using the above code, it currently looks like this - see attached screenshot