Feeds

Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Oct 12 2021
Oct 12

The Webform module is the most powerful and flexible form builder and submission manager for Drupal. It gives  site builders the power to easily create complex forms instantly. It comes with a certain level of default settings, also letting you customize it as per your requirements.

Check out this amazing blog - Drupal 8 Webform Module - A Brief Tutorial to help you get started with the Webform module in your Drupal 8/9 site. This will help you understand the basics easily. 

The Webform module ships with a lot of interesting features and I’d like to mention a few here.

Web Form Module

Webform Features

1. Altering form & elements

Any form, element and its related settings can be altered by using their respective hooks. Below are few hooks that are available to use and you can find more in the webform.api.php file:

  • Form hooks

        ◦ hook_webform_submission_form_alter()    
        ◦ Perform alterations before a webform submission form is rendered.

  • Element hooks

        ◦ hook_webform_element_alter()
        ◦ Alter webform elements.

  • Option hooks

        ◦ hook_webform_options_alter()
        ◦ Alter webform options.

  • Handler hooks

        ◦ hook_webform_handler_invoke_alter()
        ◦ Act on a webform handler when a method is invoked.

  • more hooks…

        ◦ hook_webform_access_rules_alter() etc..
        ◦ Alter list of access rules that should be managed on per webform level.

2. YAML Source

The Webform module started as a YAML Form module, which allowed people to build forms by writing YAML markup. At some point, the YAML Form module started to have UI and became the Webform module for Drupal 8.

  • YAML provides a simple & easy to learn markup language for building & bulk editing a webform's elements.
  • The (View) Source page allows developers to edit a webform's render array using YAML markup. Developers can use the (View) Source page to hand-code webforms to alter a webform's labels quickly, cut-n-paste multiple elements, reorder elements, as well as add custom properties and markup to elements.
  • Here’s an example of a Contact form and its corresponding YAML source code:
Contact Form with Drag and Drop UI

A Contact form with drag-n-drop UI

 

YAML Source Code

The Contact form’s YAML source code

3. Conditional fields

Webform lets you add conditional logic to your elements within your form. Let us consider a small example, wherein we need to conditionally handle the visibility of elements based on the value of another element within the form.

Here’s an example form with two-step fields, STEP 1 (Radios element) with options ‘Email’ and ‘Mobile Number’. STEP 2 (Fieldset) with two elements, 'Email' and 'Mobile Number'.

Build Page

Form Build page

Form View Page

Form View page

In the above example, I would like to show the ‘Email’ field if the ‘Email’ option is chosen in Step 1, else show the ‘Mobile Number’ field if the ‘Mobile Number’ option is chosen in Step 1.

To achieve that, edit your ‘Email’ field, click on the ‘Conditions’ tab, choose the ‘State’ as ‘Visible’ and set the ‘Trigger/Value’ as ‘STEP 1 [Radios] value is email’. Similarly, follow the same steps to add conditional logic to your ‘Mobile Number’ field and set the ‘Trigger/Value’ as ‘STEP 1 [Radios] value is mobile_number’. Here’s the final look of the Webform:

Edit Email Element

Setting up conditional logic

Step1

Form when ‘Email’ is chosen on STEP 1

Step 2

Form when ‘Mobile Number’ is chosen on STEP 1

4. Custom options properties

Webform lets you add custom option properties to your from elements.

Imagine a scenario where you would want to conditionally handle the options of a radio element based on the value of a different element within the form. How would you do that?

Well, I did not find any way to handle it through the Conditional logic settings from the UI. But there is a provision to set ‘custom options properties’ to your element, wherein you write the required conditional logic targeting your options within the element using the YAML code.

Here is an example, where we can see two radio elements and based on the option I select in the first element, the visibility of the options within the second element should change.

Form Build Page

Form Build page

Custom Option

Form View page before adding any custom options properties:

  • If ‘Type A’ is chosen, then ‘Option 1’ and ‘Option 2’ should be visible from the second element. Similarly, if ‘Type B’ is chosen, then ‘Option 3’ and ‘Option 4’ should be visible. To achieve this edit the second element, go to the ‘Advanced’ tab, scroll down to the ‘Options (custom) properties’ sections and write the necessary logic in YAML.
Option ElementEdit option element

Setting up the options properties

Choose type

Form when ‘Type A’ is chosen

Choose Type B

Form when ‘Type B’ is chosen

5. Webform submission email handlers

  • Email handlers

          Email handlers sends a webform submission via email. To add email handlers to your webform, go to ‘Settings’ and then ‘Emails/Handlers’ tab. Next, click on the ‘Add Email / Add handler’ button.

Email handler

Add Email Handler

  • As shown in the below image, on the ‘General’ tab, add the ‘Title’ and set ‘Send to’  and ‘Send from’ details. Add the message ‘Subject’ and ‘Body ‘ as required and save the configuration form. 
Email ConfirmationConfirmation HandlerEmail Confirmation HandlerMessageTitle & Description

And that’s about it. Your handler gets fired whenever the form is submitted.

  • You can also set conditional email handlers to your webform i.e., trigger different email handlers based on the value of certain elements within the form.
  • For example, let us consider a ‘Select’ element with values ‘Type 1’ and ‘Type 2’. If the user submits ‘Type 1’, trigger the ‘Email - Type 1’ handler that has set ‘To’ address to ‘[email protected]’. If the user submits ‘Type 2’, trigger the ‘Email - Type 2’ handler that has set ‘To’ address to ‘[email protected]’.
  • To add conditional logic to your email handler, create one handler and name it ‘Email - Type 1’. Set ‘To’ address to ‘[email protected]’, switch to the ‘Conditions’ Tab, choose the ‘State’ as ‘Visible’ and set the ‘Trigger/Value’ as ‘Select Type [Select] value is type_1’. 
  • Similarly, create the second handler and name it ‘Email - Type 2’. Set ‘To’ address to ‘[email protected]’, switch to the ‘Conditions’ Tab, choose the ‘State’ as ‘Visible’ and set the ‘Trigger/Value’ as ‘Select Type [Select] value is type_2’.
Email type
  • Scheduled email handlers

    • It extends the Webform module's email handler to allow emails to be scheduled. To use this feature, enable the ‘Webform Scheduled Email Handler’ sub-module. 
    • To schedule sending an email of the form submissions, click on the ‘Add handler’ button. Select ‘Scheduled Email’ handler here.
Select Handler

There is only one extra config setting in the ‘Scheduled Email’ handler compared to the normal ‘Email handler’. And that is to add Schedule email date under the General settings tab.

Schedule email Handler

Scheduled email handler

Set the date to trigger your handler and when the next cron is run, your email will be sent! 

Finding Help

There are different ways through which you can seek help with the webform module. Here is a list of a few sources:

  • Documentation, Cookbook, & Screencasts
  • Webform Issue Queue
  • Drupal Answers
  • Slack channel
    • You can always post your queries regarding the Webform module at the #webform channel within the Drupal slack workspace. Anyone from the community, even the module maintainer themselves are always around and are kind enough to guide you with your problems.

A HUGE shoutout to Jacob Rockowitz for his relentless support towards the Drupal 8/9 Webform module. Webform wouldn't have been what it is now without him.

May 25 2021
May 25

One of the ways to engage your visitors is by using various multimedia on your website and Drupal’s Media module provides a fantastic way to achieve that. An additional support was added to the Media module in Drupal 8.6.0 that lets you easily embed third-party videos from an URL into your site’s content called the oEmbed feature.

While having oEmbed support in the Drupal core is great, there are a few key requirements that might still be missing. In this blog we shall try out the oEmbed Providers module that extends the core’s media oEmbed functionality. The oEmbed Providers module is compatible with Drupal 8.8.4 version and above (and also works with Drupal 9!).

oEmbed Providers Module

What is oEmbed Technology?

According to oembed.com, oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

Basically, oEmbeds allows a website's content to be embedded to another web page. The oEmbed format is supported by the most popular resources with multimedia content - Facebook, Twitter, YouTube, Instagram, Flickr, Vimeo and many more.

Configuring oEmbed Providers on Drupal

Step 1: Enabling the Media and Media Library core module

  • Enable the media and media library core module in your site.
Media Library

Step 2: Install and Enable the oEmbed Providers module

oEmbed Provider

Step 3: Configuring the oEmbed Providers module

  • Once enabled you can visit the configuration form at /admin/config/media/oembed-providers.
  • This module provides several features as listed below by extending core's oEmbed functionality:

         a. Add custom oEmbed providers

            ▪ Core Media provides no option for adding custom providers. The oEmbed providers module lets you do that by navigating to Configuration >  Media > oEmbed Providers > Custom Providers and clicking on Add oEmbed provider.

Custom eEmbed Provider

             • Fill in the necessary details to define a custom oEmbed provider and save the configuration form. Now you will be able to embed videos from this custom provider into your Drupal site. Here, I have given an example of a RadioPublic provider, you can fill in details of providers of your choice.

Add Custom oEmbed ProviderAdd oEmbed Provider

       

     b. Global enable/disable providers

      ▪ The oEmbed Providers module provides an user interface for enabling and disabling providers.

Allowed Provider

   

     c. Modify the providers list URL

        ▪ The oEmbed Providers module provides an user interface to alter the providers URL as the core Media module by default fetches the list of providers from here

oEmbed Provider URL

     d. Disable the fetching of providers list

        ▪ The oEmbed Providers module provides an user interface to disable the external fetch of providers, for instance, when the site uses only custom providers.

External Fetch

   

    e. Provides hook_oembed_providers_alter()

       ▪  The oEmbed Providers module provides a hook_oembed_providers_alter() that lets to alter provider definitions.

Step 4: Adding media to a content

  • Once you're done adding a custom oEmbed provider, you can now embed the videos from that custom provider into your Drupal site.

  • Add a media field to any of your content types and choose ‘Remote Video’ media type.

  • Now provide a video link from your custom provider. Here we have created a RadioPublic provider and saved the content.
Add Media

Okay, that’s it! You can now see the videos from your custom provider being rendered on your Drupal site.

Video Testing

Please Note: Once you get your custom providers working, you can also contribute this to a public oEmbed repository. It contains configuration information (the registry) for oEmbed providers, as YAML files in the providers directory. Once your PR gets merged, it will be listed out in https://oembed.com/providers.json and thus available for all Drupal developers to use with just the core media. Few months back, the YAML for Radiopublic provider (as shown in above example) got merged to the repository and it’s now available for us to use on Drupal. How cool is that?!

See the Drupal.org change record for more details on the oEmbed support and status.

Feb 02 2021
Feb 02

The Robots.txt file is a very underrated on-page SEO factor. Not everybody realizes the value it brings to the table. The Robots.txt file is like an access control system that tells the crawler bots which pages need to be crawled and which ones don’t. It is a rule book for your website which is read by the various web spiders before it attempts a crawl on your website.

There are tons of amazing Drupal SEO modules in version 9 and 8 that help make our jobs easier and boosts SEO ranking. And one of them is the RobotTxt module. The RobotsTxt module in Drupal 9 (and 8) is a handy feature that enables easy control of the Robots.Txt file in a multisite Drupal environment. You can dynamically create and edit the Robots.txt files for each site via the UI. Let’s learn more about this utility module and how to implement it in Drupal 9.

RobotsTxt module for Drupal SEO

But how does Robots.Txt help with SEO?

So, Robots.Txt files restrict crawlers from crawling some pages. But why wouldn’t you want all your pages/files to be crawled, right? Why do you need to have any restrictions whatsoever? Well, in this case, the more isn’t always merrier.

  • Without a Robots.txt file, you are allowing web spiders to crawl all your webpages, sections and files. This uses up your Crawl Budget (Yes, that’s a thing) – which can affect your SEO.
  • A crawl budget is the number of your pages crawled by web spiders (Google bot, Yahoo, Bing, etc.) in a given timeframe. Too many pages to crawl could decrease your chances of being indexed faster. Not only that, you might also lose out on indexing the important pages!
  • Not all your pages need to be crawled. For example, I’m sure you wouldn’t want Google to crawl your development / staging environment web pages or your internal login pages.
  • You might want to restrict media files (images, videos or other documents) from being crawled upon.
  • If you have a reasonable number of duplicate content pages, it is a better idea to add them to the Robots.Txt file instead of using canonical links on each of those pages.

How to Install and Implement the RobotsTxt Module in Drupal 9

The RobotsTxt Drupal 9 module is great when you want to dynamically generate a Robot.Txt file for each of your website when you are running many sites from one codebase (multisite environment). 

Step 1: Install the RobotsTxt Module for Drupal 9

Using composer: 

  
composer require 'drupal/robotstxt:^1.4'

Step 2: Enable the module

Go to Home > Administration > Extend (/admin/modules) and enable RobotsTxt module.

Generates Robots.txt File

 

Step 3: Remove the existing Robots.txt file

Once the module is installed, make sure to delete (or rename) the robots.txt file in the root of your Drupal installation for this module to display its own robots.txt file(s). Otherwise, the module cannot intercept requests for the /robots.txt path.

Remove Robots.txt file

Step 4: Configure

Navigate to Home -> Administration -> Configuration -> Search and metadata -> RobotsTxt (/admin/config/search/robotstxt), where you can add in your changes to “Contents of robots.txt” region. Save the configuration.

Contents of Robots.txt

Step 5: Verify

To verify your changes please visit https://yoursitename.com/robots.txt

Verify Robots.txt File

RobotTxt API

If you want to implement a shared list of directives across your multisite environment, you can implement the RobotsTxt API. The module has a single hook called  hook_robotstxt(). The hook allows you to define extra directives via code. 

The example below will add a Disallow for /foo and /bar to the bottom of the robots.txt file without having to add them manually to the “Contents of robots.txt” region in the UI.

  
/**
* Add additional lines to the site's robots.txt file.
*
* @return array 
*   An array of strings to add to the robots.txt.
*/
function hook_robotstxt() {
  return [
   'Disallow: /foo',
   'Disallow: /bar',
 ];
}

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web