How to theme a form? Render {{form}} elements separately in .html.twig template?

Hello Friends,

I have a simple form named BusinessListingSearchForm.php that looks as follows:

  public function buildForm(array $form, FormStateInterface $form_state) {
    
    $form['search_term'] = [
      '#type' => 'search',
      '#required' => TRUE,
      '#attributes' => array('class' => array('')),
      '#placeholder' => 'Search'
    ];

    $form['actions'] = [
      '#type' => 'actions',
    ];

    // Add a submit button that handles the submission of the form.
    $form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Search'),
      '#attributes' => array('class' => array('')),
    ];
    
    return $form;
  }

  public function submitForm(array &$form, FormStateInterface $form_state) {
    $search_term = $form_state->getValue('search_term');
    $this->messenger()->addMessage($this->t('%search_term results:', ['%search_term' => $search_term]));
    
    $url = Url::fromRoute('business_listing.search_view', ['search_term' => $search_term]);

    return $form_state->setRedirectUrl($url);
  }

When the form is submitted, I redirect to a new route using the the search_term as a parameter.

I add this form to my template.html.twig using the following hook inside my .module file:

function business_listing_theme($existing, $type, $theme, $path) {
    
  return [
    // business-listings.html.twig
    'business_listings' => [
        'variables' => ['data' => [], 'searchForm' => [], 'paths' => []],
    ]
}

Everything works fine and I am able to build the search form and send it to business-listings.html.twig using my controller

Currently I am rendering the form in business-listings.html.twig as follows,

<div class="col-lg-8 offset-lg-2 text-center">
    {{ searchForm }}
</div>

This works and the user is redirected when the form is submitted.

However, when I try load the form elements individually so that I can style them using bootstrap the form no longer redirects on submit and the input input gets highlighted in red. eg.

<div class="row">
    <div class="col-sm-6">
        {{ searchForm.search_term }}
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        {# Renders the rest of the form #}
        {{ searchForm|without('search_term') }}
    </div>
</div>

I know the form works because when the form is rendered by just adding {{searchForm}}

It works exactly as expected. I have also tried adding 

{{ searchForm.form_build_id }}
{{ searchForm.form_id }}

with no success.

How would I go about rendering individual elements of my form and maintain the expected submit functionality?

Any help or advice would be greatly appreciated <3

Kind regards,

Matt

Drupal version: 


Source: https://www.drupal.org/taxonomy/term/3/feed