How can I put two forms on the same page - forms

Question

We would like to have a website search bar form and a Google Driving Directions form on the same page.
Today we added a search bar to every page on MinnesotaSeasons.com, over 5,000 pages. It works on every page except 480 "Destination" pages that already have a driving directions form. Adding CSS positioning for "form" puts one form on top of the other. The Website does NOT use PHP - at least, those three letters do not appear together anywhere in the code.
The search bar is a must, but we would hate to lose the driving directions. The problem results can be seen here on the top right corner of the page:
http://www.minnesotaseasons.com/Destinations/Afton_State_Park.html
Here is the code on "Destinations" pages - no CSS used:
<td class="tableNote"><form action="http://maps.google.com/maps" method="get" target="_blank">
<p>Get driving directions from Google Maps to this destination from any address, and send those directions to your phone.</p>
<p>
<label for="mapsUsSaddr"><strong>Your Address</strong> (street address and either city and state or ZIP code)</label>
</p>
<p>
<input type="text" class="text" name="saddr" id="mapsUsSaddr" value="" placeholder="Your Address" />
</p>
<p>
<input type="submit" class="clickDirections" value="Click Here for Directions" />
<input type="hidden" name="daddr" value="N45 2.898, W93 10.384" />
<input type="hidden" name="hl" value="en" />
</p>
</form></td>
Here is the search bar code on all pages:
<form role="search" id="form">
<input type="search" id="query" name="q" placeholder="Search..." aria-label="Search through site content">
<button>
<svg viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
</button>
</form>
<script>
const f = document.getElementById('form');
const q = document.getElementById('query');
const google = 'https://www.google.com/search?q=site%3A+';
const site = 'minnesotaseasons.com';
function submitted(event) {
event.preventDefault();
const url = google + site + '+' + q.value;
const win = window.open(url, '_blank');
win.focus();
}
f.addEventListener('submit', submitted);
</script>
Here is the CSS for the search bar:
form {
position: absolute;
top: 75px;
left: 680px;
z-index: 200;
background-color: #4654e1;
width: 250px;
height: 30px;
display:flex;
flex-direction:row;
align-items:center;
}
input {
all: unset;
font: 16px system-ui;
color: #fff;
height: 100%;
width: 100%;
padding: 6px 10px;
}
::placeholder {
color: #fff;
opacity: 0.7;
}
svg {
color: #fff;
fill: currentColor;
width: 24px;
height: 24px;
padding: 10px;
}
button {
all: unset;
cursor: pointer;
width: 44px;
height: 44px;
}