How to prefill a webform field based on the node/URL being viewed in Drupal 8 or Drupal 9

In this simple tutorial I will show you how you can fill a webform field with a value based on the node the visitor is viewing.
Robert Roose - Drupal web designer
By Robert Roose

A real life problem

Being a travel agency, a client I worked for made a big form (containing up to a 100 different elements) in which the visitor could me a request for a tailor made proposal. They also had 50+ destinations. When a visitor would fill in the form the destination would have to be prefilled based on the node (destination) the user was viewing. Else they had to replicate the form for all the destinations to specify the destination. Making a change in this form would mean they had to do it for all the 50+ forms. A big and boring task prone for mistakes.

How to create a select option prefilled with the node being viewed

So I made a select option prefilled with the destination the user was viewing. Here's how to go about creating such a webform field:

  • Navigate to the Build tab of the webform where you want to add this select option.
  • Click on the Add element button.
  • Below Entity Reference Elements select either Entity autocompleteEntity checkboxesEntity radios or Entity select based on the type of form field you would like to use. In this example I will use Entity select.
  • Fill in a title for your element. In my case this will be Destination.
  • Below Entity Reference Settings pick the content type which you want to refer to. This will be content of the type the user will be viewing. In this example I will pick content of the type Destinations.
  • Optionally you can Disable this select option under Form Display making it unable for users to change the option.
  • Go back up and click on the Advanced tab.
  • Open the Default value field set and enter the following in the Default value input field:
    Drupal will now look for an ID from the unaliased URL (such as /node/87) and use it to reference the select option.
  • Click on the Save button.
  • Click on the Save elements button.

Placing the form in a block on the nodes of the referenced content type

Next we need to display this form in a block on nodes of the referenced type.

  • Navigate to Structure > Block layout.
  • Click on Place block next to the title of the region you want to display the form.
  • Next to Webform click on Place block.
  • Optionally you can enter a title or you can choose to not display the title.
  • Pick the webform in which you created the select with the prefilled option under Webform.
  • Select the content type which is referenced in the select option below Visibility in the Content type tab. In my case that would be Destinations.
  • Click Save block.
  •  Navigate to a node of the referenced content type, in my case Destinations. And now you will see this node being prefilled in the newly created select.

Do you have any questions about this tutorial? Let me know by leaving a comment!

The content of this field is kept private and will not be shown publicly.