I am trying to display my webform in a modal (including error/validation messages inside the modal). I am following this approach for a custom drupal form which is not a webform. I am wondering whether this is possible at all with webforms and in case it is, what I need to take into account to make it run?

The first problem I am having is the following code line from the example's TeacherContactController.php

$modal_form = $this->formBuilder->getForm('Drupal\tl_session\Form\TeacherForm');

When I try to use this in my own controller, I cannot get the webform's proper namespace + id. When I check my webform with devel it says:

[__CLASS__] => Drupal\webform\Entity\Webform
  [id] => add_news_webform

But I get a "The form argument Drupal\webform\Entity\Webform\webform-submission-add_news_webform-form is not a valid form" error. I tried many things, but did not succeed.

How can I get the webform with formBuilder and what else am I missing here (like webform specific ajax settings etc.)?

  • 1
    I don't know if this link helps.
    – pierostz
    Oct 28, 2017 at 11:38
  • Yes, I've tried that before, but this way does not allow the validation/error messages to be shown inside the modal.
    – theuni
    Oct 28, 2017 at 11:47
  • 1
    You can show validation and error messages within the modal. You have to form alter the form so the submit is ajax based (I think Webform even offers this OOTB now). The way in D7 was to validate within the AJAX handlers and set form errors if they are present. Or, on a good submit, submit the data and return a success message to the modal via AjaxResponse.
    – Kevin
    Oct 28, 2017 at 14:55
  • Yes webform does have 'Use Ajax'. I'll check how I could use this, although I'm not fully sure how to proceed from there. I'm still surprised it might not be possible with the original approach from my post.
    – theuni
    Oct 29, 2017 at 8:54

3 Answers 3


Displaying a weform in modal (might be called popup as well) it is a lot simpler than you thought

Lets assume your webform has URL /contact than you can create a link in the following manner

<a class="use-ajax" data-dialog-type="modal" href="/contact>Contact US</a>

Pressing that link will have your form open in a modal with error validation and messages inside the modal

NOTE: At least in my case I had to also add the following hook_preprocess_page in the .theme file

function THEMENAME_preprocess_page(&$vars) {
    //custom logic of when to include the library
    // ....
    $vars['#attached']['library'][] =  'core/drupal.dialog.ajax';  

Some people have reported that this is not needed but I assume some other module included this library for them ...

  • Is this for drupal 7 or 8? Doesn’t seem to work for drupal 7!
    – Tapash
    May 15, 2020 at 5:42
  • @Tapash this whole issue is for D8 can see from the tags attached to it (next to title can see: webform 8)
    – GiorgosK
    May 15, 2020 at 5:45
  • Actually tags are next to title on mobile but end of question on desktop version
    – GiorgosK
    May 15, 2020 at 8:12

The only solution to load the webform with formBuilder that finally worked for me is based on the following documentation of how to embed a webform. Here's my code:

* Callback for opening the modal form to create an article.
* @return Drupal\Core\Ajax\AjaxResponse
*   A responseObject for Ajax.
public function addArticle() {
  // Get the currently logged in user account.
  $user = $this->currentUser();
  if ($user->hasPermission('create article content')) {
    $response = new AjaxResponse();
    // Load the webform as indicated here:
    // https://www.drupal.org/docs/8/modules/webform/webform-cookbook/how-to-embed-a-webform
    $output['add_form'] = [
      '#type' => 'webform',
      '#webform' => 'add_news_webform',
    // Add a modal dialog command to the $response object.
    $response->addCommand(new OpenModalDialogCommand(t('Create Article'), $output, ['width' => '500']));
    return $response;
  • May I have a question about this method? The webform is displaying fine, but the form action attribute is set to the page where the modal is opened, so the submission doesn't work. Oct 2, 2022 at 7:12

Drupal 8 Webform can be opened in modal dialogs using links with the .webform-dialog class

enter image description here

a. Common settings Configuration » Forms: /admin/structure/webform/config
    1. FORM DIALOG SETTINGS - Dialog options: set option Enable site-wide dialog support. Do patch for load script by preg_match
    2. Check  Form URL path settings
b. On webform settings Settings » General (example: contact) /admin/structure/webform/manage/contact/settings
    1. Enable options URL PATH SETTINGS: Allow users to post submissions from a dedicated URL
    2. Copy link from DIALOG SETTINGS

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.