Open Webforms using Dialog Box in Drupal

Don’t forget to subscribe to our YouTube channel to stay up-to-date.

Webform comes with an option of displaying a form in a pop-up Dialog box, but is not enabled by default. With this option, a webform can pop-up on the screen when clicking on a link. Users can stay on the same page while filling in the form.

In this tutorial, you’ll learn how to enable and configure dialog box pop-ups in Webform.

Getting Started

We assume you already have Webform installed on your site.

Use Composer to download the module.

composer require drupal/webform

Then go and install the Webform UI module.

If you’re new to Webform and want to learn more check out our free “Using Webform in Drupal” course.

Enable Dialog Box in Webform

To use the Dialog Box option in Webform, it needs to be enabled. First of all, we assume that the Webform and Webform UI modules are already installed and enabled in Drupal, then:

1. Go to the Administration menu, select Structure > Webforms > Forms (/admin/structure/webform)

2. Then in the next screen click on the Configuration tab and the next level Forms tab (/admin/structure/webform/config)

3. Scroll down almost to the bottom and there is a section named Form Dialog Settings

By default, 3 lines have been pre-configured. We shall go over it in the next step. Underneath these 3 lines is the checkbox “Enable site-wide dialog support”. Turn it on to enable it.

Note that when it is enabled, the following 2 messages will appear and they are:

A. IMPORTANT: To insert dialog links using the Restricted HTML and Basic HTML text formats the <a href hreflang class> must be added to allow HTML tags.

B. To add the .webform-dialog class to a link’s attributes, please use the Editor Advanced Link or Menu Link Attributes modules.

4. Keep in the same area. The 3 lines configure the size of the dialog box, and their corresponding machine names. By default, 3 options are given, and they are narrow, normal and wide. More can be added if necessary.

Note that the machine name and the corresponding width/height should also be configured accordingly:

The machine names will define the  CSS classes, each corresponding to the sizes defined here. Machine names must be lower-case and contain only letters, numbers and underscores. Width and height are optional.

As an example, the default machine names will correspond to the following  CSS classes:

Machine Name	CSS class to apply for links
narrow	class=”webform-dialog webform-dialog-narrow”
normal	class=”webform-dialog webform-dialog-normal”
wide	class=”webform-dialog webform-dialog-wide”

5. Save and exit. Now it is enabled and configured, but we still need to take care of the HTML filter of the HTML editor.

Configure Text Formats

Next we need to configure the Text Formats and Editors, so that inserting these  CSS classes will be allowed in the editors. Go to text formats and editors configuration by:

Go to the Administration Menu, select Configuration > Content authoring > Text formats and editors (/admin/config/content/formats):

Choose a text format that your editors will be using. Then click on Configure.

In the text editor page, scroll down to the bottom to the section “Filter settings”, and there is the “Limit allowed HTML tags and correct faulty HTML”.

By default, there should be a tag <a href hreflang> already available. Change it to <a href hreflang class> to include the class attribute.

Now we can save the configuration and exit. The same configuration should be made to other modes of editors (e.g. Raw HTML) if necessary.

Dialog Settings and Testing

The webform dialog box is ready to be used by content creators. When they set up their webforms, they can check the dialog box settings in the settings of their own form by.

Go to Administration menu > Structure > Webforms > Forms (../admin/structure/webform):

Select the designated form (in this example, we use the default contact form).

In the form page, select the Settings tab on the first level, and General tab on the second level.

Scroll to the bottom of the page, there is the Dialog Settings. It lists the different types of dialog boxes available, the test buttons, and the sample source HTML codes to apply.

Content creators can click on these test buttons to preview how the dialog box will look like. These sample source codes can be used as references on how to apply in their content.

How to use the Webform Dialog Box Option

To use the webform dialog box, you need to enable and configure the dialog options in webform first. There will be additional  CSS classes we can apply to the designated link or button to achieve this result.

Please note that in order to apply  CSS class attributes to a link, you need to have the option of applying  CSS with the appropriate tools in the Drupal.

For example, the Basic HTML editor does not offer the option to enter  CSS classes by default. Additional modules might be needed to provide this  CSS option.

For example, when the link is created in CKEditor, you may need the Editor Advanced Link module to insert the  CSS class attributes.

Want to learn how to use “Editor Advanced Link”. Then check out our tutorial “Create Internal Links using the Linkit module in Drupal”. This tutorial covers Linkit (useful module) and “Editor Advanced Link”

As another example, when  CSS class attributes are needed in the case of menu links, you may need the Menu Link Attributes module. Details of how these other modules are installed is out of the scope of this tutorial, but they should be simple enough to find out.

The following is an example showing how to insert the  CSS class attribute in the CKeditor with the Editor Advanced Link module installed and enabled:

As a result of the additional  CSS class attributes, the link will look like the following when viewed in the source mode:

<a class="webform-dialog webform-dialog-normal" href=".....">...</a>

Summary

By applying this webform dialog box option, we can configure a webform to display in a pop-up dialog box format. It can be easily achieved by applying the appropriate  CSS classes to a link, and these classes can be defined and customized in this webform dialog box configuration.

With this option, content creators can have more alternatives in designing forms in a Drupal site, with users staying on the same page.

FAQs

Q: The editor is stripping out the class that I’ve added to the link?

If you’re using the “Limit allowed HTML tags and correct faulty HTML” filter in your text format, then you’ll need to add “class” to the <a> element. Refer to this tutorial’s “Configure Text Formats and Editors” section.