Theming Webform Emails

I am trying to theme the emails that are sent from a Webform.

I am not a developer so if this means writing PHP code, preprocess PHP code etc., then, thanks for reading this, but it will be beyond my limited understanding of twig and PHP coding. Many thanks for your time. But if you know where I can find information for a novice to learn what is needed to achieve my goal, then I will try them.

Having read Document pages and watched videos on Drupal, Drupal Docs, stackoverflow, and other pages.

My theory is that the preview & the email output should mimic the webform as much as possible. The 4 attached screenshots: the original webform, the preview, the email as sent by Drupal and the last one shows how the email should be themed.

The preview image has additional classes added on the Element > Advanced tab, in the DISPLAY WRAPPER ATTRIBUTES field.

I understand that these pages are output using twig templates and preprocess functions. Also, a custom module to use a hook alter something updates something

I have included as much information and configuration details as possible.

Drupal installation information and modules installed:

  • Drupal Version: 8.6.3
  • Ctools: Version: 8.x-3.0
  • CKEditor – autogrow: Version: 8.x-1.0
  • Devel: Version: 8.x-1.2
    • Devel Kint: Version: 8.x-1.2
    • Devel Twig Xdebug: Version: 8.x-1.2
  • Mail System: Version: 8.x-4.1
  • Maillog / Mail Developer:
  • Swift Mailer: Version: 8.x-1.0-beta2
  • IMCE File Manager: Version: 8.x-1.7
  • Pathauto: Version: 8.x-1.3
  • Token: Version: 8.x-1.5
  • Twig tweak: Version: 8.x-2.1
  • Honeypot: Version: 8.x-1.29
  • Webform: Version: 8.x-5.0-rc26

Below are 4 links to images from the:

The code below is the output from the API tab on the test form page.

API: Submission Values

webform_id: an_email_test
entity_type: null
entity_id: null
in_draft: false
uid: '1'
langcode: en
token: fRpnbwy3iaXbzimYqjZMhnwF5676HNznkFNSXKKrZyQ
uri: /webform/an_email_test/api
    title: Miss
    first: Loremipsum
    middle: Dixisset
    last: Oratione
    suffix: Dixisset
    degree: Oratione
    address: '10 Main Street'
    address_2: '10 Main Street'
    city: 'Hill Valley'
    state_province: Oregon
    postal_code: '12345'
    country: Libya
  email: [email protected]
API: PHP Usage

// Get submission values and data.
$values = array(
  'webform_id' => 'an_email_test',
  'entity_type' => NULL,
  'entity_id' => NULL,
  'in_draft' => FALSE,
  'uid' => '1',
  'langcode' => 'en',
  'token' => 'fRpnbwy3iaXbzimYqjZMhnwF5676HNznkFNSXKKrZyQ',
  'uri' => '/webform/an_email_test/api',
  'remote_addr' => '',
  'data' => array(
    'name_outbound' => array(
      'title' => 'Miss',
      'first' => 'Loremipsum',
      'middle' => 'Dixisset',
      'last' => 'Oratione',
      'suffix' => 'Dixisset',
      'degree' => 'Oratione',
    'address_outbound' => array(
      'address' => '10 Main Street',
      'address_2' => '10 Main Street',
      'city' => 'Hill Valley',
      'state_province' => 'Oregon',
      'postal_code' => '12345',
      'country' => 'Libya',
    'email' => '[email protected]',

// Check that the webform is open.
$webform = DrupalwebformentityWebform::load('an_email_test'); 
$is_open = DrupalwebformWebformSubmissionForm::isOpen($webform);
if ($is_open === TRUE) {
  // Validate webform submission values.
  $errors = DrupalwebformWebformSubmissionForm::validateFormValues($values);
  // Submit webform submission values.
  if (empty($errors)) {
    $webform_submission = DrupalwebformWebformSubmissionForm::submitFormValues($values);
Drupal version: