How to give twig suggestion for custom form in Drupal 8 and 9
In this tutorial we will learn how to give twig suggestions to a custom form in drupal 8/9
First, we will render the entire form into twig file then we will render one by one field in the twig file
Here we have a module ttn_blogs module. Below are the steps to follow:
Step 1
Create routing file in module: ttn_blogs.routing.yml
ttn_blogs.add_article:
path: ‘/add/article
defaults:
_title: ‘Add Article
_form: ‘\Drupal\ttn_blogs\Form\AddArticleForm’
requirements:
_access: ‘TRUE’
Step 2
Create a form in module path \Src\Form\AddArticleForm.php.
<?php
namespace Drupal\ttn_blogs\Form;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Database\Database;
use Drupal\Core\Url;
use Drupal\Core\Routing;
/**
* Provides the form for adding article from custom form.
*/
class AddArticleForm extends FormBase {
/**
* {@inheritdoc}
*/
public function getFormId() {
return ‘ttn_blogs_add_article_form’;
}
/**
* {@inheritdoc}
*/
public function buildForm(array $form, FormStateInterface $form_state) {
$form[‘title’] = [
‘#type’ => ‘textfield’,
‘#title’ => $this->t(‘Article Title’),
‘#required’ => TRUE,
‘#maxlength’ => 20,
‘#default_value’ => ”,
];
$form[‘body’] = [
‘#type’ => ‘textarea’,
‘#title’ => $this->t(‘Body’),
‘#required’ => TRUE,
‘#rows’ => 10,
‘#cols’ => 60,
‘#resizable’ => TRUE,
];
$form[‘submit’] = [
‘#type’ => ‘submit’,
‘#value’ => $this->t(‘Save’) ,
];
$form[‘#theme’] = ‘ttn_blogs_add_article_form’;
return $form;
}
/**
* {@inheritdoc}
*/
public function validateForm(array & $form, FormStateInterface $form_state) {
// form validate logic here
}
/**
* {@inheritdoc}
*/
public function submitForm(array & $form, FormStateInterface $form_state) {
// Add article logic here
}
}
Below is for passing the twig suggestion for our custom form:
$form[‘#theme’] = ‘ttn_blogs_add_article_form’;
Step 3
Create hook_theme function and provide your form template details in your module file or .theme file as below.
/**
* @file
* Implementing our hooks.
*/
/**
* Implements hook_theme().
*/
function ttn_blogs_theme($existing, $type, $theme, $path) {
return [
‘ttn_blogs_add_article_form’ => [
‘render element’ => ‘form’,
],
];
}
Here ‘ttn_blogs_add_article_form’ is the form twig template.
Step 4
Create a twig template as below in path /templates/
Here template name will be ttn-blogs-add-article-form.html.twig
Below code in twig prints entire form in above twig template.
<div class=”row custom-form”>
<div class=”col-md-6″>
{{ form }}
</div>
</div>
Now see form route, and you can see custom form classes in div while inspecting this page
Step 5
Here we are printing each form field in twig template
So in our ttn-blogs-add-article-form.html.twig file,
So finally code in twig template will be as below.
<div class=”row custom-form”>
<div class=”col-md-12″>
{{ form.title }}
</div>
<div class=”col-md-12″>
{{ form.body }}
</div>
<div class=”col-md-12″>
{{form|without(‘title’,’body’)}}
</div>
</div>
Now you can see the above form in your browser, which is printed by the above twig file.
