There are a few steps to take in order to get the Search working for a site:

1. In the Perpetua Console, check 'Bing Search' in the site's configuration
2. On the site, add a new page, titled 'Search'
3. On the 'Search' page, add the 'Bing Search' under 'Add Items'
4. You can keep the default settings or change whatever you need to and click 'save'

go to https://www.grandparkway.org/ for newest example

Here is the css that can be modified for the search box:

#search {
  position: relative;
  width: 260px;
  margin: 0;
}

.search-input {
  position: relative;
  width: 100%;
  padding: 8px 48px 8px 8px;
  font-size: 16px;
  line-height: 16px;
  background: #404140;
  color: #fff;
  outline: 0;
  box-sizing: border-box;
}

.search-btn,
.search-input {
  margin: 0;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
}

.search-btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: #212224;
  color: #dea92c;
  font-size: 13px;
}

Here is the form for the search box:

<div id="search">	
  <form action="/search" method="post">
    <input name="searchQuery" type="search" value="" id="input" class="search-input" placeholder="Search" />
    <button type="submit" id="search_btn" class="search-btn">GO</button>
  </form>
</div>

1. Change the page link /search in the form's action attribute to the Search page's permalink.
   
   *NOTE: Do not put the staging site as the domain if at all possible. You may temporarily put it in for your testing purposes, but change it to what their final domain name will be. If we do not know the domain name yet, make a production note upon completion for the person making the site live to update the search form domain name before making it live.

There are a few steps to take in order to get the Search working for a site:

1. In the Perpetua Console, check 'Bing Search' in the site's configuration
2. On the site, add a new page, titled 'Search'
3. On the 'Search' page, add the 'Bing Search' under 'Add Items'
4. You can keep the default settings or change whatever you need to and click 'save'

Here is the form for the search box:

 <div class="search-container">
 <form action="/index.cfm/PageID/1788/index.html" method="post">
 <input name="searchQuery" type="search" value="" id="input" class="search-input" placeholder="Search Our Site Here" autocomplete="off"/>
 <div class="search"></div>
 </form>
 </div> >

Here is the css that can be modified for the search box:

.primary > .container {
    width: 96%;
    padding-left: 0;
    padding-right: 0;
    display: table;
    padding-right: 45px;
    vertical-align: middle;
}
@media (max-width:1024px) {
.primary > .container {
padding-right:0;
}

}

/*
Search
============
*/
.search-container{
	position:absolute;
	right:20px;
	top:27%;
	height:100%;
	z-index:1
}
	.search-container .search {
		position:absolute;
		right:-70px;
		bottom:30%;
		width:40px;
		height:40px;
		background:0 0;
		border-radius:50%;
		transition:all 1s;
		z-index:4;
		font-size:9px
	}
		.search-container .search:hover{
			cursor:pointer
		}
			.search-container .search::before {
				content:"";
				position:absolute;
				margin:auto;top:22px;right:0;bottom:0;left:22px;width:12px;height:2px;background:#fff;transform:rotate(45deg);transition:all .5s;zoom:.7
			}
				.search-container .search::after{
					content:"";position:absolute;margin:auto;top:-5px;right:0;bottom:0;left:-5px;width:25px;height:25px;border-radius:50%;border:2px solid #fff;transition:all .5s;zoom:.7
				}
					.search-container input{font-family:var(--font-secondary);position:absolute;right:-60px;bottom:30%;width:50px;height:39px;outline:0;border:none;background:#fff;color:#fff;padding:0 20px 0 20px;border-radius:3px;transition:all 1s;opacity:0;z-index:5;font-weight:100;letter-spacing:.1em;font-size:13px}
					.search-container input:hover{cursor:pointer}.search-container input:focus{right: -50px;box-shadow: 1px 1px 7px rgb(0 0 0 / 4%);color:#000;width:200px;opacity:1;cursor:text;font-weight:500;font-size:13px;background:#fff;padding:12px;letter-spacing:0}.search-container input:focus~.search{right:-70px;background:var(--secondary-color);z-index:6}.search-container input:focus~.search::before{top:0;left:0;width:25px;background:#fff}.search-container input:focus~.search::after{top:0;left:0;width:25px;height:2px;border:none;background:#fff;border-radius:0;transform:rotate(-45deg)}
					.primary.scrolled .search-container input{background:#fff;color:#000;}
					
					.primary.scrolled #navigation > ul > .search-container > form > .search:before {
						background: #000;
					}
					.primary.scrolled #navigation > ul > .search-container > form > .search:after {
						border-color: #000;
					}
					.primary.scrolled #navigation > ul > .search-container input:focus~.search::before{
						background: #fff;
					}