Using Google custom search with existing form elem

Question

In my wordpress theme I have search page designed properly for wordpress native search and this is my form design for searchform.php.

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">
        <label for="s" class="assistive-text"><?php _e( 'Search', 'checkout' ); ?></label>
        <input type="text" class="field" name="s" placeholder="<?php _e( 'Search here...', 'checkout' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" id="s" />
        <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'checkout' ); ?>" />
    </form>

Now, for moths I've tring to use Google custom search functionality while keeping the same form design. But I really didn't find a way to use Google search with existing form element.

Example Google CSE code that I'm using -

<script>
  (function() {
    var cx = 'partner-pub-123456:78990125';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

But the <gcse:search></gcse:search> is breaking everything. I'm actually trying to use the overlay design of custom search. Can anyone help me out about how I can keep my existing search form design while using Google Custom search?