Использование пользовательского поиска Google с существующим элементом формы

В моей теме WordPress у меня есть страница поиска, разработанная правильно для родного поиска wordpress, и это мой дизайн формы для 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> 

Теперь для мотыльков я использую функции пользовательского поиска Google, сохраняя тот же дизайн формы. Но я действительно не нашел способ использовать поиск Google с существующим элементом формы.

Пример кода Google CSE, который я использую –

 <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> 

Но <gcse:search></gcse:search> ломает все. Я на самом деле пытаюсь использовать оверлейный дизайн пользовательского поиска. Может ли кто-нибудь помочь мне узнать, как я могу сохранить существующий дизайн формы поиска при использовании Google Custom search?