{"id":55319,"date":"2022-07-20T08:50:45","date_gmt":"2022-07-20T03:20:45","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=55319"},"modified":"2022-07-20T08:50:45","modified_gmt":"2022-07-20T03:20:45","slug":"how-to-give-twig-suggestion-for-custom-form-in-drupal-8-and-9","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/how-to-give-twig-suggestion-for-custom-form-in-drupal-8-and-9\/","title":{"rendered":"How to give twig suggestion for custom form in Drupal 8 and 9"},"content":{"rendered":"

In this tutorial we will learn how to give twig suggestions to a custom form in drupal 8\/9<\/span><\/p>\n

First, we will render the entire form into twig file then we will render one by one field in the twig file<\/span><\/p>\n

Here we have a module ttn_blogs module.\u00a0<\/span>Below are the steps to follow:<\/span><\/p>\n

Step 1\u00a0<\/strong><\/h2>\n

Create routing file in module: ttn_blogs.routing.yml\u00a0<\/span><\/p>\n

ttn_blogs.add_article:<\/span><\/p>\n

\u00a0\u00a0path: ‘\/add\/article<\/span><\/p>\n

\u00a0\u00a0defaults:<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0_title: ‘Add Article<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0_form: ‘\\Drupal\\ttn_blogs\\Form\\AddArticleForm’<\/span><\/p>\n

\u00a0\u00a0requirements:<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0_access: ‘TRUE’<\/span><\/p>\n

 <\/p>\n

Step 2<\/strong><\/h2>\n

Create a form in module path \\Src\\Form\\AddArticleForm.php.<\/span><\/p>\n

<?php<\/span><\/p>\n

namespace Drupal\\ttn_blogs\\Form;<\/span><\/p>\n

use Drupal\\Core\\Form\\FormBase;<\/span><\/p>\n

use Drupal\\Core\\Form\\FormStateInterface;<\/span><\/p>\n

use Drupal\\Core\\Database\\Database;<\/span><\/p>\n

use Drupal\\Core\\Url;<\/span><\/p>\n

use Drupal\\Core\\Routing;<\/span><\/p>\n

\/**<\/span><\/p>\n

* Provides the form for adding article from custom form.<\/span><\/p>\n

*\/<\/span><\/p>\n

class AddArticleForm extends FormBase {<\/span><\/p>\n

\u00a0\u00a0\/**<\/span><\/p>\n

\u00a0\u00a0\u00a0* {@inheritdoc}<\/span><\/p>\n

\u00a0\u00a0\u00a0*\/<\/span><\/p>\n

\u00a0\u00a0public function getFormId() {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0return ‘ttn_blogs_add_article_form’;<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0<\/span>\u00a0\u00a0\/**<\/span><\/p>\n

\u00a0\u00a0\u00a0* {@inheritdoc}<\/span><\/p>\n

\u00a0\u00a0\u00a0*\/<\/span><\/p>\n

\u00a0\u00a0public function buildForm(array $form, FormStateInterface $form_state) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span>\u00a0 \u00a0 $form[‘title’] = [<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘#type’ => ‘textfield’,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘#title’ => $this->t(‘Article Title’),<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘#required’ => TRUE,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘#maxlength’ => 20,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘#default_value’ => ”,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0];<\/span><\/p>\n

$form[‘body’] = [<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘#type’ => ‘textarea’,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘#title’ => $this->t(‘Body’),<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘#required’ => TRUE,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\u00a0‘#rows’ => 10,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘#cols’ => 60,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘#resizable’ => TRUE,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0];<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0$form[‘submit’] = [<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘#type’ => ‘submit’,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘#value’ => $this->t(‘Save’) ,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0];<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$form[‘#theme’] = ‘ttn_blogs_add_article_form’;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $form;<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0\u00a0\/**<\/span><\/p>\n

\u00a0\u00a0\u00a0* {@inheritdoc}<\/span><\/p>\n

\u00a0\u00a0\u00a0*\/<\/span><\/p>\n

\u00a0\u00a0public function validateForm(array & $form, FormStateInterface $form_state) {<\/span><\/p>\n

\u00a0\u00a0\/\/ form validate logic here<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0\/**<\/span><\/p>\n

\u00a0\u00a0\u00a0* {@inheritdoc}<\/span><\/p>\n

\u00a0\u00a0\u00a0*\/<\/span><\/p>\n

\u00a0\u00a0public function submitForm(array & $form, FormStateInterface $form_state) {\u00a0<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ Add article logic here<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

}<\/span><\/p>\n

Below is for passing the twig suggestion for our custom form:<\/span><\/p>\n

$form[\u2018#theme\u2019] = <\/span>‘ttn_blogs_add_article_form’<\/span>;<\/span><\/p>\n

<\/h2>\n

Step 3<\/strong><\/h2>\n

Create hook_theme function and provide your form template details in your\u00a0 module file or .theme file as below.<\/span><\/p>\n

\/**<\/span><\/p>\n

* @file<\/span><\/p>\n

* Implementing our hooks.<\/span><\/p>\n

*\/<\/span><\/p>\n

\u00a0<\/span><\/p>\n

\/**<\/span><\/p>\n

* Implements hook_theme().<\/span><\/p>\n

*\/<\/span><\/p>\n

function ttn_blogs_theme($existing, $type, $theme, $path) {<\/span><\/p>\n

\u00a0<\/span>\u00a0\u00a0return [<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0‘ttn_blogs_add_article_form’ => [<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘render element’ => ‘form’,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0],<\/span>\u00a0<\/span><\/p>\n

\u00a0\u00a0];<\/span><\/p>\n

}\u00a0\u00a0<\/span><\/p>\n

Here <\/span>‘ttn_blogs_add_article_form’<\/span> is the form twig template.<\/span><\/p>\n

<\/h2>\n

Step 4<\/strong><\/h2>\n

Create a twig template as below in path \/templates\/<\/span><\/p>\n

Here template name will be <\/span>ttn-blogs-add-article-form.html.twig<\/span><\/p>\n

Below code in twig prints entire form in above twig template.<\/span><\/p>\n

<div class=”row custom-form”><\/span><\/p>\n

\u00a0\u00a0<div class=”col-md-6″><\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0{{ form }}<\/span><\/p>\n

\u00a0\u00a0<\/div><\/span><\/p>\n

<\/div><\/span><\/p>\n

Now see form route, and you can see custom form classes in div while inspecting this page<\/span><\/p>\n

<\/h2>\n

Step 5<\/strong><\/h2>\n

Here we are printing each form field in twig template<\/span><\/p>\n

So in our <\/span>ttn-blogs-add-article-form.html.twig<\/span> file,\u00a0<\/span><\/p>\n

So finally code in twig template will be as below.<\/span><\/p>\n

<div class=”row custom-form”><\/span><\/p>\n

\u00a0\u00a0<div class=”col-md-12″><\/span><\/p>\n

\u00a0{{ form.title }}<\/span><\/p>\n

\u00a0 <\/div><\/span><\/p>\n

\u00a0<div class=”col-md-12″><\/span><\/p>\n

\u00a0\u00a0\u00a0{{ form.body }}<\/span><\/p>\n

\u00a0\u00a0<\/div><\/span><\/p>\n

\u00a0\u00a0<div class=”col-md-12″><\/span><\/p>\n

\u00a0\u00a0\u00a0{{form|without(\u2018title\u2019,\u2019body\u2019)}}<\/span><\/p>\n

\u00a0\u00a0<\/div><\/span><\/p>\n

<\/div><\/span><\/p>\n

 <\/p>\n

Now you can see the above form in your browser, which is printed by the above twig file.<\/p>\n

<\/div>","protected":false},"excerpt":{"rendered":"

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.\u00a0Below are the steps to follow: Step 1\u00a0 Create […]<\/p>\n","protected":false},"author":1368,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":46},"categories":[3602],"tags":[4862],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55319"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1368"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=55319"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55319\/revisions"}],"predecessor-version":[{"id":55322,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55319\/revisions\/55322"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=55319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=55319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=55319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}