Drupal8: Render form in a Twig Template

Check the link below:

Send a form to twig template

This might help.

Hello,

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.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.address }}
  </div>
</div>
[...]

In this example form.name and form.address 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.

UPDATE: form tag is not necessary in this template, because Drupal adds a theme wrapper to the form that take care of create this tag with the right attributes. I also discover that if the id of the form is equal to the name of the theme function you dont'n need to include the line $form['#theme'] = 'my_awesome_form'.

Hope this helps.
Regards.
www.servinube.net

Can someone tell me, what if you want to render a form in a twig footer file ? Would still have to create a separate twig file for the form ?

I have done something like this and its working fine.

mymodule.module

/**
 * Implement hook_theme
 *
 */
function mymodule_theme($existing, $type, $theme, $path) {
    return array(
        'custom_form' => array(
            'variables' => array(
                'my_form' => NULL
            ),
            'render element' => 'form'
        ),
    );
}

mymoduleController.php

$form = \Drupal::formBuilder()->getForm('Drupal\[module_name]\Form\[FormNameClass]');

      return array(
          '#theme' => 'custom_form',
          '#my_from' => $form,
      );

mymodule/templates/custom-form.html.twig

{{ my_from }}

Hello Jimososso

I have an html page that have an header and footer,sidebar ,an html form . i want convert it into drupal theme .will you please all the steps converting it into drupal theme and i have to insert data in to database. Actually i am facing problem in converting to twig file .please explain all steps.

Thanks.

-If you want to theme your form in D8 and disable the cache:

    $form['#theme'] = 'newsDetail'; //(This twig file need to be present in your module folder)

    $form['#cache'] = ['max-age' => 0];

function your_module_theme($existing, $type, $theme, $path) {

   return array(

                                'newsListPage' => array(

                                  'variables' => array(

                                                'news_details_array' => array(), // If you are passing a variable

                                                ),

                                ),

                                'newsDetail' => array(

                                                'render element' => 'form',

                                ),

                );

}

In theme (html.twig), {{ form.rowIndex['#value'] }} and {{ form.cartTbl[key].code['#markup'] }} we will use for display

Instead of using a custom theme function, you could always use a custom twig template - if preferable.

Add the following code in your module or theme:

/**
 * Implements hook_theme_suggestions_HOOK_alter() for form().
 */
function MYTHEME_theme_suggestions_form_alter(&$suggestions, array $variables) {
  $suggestions[] = 'form__' . $variables['element']['#form_id'];
}

Then, if for example you want to override the user edit form, you would have to create a file named form--user-form.html.twig in your theme's templates folder.

In most cases, a theme function might be better suited but, just in case, I leave it here as an alternative.