How do I theme emails sent via a Webform to display like the webform preview?

Below is the output from the email, viewed in Gmail and below that is the output from the preview of the form.

I am using Drupal Version 8.4.3
Webform Version: 8.x-5.0-rc1, with all modules enabled.
Mail System: Version: 8.x-4.1.
Other modules include:
Twig tweak
Imce File Manager

This is the output of the email from Gmail

Gmail output

And this the preview of the message in the form.

enter image description here


The styling of an element is handled via the webform-element-base-html.html.twig template. The email formatting is using simple HTML markup vs Drupal's standard form element/item output.

If you globally want the layout of all elements to be on a single line in email. You should change...

{% if title %}<b>{{ title }}</b><br />{% endif %}{{ value }}<br /><br />


{% if title %}<b>{{ title }}</b> {% endif %}{{ value }}<br /><br />
  • Thanks. Editing the webform-element-base-html.html.twig template got the layout as required with the elements. I would like to know where to add/insert css or yaml code to format elements to display the email like the preview. – David Barrett Jan 6 '18 at 9:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.