The From email option under the Send from (website/domain) accordion has been removed as it will always resolve to mcccd.web@domail.maricopa.edu. You can still edit the From name as Gmail does not interfere with this setting. Please use the Reply-to email field to enter the email address you would like the recipient to reply to. The Reply-to email address is auto-populated in the to: field when the recipient replies to the confirmation email.
With this setting, when email recipients click on the reply button in the email Gmail will automatically use the value you entered in the Reply-to email field.
Sample email information sent from a Webform with From name and Reply-to email set.
Customization
Webform Twig
To customize your Webform emails, you can copy the twig template from the mimemail module at web/modules/contrib/mimemail/templates/mimemail-message.html.twig to your theme folder web/themes/custom/YOUR_THEME/templates/webforms and rename your copied file to mimemail-message--webform.html.twig. If you want this template for a specific Webform, you can rename it to mimemail-message--webform--MACHINE-NAME-OF-WEBFORM.html.twig instead or do so directly from within the email handler itself by selecting Twig template… from the Body drop down in the Message accordion.
Mail Style
To override styles, provide a mail.css inside your custom theme css folder web/themes/custom/THEME/css/mail.css. The module will append the contents of your custom styles with the default mail.css file before processing the inline styles with the Emogrifier library. The default mail.css file is insde the css folder of the cfw3 theme at web/themes/maricopa/css/mail.css.
Webform Testing
If you are developing your own mail.css file to override the default, you can import the following Webform for testing. This is done using the single item import to Webform in your multidev and requires Admin access. If you do not know what you are doing, please ask one of us in Slack for assistance.
langcode: en
status: open
dependencies: { }
weight: 0
open: null
close: null
template: false
archive: false
id: html_css_email_test
title: 'HTML + CSS Email Test'
description: 'Test HTML and CSS with the mail.css and Emogrifier library.'
category: Test
elements: |-
email:
'#type': email
'#title': Email
'#description': 'Enter the email adderess you would like the HTML + CSS test sent to.'
'#required': true
'#required_error': 'Please enter an email for this test.'
captcha:
'#type': captcha
'#captcha_type': recaptcha/reCAPTCHA
css: ''
javascript: ''
settings:
ajax: false
ajax_scroll_top: form
ajax_progress_type: ''
ajax_effect: ''
ajax_speed: null
page: true
page_submit_path: ''
page_confirm_path: ''
page_theme_name: ''
form_title: both
form_submit_once: false
form_open_message: ''
form_close_message: ''
form_exception_message: ''
form_previous_submissions: true
form_confidential: false
form_confidential_message: ''
form_disable_remote_addr: false
form_convert_anonymous: false
form_prepopulate: false
form_prepopulate_source_entity: false
form_prepopulate_source_entity_required: false
form_prepopulate_source_entity_type: ''
form_unsaved: false
form_disable_back: false
form_submit_back: false
form_disable_autocomplete: false
form_novalidate: false
form_disable_inline_errors: false
form_required: false
form_autofocus: false
form_details_toggle: false
form_reset: false
form_access_denied: default
form_access_denied_title: ''
form_access_denied_message: ''
form_access_denied_attributes: { }
form_file_limit: ''
form_attributes: { }
form_method: ''
form_action: ''
share: false
share_node: false
share_theme_name: ''
share_title: true
share_page_body_attributes: { }
submission_label: ''
submission_exception_message: ''
submission_locked_message: ''
submission_log: false
submission_excluded_elements: { }
submission_exclude_empty: false
submission_exclude_empty_checkbox: false
submission_views: { }
submission_views_replace: { }
submission_user_columns: { }
submission_user_duplicate: false
submission_access_denied: default
submission_access_denied_title: ''
submission_access_denied_message: ''
submission_access_denied_attributes: { }
previous_submission_message: ''
previous_submissions_message: ''
autofill: false
autofill_message: ''
autofill_excluded_elements: { }
wizard_progress_bar: true
wizard_progress_pages: false
wizard_progress_percentage: false
wizard_progress_link: false
wizard_progress_states: false
wizard_start_label: ''
wizard_preview_link: false
wizard_confirmation: true
wizard_confirmation_label: ''
wizard_auto_forward: true
wizard_auto_forward_hide_next_button: false
wizard_keyboard: true
wizard_track: ''
wizard_prev_button_label: ''
wizard_next_button_label: ''
wizard_toggle: false
wizard_toggle_show_label: ''
wizard_toggle_hide_label: ''
preview: 0
preview_label: ''
preview_title: ''
preview_message: ''
preview_attributes: { }
preview_excluded_elements: { }
preview_exclude_empty: true
preview_exclude_empty_checkbox: false
draft: none
draft_multiple: false
draft_auto_save: false
draft_saved_message: ''
draft_loaded_message: ''
draft_pending_single_message: ''
draft_pending_multiple_message: ''
confirmation_type: page
confirmation_url: ''
confirmation_title: ''
confirmation_message: ''
confirmation_attributes: { }
confirmation_back: true
confirmation_back_label: ''
confirmation_back_attributes: { }
confirmation_exclude_query: false
confirmation_exclude_token: false
confirmation_update: false
limit_total: null
limit_total_interval: null
limit_total_message: ''
limit_total_unique: false
limit_user: null
limit_user_interval: null
limit_user_message: ''
limit_user_unique: false
entity_limit_total: null
entity_limit_total_interval: null
entity_limit_user: null
entity_limit_user_interval: null
purge: none
purge_days: null
results_disabled: false
results_disabled_ignore: false
results_customize: false
token_view: false
token_update: false
token_delete: false
serial_disabled: false
access:
create:
roles:
- anonymous
- authenticated
users: { }
permissions: { }
view_any:
roles: { }
users: { }
permissions: { }
update_any:
roles: { }
users: { }
permissions: { }
delete_any:
roles: { }
users: { }
permissions: { }
purge_any:
roles: { }
users: { }
permissions: { }
view_own:
roles: { }
users: { }
permissions: { }
update_own:
roles: { }
users: { }
permissions: { }
delete_own:
roles: { }
users: { }
permissions: { }
administer:
roles: { }
users: { }
permissions: { }
test:
roles: { }
users: { }
permissions: { }
configuration:
roles: { }
users: { }
permissions: { }
handlers:
email:
id: email
handler_id: email
label: Email
notes: ''
status: true
conditions: { }
weight: 0
settings:
states:
- completed
to_mail: '[webform_submission:values:email:raw]'
to_options: { }
bcc_mail: ''
bcc_options: { }
cc_mail: ''
cc_options: { }
from_mail: _default
from_options: { }
from_name: 'ITS Drupal Team'
reply_to: its.drupal.team@domail.maricopa.edu
return_path: ''
sender_mail: ''
sender_name: ''
subject: _default
body: |
<p>This is a test email sent via [webform:url].</p>
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<hr />
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<hr />
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
<hr />
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<hr />
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
<hr />
<figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
<hr />
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>
<hr />
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>
<hr />
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<hr />
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
excluded_elements: { }
ignore_access: false
exclude_empty: true
exclude_empty_checkbox: false
exclude_attachments: false
html: true
attachments: false
twig: true
theme_name: ''
parameters: { }
debug: false
variants: { }
