Search box for AMP: To use simply add the [jz-search] shortcode in your theme files or within a widget or content.

searchbox.php

<?php
/**
 * Plugin Name: Search box for AMP - jamesozz.ie
 * Plugin URI: http://www.jamesozz.ie
 * Description: Search box for AMP, via shortcode. JavaScript free. To use simply add the shortcode [jz-search] in your theme files or within a widget or content. 
 * Version: 1.0
 * Author: James Osborne
 * Author URI: http://www.jamesozz.ie
 */

// add form component

add_filter(
	'amp_post_template_data',
	function( $data ) {
		$data['amp_component_scripts'] = array_merge(
			$data['amp_component_scripts'],
			array(
				'amp-form' => true,
			)
		);
		return $data;
	}
);

function jz_shortcode_search() { 
	// search button
	$message = '
	
   <a href="#jz_link" class=" ">
  <button class="jz_searchbutton" type="submit" id="searchsubmit" value="Search">
      <svg style="height:0.9em;" viewBox="0 0 12 13">
          <g stroke-width="2" stroke="#9F9F9F" fill="none">
              <path d="M11.29 11.71l-4-4"></path>
              <circle cx="5" cy="5" r="4"></circle>
          </g>
      </svg>
  </button>
</a>
	'; 
	 
 	return $message;
	} 
	// register shortcode
	add_shortcode('jz-search', 'jz_shortcode_search'); 

 	// Add header code
   function add_search_html() { 
    ?>

<div id="jz_link" class="overlay">
    <a class="cancel" href="#searchreturn"></a>
    <div class="jz_modal">
        <div class="jz_searchform">
            <form role="search" method="get" action="<?php echo site_url(); ?>" target="_top">
                <label class="screen-reader-text" for="s"></label>
                <div class="search">
                    <input type="text" value="" name="s" id="s" class="searchTerm" placeholder="Search..." autofocus=""
                        tabindex="1">
                    <button type="submit" class="jz_searchbutton" id="searchsubmit" value="Search">
                        <svg style="height:1em;" viewBox="0 0 12 13">
                            <g stroke-width="2" stroke="#9F9F9F" fill="none">
                                <path d="M11.29 11.71l-4-4"></path>
                                <circle cx="5" cy="5" r="4"></circle>
                            </g>
                        </svg>
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>

<?php

  }
  add_action( 'wp_body_open', 'add_search_html' );
     
 	// Load CSS
function jz_load_plugin_css() {
    $plugin_url = plugin_dir_url( __FILE__ );

    wp_enqueue_style( 'jz_search', $plugin_url . 'style.css' );
 
}
add_action( 'wp_enqueue_scripts', 'jz_load_plugin_css' );
 

style.css

div#jz_link {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 100%;
  width: 100%;
  z-index: 999;
}
.jz_modal {
  margin-top: 30px;
  padding: 8px 20px 20px 20px;
  background: #fff;
  border: 1px solid #666;
  max-width: 300px;
  height: 100px;
  border-radius: 6px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.jz_modal .content {
  height: 100%;
  overflow: none;
  padding-top: 20px;
}
.overlay {
  height: 100%;
  overflow: scroll;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 200ms;
  visibility: hidden;
  opacity: 0;
}
.overlay .cancel {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: default;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.jz_modal .af_searchbutton {
  margin: 0 auto;
}

.jz_modal .jz_searchform .search {
  width: 100%;
  position: relative;
  display: flex;
  margin-top: 30px;
}
.jz_searchform .search input[type="text"] {
  font-size: 15px;
  line-height: 28px;
  height: auto;
  padding: 0px 6px;
}
.jz_searchform .searchTerm {
  width: 100%;
  border: 3px solid #eaeaea;
  border-right: none;
  padding: 5px;
  height: 36px;
  border-radius: 3px 0 0 3px;
  outline: none;
}
.jz_searchform .searchTerm:focus {
  color: #444;
}
.jz_searchform .searchButton {
  width: 40px;
  height: 36px;
  border: 1px solid #eaeaea;
  background: #eaeaea;
  text-align: center;
  color: #fff;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  font-size: 20px;
}
.jz_searchform input[type="text"] {
  max-width: 250px;
  padding: 11px 10px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  float: left;
}
button.jz_searchbutton {
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  font-size: 20px;
  border: none;
  padding: 0 0 0 0;
  width: 38px;
  height: 38px;
  border: 1px solid #eaeaea;
  background: #eaeaea;
  border: 1px solid #ccc;
  display: inline;
  float: left;
  margin-left: 6px;
}

button.jz_searchbutton:hover {
  background: #ccc;
}