Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh

In this tuto, I'll show you how to add custom fields to webform settings using the ThirdPartySettingsInterface .

By default webform settings entity fields is like this:

Webform settings by default

Adding custom fields to webform settings entity - by default


In this article we are going to look at how to use the ThirdPartySettingsInterface to add some extra fields to existing configuration  webform entity. For example, if you ever need to store some config together with a node type or a taxonomy vocabulary, there is a great way to do so using this interface.

Today we are going to see an example of this and add an extra fields to the webform settings and store the value in this way.

There are a number of steps involved in this process. First, we need to alter the form with which the entity configuration data is added and saved.

In the case of the webform settings entity there are one form 'webform_settings_form_form' for save the settings of each webform, so we need to alter it. 

I added a new submit handler to the form which will be triggered when the form is submitted.

In this I'll add custom css class field to each webform.


Create mymodule.module file



use Drupal\Component\Utility\Html;
use Drupal\Core\Form\FormStateInterface;
use Drupal\webform\Entity\Webform;

 * @param $form
 * @param $form_state
 * @param $form_id
function mymodule_form_alter(&$form, &$form_state, $form_id)
  if ($form_id == 'webform_settings_form_form') {
    $entity = $form_state->getFormObject()->getEntity();

    $form['custom_class_field'] = [
      '#type' => 'textfield',
      '#title' => t('Custom Class field'),
      '#default_value' => $entity->getThirdPartySetting('mymodule', 'custom_class_field'),
    $form['actions']['submit']['#submit'][] = '_mymodule_form_submit';

 * @param $form
 * @param FormStateInterface $form_state
 * @throws \Drupal\Core\Entity\EntityStorageException
function _mymodule_form_submit(&$form, FormStateInterface $form_state)
  /** @var \Drupal\webform\WebformInterface $entity */
  if ($entity = $form_state->getFormObject()->getEntity()) {
    $entity->setThirdPartySetting('mymodule', 'custom_class_field', $form_state->getValue('custom_class_field'));

The getThirdPartySetting() method on the entity object is provided by the ThirdPartySettingsInterface which all configuration entities have by default if they extend from the ConfigEntityBase class. with this method we simply retrieve a value that is stored as third party settings. 

We need also to add our configuration schema so that it becomes translatable. Inside the /config/schema/mymodule.schema.yml file of our module we need to add this:

 create config/schema/mymodule.schema.yml file


  type: mapping
  label: 'Webform mymodule configuration'
      type: mapping
      label: 'mymodule settings'
          type: string
          label: 'Custom class field'


With this schema definition we are basically appending to the schema of the webform.settings config webform settings entity by specifying some metadata about the third party settings our module provides. For more information on config schemas be sure to check out the docs on

After adding our custom fields  to existing config webform settings entity the result is like this:


Adding custom fields to webform settings entity


To add a specific css class to webforms/forms form tag in Drupal 8 I will use hook_preprocess_webform().

 * @param array $variables
function mymodule_preprocess_webform(array &$variables)
  if (!empty($variables['element']['#webform_id'])) {
    $webform = Webform::load($variables['element']['#webform_id']);
    if ($webform && $classes = $webform->getThirdPartySetting('mymodule', 'custom_class_field')) {
      $classes_array = explode(' ', $classes);
      foreach ($classes_array as $class) {
        $variables['attributes']['class'][] = Html::cleanCssIdentifier($class, []);


Finally, here's the result after adding CSS classes to webform settings. these classes will be show in <form> tag.



add custom fields settings form to webform drupal 8


Add new comment

Restricted HTML


Page Facebook

Become a patron

If you need some help or you search a Drupal freelancer don't hesitate to contact us.


Contact Us

All the content is FREE but I still need your help


Become a patreon