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
By Robert Roose

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

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:
     
    [current-page:url:unaliased:args:value:1]
    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!

More Drupal tutorials

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

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.

Comments

Hello,
I followed your guide to create a webform with a field prefilled with the node's ID number but I was wondering if there was a solution to grab the title of that node instead of its number.

Hi Emmanuel,

If all went well the title should be displayed in the entity reference field. Is this not the case at your end?

The field populates with the nodes number and not title/name.

That should not be happening. Is there a live URL where I can view this?

I solved it using tokens. What is the difference in results between your solution and this one "[current-page:title]" ?

Good question! In most cases using the [current-page:title] token should be sufficient.

But in the use case I described the client wanted a select element where the default option would be the node (destination) that the user was viewing. Visitors can still select another destination if they please.

So if you only need to use a text field or a disabled/hidden input field you can use the [current-page:title] token. If you want to use a select element, referencing nodes already available in your website, you can use the solution as I described in this blog post.