Webform. Sergey Shumskiy

Webform is a module for creating forms and questionnaires in Drupal. After sending the letter, emails can be sent to administrator and / or to sender. The results can be exported to Excel or to other spreadsheet. Webform also provides some basic statistical reviews and it has a large API to expand its capabilities.

In this report I want to cover:

  1. Configuring elements webform while working with file
  2. Creating a file with .pdf format
  3. Using webform to send a letter with datas
  4. Advanced options for element Select


1. Configuring elements webform while working with file

For working with elements file in webform, you need to have certain settings. When configuring the Drupal 8 site, perform the following settings from file: drupal8 / core / INSTALL.txt, see step 5.

b. Open your settings.php in a plain-text editor, and uncomment (remove the #

     at the start of line) this line:

     # $settings['file_public_path'] = 'sites/default/files';

     Enter the desired path and save the file.

     If you want to use private file storage, you need to uncomment (remove

     the # at the start of line) the following line in settings.php:

     # $settings['file_private_path'] = '';

     Enter the path for private files and save the file.

Also please pay attention to the settings in the webform itself. To do this, go to /admin/structure/webform, the Settings tab, find the section File upload default settings and check the settings as shown in the figure below.



After that, you will be able to add elements to your form webform File

2. Creating a file with .pdf format

In this project for creation a *.pdf file, I converted HTML to PDF using Dompdf. For this we need to install dompdf library (https://github.com/dompdf/dompdf ).

How did I convert HTML to PDF using Dompdf? - It's very simple, we use the following function:

     function getResultFileResume(&$form, \Drupal\Core\Form\FormStateInterface &$form_state) {

     $values = $form_state->getValues();

     //  todo add date time

     $date = date('m-d-Y-h-i-s', time());

     $file_name = str_replace(' ', '-', $values['position_applied_for'])

     . '--' . str_replace(' ', '-', $values['last_name'])

     . '--' . str_replace(' ', '-', $values['first_name'])

     . '--' . $date . '.pdf';

     $form_params = [

     '#theme' => 'webform_job_aplication',

     '#elements' => $values,


     $html = \Drupal::service('renderer')->renderRoot($form_params);

     // Init the PDF generator. Here I am using the DOMPDF library

     $dompdf = new Dompdf();



     // Convert the HTML data to PDF

     $output = $dompdf->output();

     //   Save PDF file

     $file = file_save_data($output, 'public://' . $file_name ,FILE_EXISTS_REPLACE);

     //   PDF file to add our file in our list values $form_state

     $form_state->setValue('form_result', $file->id());



Now step by step I will describe, what is and how to use the function getResultFileResume():

1. $values = $form_state->getValues();

$values - get all the data from the completed form on the site in the array. Next, we will need this data to create a * .pdf file

2. $file_name - create a unique name for our future file

3. $form_params = [

     '#theme' => 'webform_job_aplication',

     '#elements' => $values,


4. $form_params - I create an array where I move the data '#elements' => $ values, and the name of the template to be used '#theme' => 'webform_job_aplication'.

Now we need a function that will process this data

5. function fco_master_theme() {

     return [

         'webform_job_aplication' => [ 'variables' => [ 'elements' => [], ], ],



6. $html = \Drupal::service('renderer')->renderRoot($form_params);

I use the service 'renderer', and I get the data in HTML format

More information about the service can be found here:


7.   $dompdf = new Dompdf();



     $output = $dompdf->output();

     $file = file_save_data($output, 'public://' . $file_name ,FILE_EXISTS_REPLACE);

$output - get the file in format *.pdf

$file - save the “get file” in format *.pdf

8. $form_state->setValue('form_result', $file->id());

Here I use the form element. In this element I "put" a link to the created file, which is stored on the server.

With the help of $form_state->setValue('form_result', $file->id()); I use the setting of my webform and the link is added to the file in the letter by itself.


Let me please summarize the results:

  • Received an array with all the form data
  • Created a unique name
  • Created a template and passed the data to the template
  • Received html data
  • Used Dompdf and received a * .pdf
  • Saved file format * .pdf
  • Transferred the link to the file


3. Using webform to send a letter with datas

What I mean ?

The idea is simple - I used the webform itself, since there are settings already in Emails / Handlers for my webform, I just create another field of the file format, then "hide" this field from the user and after creating the necessary * .pdf (described above), I add this file to the "hidden" field.

The following will be executed when you submit a form:

  1. Validation of all form fields
  2. Creation the required * .pdf format file
  3. The file will be added to the email
  4. The letter will be sent with the specified settings

It can be realized with the help of form_alter:

function fco_master_form_alter(&$form, \Drupal\Core\Form\FormStateInterface &$form_state, $form_id) {

 if ($form_id == 'webform_submission_job_application_form') {

   if (empty($form['actions']['submit']['#submit'])) {

     $form['actions']['submit']['#submit'] = [];


   array_unshift($form['actions']['submit']['#submit'], 'getResultFileResume');



This function simply adds functions to the list, of that are used when Submit our function as first, which creates a file format * .pdf

4. Advanced options for element Select

In this section we’ll describe how using possibilities of only one Webform it is possible to create something similar to the Add One More of the form section.

Of course, the best option is to write your own field in which you will find all the necessary fields, for example, as from our project:




But we will consider more simple possibility of using the webform module functionality directly from the UI.

To do this, it is necessary to make the following settings:




  1. This will be our button, which will add the ability to fill "more" information. That is, if we click on this button, another block will appear.

To configure, we need to go to editing of the field, press Edit, then:

  • Go to the tab “Conditional logic”
  • Add the necessary settings, in our example it is:




2. This is the block that should be filled by the user.

Social activity