How custom a form with twig I make a form programmatically, and I am looking how a web designer can change render.

 public function buildForm(array $form, FormStateInterface $form_state)
{

    $form['metier'] = array(
        '#type' =&gt; 'search',
        '#title' =&gt; $this-&gt;t('Métier'),
        '#default_value' =&gt; '',
        '#placeholder'=&gt;'Rechercher une personne par son métier',
        '#attributes' =&gt; array('title' =&gt; $this-&gt;t('Rechercher une personne par son métier')),
    );

    $form['position'] = array(
        '#type' =&gt; 'search',
        '#title' =&gt; $this-&gt;t('Où'),
        '#placeholder'=&gt;'Où',
        '#attributes' =&gt; array('title' =&gt; $this-&gt;t('Où')),
    );

    $form['submit'] = array(
        '#type' =&gt; 'submit',
        '#value' =&gt; $this-&gt;t('Search'),
    );

    return $form;

}


If the path of my form is /test the suggestion template form--test.html.twig doens't work.

I would like give access to a template for webdesigner can custom the render.

I can do something like that : 

  $form['metier'] = array(
        '#type' =&gt; 'search',
        '#title' =&gt; $this-&gt;t('Métier'),
        '#default_value' =&gt; '',
        '#placeholder'=&gt;'Rechercher une personne par son métier',
        '#attributes' =&gt; array('title' =&gt; $this-&gt;t('Rechercher une personne par son métier')),
        '#prefix'=&gt;'&lt;div class="form-group"&gt;',
        '#suffix'=&gt;'&lt;/div&gt;'
    );


But it's hard coded.

So I am looking for a way to return a brut table and let the web designer make his template.

The best way for the designer ll be :

form--test.html.twig

&lt;div class="col-md-12"&gt;{{ form.metier }}&lt;/div&gt;
&lt;div class="col-md-12"&gt;{{ form.position }}&lt;/div&gt;
&lt;div class="col-md-12"&gt;{{ form.submit }}&lt;/div&gt;


I don't know if I am right, I have try to return my variable $form to a template like that :

return array(
    '#theme' =&gt; 'form_test',
    '#form' =&gt; $form,
  );


All work I can access to my fields with 


  {{ form.metier }}
  {{ form.position }}
  {{ form.submit }}


But the submit button doesn't work because the hidden fields are not display like the form_token and he is not in my variable $form.
You need to implement hook_theme() in your .module file to define a new theme implementation, set the #theme key in your form to the name of your implementation and create a twig template with this same name, but replacing hyphens with underscores:

example.module

function example_theme() {
  return [
    'my_awesome_form' =&gt; [
      'render element' =&gt; 'form',
    ],
  ];


Form/MyAwesomeForm.php

class MyAwesomeForm extends FormBase {
  public function buildForm(array $form, FormStateInterface $form_state) {
    $form = parent::buildForm($form, $form_state);

    $form['#theme'] = 'my_awesome_form';
    [...]


templates/my-awesome-form.html.twig

&lt;form{{ attributes }}&gt;
  {{ form.form_build_id }}
  {{ form.form_token }}
  {{ form.form_id }}

  &lt;div class="row"&gt;
    &lt;div class="col-md-6"&gt;
      {{ form.name }}
    &lt;/div&gt;
    &lt;div class="col-md-6"&gt;
      {{ form.type }}
    &lt;/div&gt;
  &lt;/div&gt;
  [...]


In this example form.name and form.type are your form fields, the array keys that you used to create the form, and I used bootstrap markup to show them in two columns.

Hope this helps.

Regards.

PS: This is a copy of my post at https://www.drupal.org/node/2788835#comment-11785706. I cloned it here because I'm not allowed to post comments.