1

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' => 'search',
        '#title' => $this->t('Métier'),
        '#default_value' => '',
        '#placeholder'=>'Rechercher une personne par son métier',
        '#attributes' => array('title' => $this->t('Rechercher une personne par son métier')),
    );

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

    $form['submit'] = array(
        '#type' => 'submit',
        '#value' => $this->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' => 'search',
        '#title' => $this->t('Métier'),
        '#default_value' => '',
        '#placeholder'=>'Rechercher une personne par son métier',
        '#attributes' => array('title' => $this->t('Rechercher une personne par son métier')),
        '#prefix'=>'<div class="form-group">',
        '#suffix'=>'</div>'
    );

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

<div class="col-md-12">{{ form.metier }}</div>
<div class="col-md-12">{{ form.position }}</div>
<div class="col-md-12">{{ form.submit }}</div>

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

return array(
    '#theme' => 'form_test',
    '#form' => $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.

2

you can access your filed with this code this is perfectly works

{{ form.metier }} {{ form.position }} {{ form.submit }}
{# Renders the rest of the form #}
{{ form|without('metier','position','submit') }}
  • i ll try that and let you know thx – Kevin Sep 23 '16 at 10:23
  • ok welcome..but tell me must.how many face this problem. – vinny Sep 27 '16 at 13:48
  • Its my problem too . {{ form|without('metier','position','submit') }} worked but when we have a lot fields how to use this ? This code was very big and not good . {{ form.actions.submit }} was show element but I want after submit form , page redirect . How to use this ? – RobinSon Mar 29 '17 at 6:07
  • it is not possible to display without twig filter.you can get more information from here drupal.org/node/2212845 and if you will find a solution tell me thanks in advance – vinny Mar 29 '17 at 13:37
2

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' => [
      'render element' => '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

<form{{ attributes }}>
  {{ form.form_build_id }}
  {{ form.form_token }}
  {{ form.form_id }}

  <div class="row">
    <div class="col-md-6">
      {{ form.name }}
    </div>
    <div class="col-md-6">
      {{ form.type }}
    </div>
  </div>
  [...]

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.

0

You need to add:

{{ form.form_build_id }}
{{ form.form_id }}

These are the fields that make the submit work.

  • nop that don't work, {{ form.form_build_id }} and {{ form.form_id }} doesn't exist in the form variable – Kevin Aug 12 '15 at 8:54
  • I found those fields by debugging with {{ dump() }}. The one thing i did different is not to add the #form in the array but made the theme like this; $themes['form_test'] = [ 'render element' => 'form', ]; – David Duymelinck Aug 12 '15 at 9:02
  • i don't have this field in {{ dump() }} how do you pass your form to your theme ? – Kevin Aug 12 '15 at 9:05
  • dump() is only available when you change the twig.config debug setting in the /sites/default/services.yml file – David Duymelinck Aug 12 '15 at 9:09
  • yes i got it, but i see just field in my '#form' variable, i see nothing like build_id or form_build_id – Kevin Aug 12 '15 at 9:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.