How to render a form in custom template in Drupal 8 and 9

Here we are going to discuss how to render custom form in a twig template.

Here first we are rendering entire form in a twig template. And then rendering each field by field in twig template.

Here we have a module dn_studentslist module.

See below steps for creating a form and rendering form in a twig template.

Step 1 

Create below rout in dn_studentslist.routing.yml file  and map to the form StudentForm.

Step 2

Create a form in module path \Src\Form\StudentForm.php.

Please note we are passing template name in below line before return form variable.

$form[‘#theme’] = ‘students_add_form’;

In this form we are just submitting student name mark and age and displaying submitted data in same form.

Step 3

Create hook_theme function and provide your form template details in your  module file or .theme file as below.

Here students_add_form is the form twig template here, students__list is another template.

If you have only one form template, hook_theme return be provided  as below.

Step 4

Create a twig template as below in path /templates/

Here template name will be students-add-form.html.twig

Below code in twig prints entire form in above twig template.

After submission you will get below message in twig template.

You cans see custom-form class in div while inspecting this page.

Step 5

Here we are printing each form field in twig template

So in our students-add-form.html.twig file, first we have to print form hidden fields.

So print below variables first.

{{ form.form_build_id }}

{{ form.form_token }}

{{ form.form_id }}

If we are not printing this , save button of the form will not work.

Next, print each fields in form as below.

{{ form.fname }}

{{ form.sname }}

{{ form.age }}

{{ form.marks }}

{{ form.actions.submit }}

So finaly code in twig template will be as below.

In our StudentForm.php, we have submit button inside  $form[‘actions’] . so we have to use {{ form.actions.submit }} in order to print submit button.

Now we can access the page  /add/students

So here submit action is returning success message with all details.

Download sample source code here.