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 '17 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 '17 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 '17 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 '17 at 8:54

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 ...

| improve this answer | |
  • Is this for drupal 7 or 8? Doesn’t seem to work for drupal 7! – Tapash May 15 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 at 5:45
  • Actually tags are next to title on mobile but end of question on desktop version – GiorgosK May 15 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;
| improve this answer | |

Your Answer

