Help me take this template html design code:

```
<div class="row justify-content-center">

<div class ="col col-lg-10">

<section class="site-resources-search mb-4">
<form id="search-form" class="d-flex" action="#" data-content-type="faq">

<div class="mb-0 field-search form-query required">
<input type="text" id="searchform-query" class="form-control square" name="SearchForm[query]" value="test" aria-required="true">
<div class="invalid-feedback"></div>
</div><!-- .mb-0 .field-search .form-query .required -->

<div class="ms-2"> 
<button type="submit" class="btn btn-primary square">Search</button>
</div><!-- .ms-2 -->

</form>
</section><!-- .site-resources-search -->


<section class="site-resources-search-results">
<ul class="list-group"> 
<li class="list-group-item"> 
<h5><a href="#two-one" class="text-decoration-none">2.1 Exhibitions and Events</a></h5>
<p>
Please visit our <a href="#">Exhibitions</a> page for a list of current and upcoming 
exhibitions. We regularly update this page with the latest information on new and exciting collections.
</p>
</li><!-- .list-group-item -->

<li class="list-group-item"> 
<h5><a href="#five-two" class="text-decoration-none">5.2 Do you offer any newsletters or updates?</a></h5>
<p>
Yes, we offer a newsletter featuring the latest updates on exhibitions, new arrivals, and exclusive events. 
By becoming a member, you can choose to opt in or out of receiving our newsletter at any time. Membership also 
provides access to additional exclusive benefits.
</p>
</li><!-- .list-group-item -->
</ul><!-- .list-group -->
</section><!-- .site-resources-search-results -->

</div><!-- .col .col-lg-10 -->

</div><!-- .row .justify-content-center -->
```

and have it work in yii2 and php. Issue im facing is forms dont always work as expected.


```
<?php
declare(strict_types=1);

use yii\bootstrap5\ActiveForm;
use yii\bootstrap5\Html;
use yii\widgets\Pjax;

Pjax::begin(['id' => 'pjax-search']);
?>


<div class ="col col-lg-10">

<div class="container">
<div class="row justify-content-center">


<section class="site-resources-search col-auto mb-2">
<?php
$form = ActiveForm::begin([
	'id' => 'search-form',
	'action' => ['site/search'],
	'method' => 'post',
	'options' => [
		'class' => 'active-form row gx-2',
		'data-pjax' => true,
		'data-content-type' => $type,
	],
]);
// $model->type is a hidden value used within the SiteController actionSearch()
echo $form->field($model, 'type')->hiddenInput(['value' => $type])->label(false);
?>

<div class="d-flex">
<?= $form->field($model, 'query', [
	'options' => [
		// Responsive column sizes
		'class' => 'square mb-0 col-sm-8 col-md-12 col-lg-12'
	],
])->textInput([
	'class' => 'form-control square',
	'placeholder' => $placeholder,
])->label(false); ?>

<div class="ms-2"> 
<?= Html::submitButton('Search', ['class' => 'btn btn-primary square']); ?>
</div><!-- .ms-2 -->
</div><!-- .d-flex -->


<div class="text-danger mt-1">
<?php if ($model->hasErrors('query')) : echo Html::error($model, 'query');endif; ?>
</div><!-- .text-danger .mt-1 -->

<?php ActiveForm::end(); ?>
</section><!-- .site-resources-search .col-auto .mb-2 -->


<?php /************************************************************************* search & results */ ?>


<section class="site-resources-search-results col">
<?php if (!empty($results)) : ?>

<ul class="list-group square"> 
<?php foreach ($results as $result) : ?>
<li class="list-group-item"> 
<h5><?= $result['title'] ?? ''; ?></h5>
<?= $result['content'] ?? ''; ?>
</li><!-- .list-group-item -->

<?php endforeach; ?>
</ul><!-- .list-group -->

<?php else : ?>

<?php 
// Only show if the search query is not empty.
if (!empty($model->query)) :
?>
<div class="alert alert-warning square" role="alert">
<?= \Yii::t('app', 'No results found for "{query}".', ['query' => Html::encode($model->query)]) ?>
</div>

<?php
endif;
endif;
?>
</section><!-- .site-resources-search-results .col -->


</div><!-- .col .col-lg-10 -->
<?php /************************************************************************* results */ ?>

</div><!-- .row .justify-content-center -->
</div><!-- .container -->

<?php Pjax::end(); ?>
```

also note that the php yii2 code is not correct, im only adding it as a example of what ive tried.