Drupal Webform (D11, D10, D9): How to send emails from form submissions using Drupal Webform Handlers/Email actions or triggers | iBuild.PH Knowledgebase

To configure a Drupal Webform to send emails using Webform Handlers and format those emails in HTML using the Mail System and HTML Mail modules, follow these steps which should work the same way across Drupal versions D11, D10, and D9:

Step 1: Install Required Modules

1. Install the Modules:
   • Download and enable the Mail System and HTML Mail modules from Drupal.org.
   • Enable the modules via the admin interface /admin/modules

Step 2: Configure Mail System Module

1. Navigate to Configuration > Development > Mail System.
2. Set the following configurations:
   • Module-specific Configuration:
     • For the Webform module, set the Formatter to HTMLMailSystem for both Sender and Formatter options.
   • Default Mail System:
     • Set the Default Mail System Formatter to HTMLMailSystem.
3. Save the configuration.

Step 3: Configure HTML Mail Module

1. Navigate to Configuration > System > HTML Mail.
2. Customize the email template:
   • Modify the HTML template as needed to match your branding and design.
   • Use tokens to include dynamic data from the webform (e.g., [webform_submission:values:name]).
3. Save the configuration.

Step 4: Add and Configure a Webform Email Handler

1. Add the Email Handler:
   • Go to Structure > Webforms and edit your webform.
   • Under the Settings tab, select Emails/Handlers and click Add handler.
   • Choose Email from the handler types and click Add handler.
2. Configure the Email Handler:
   • Recipients: Add the recipient email address or use tokens (e.g., [webform_submission:values:email]).
   • Email Sender:
     • From email: Use [site:mail] or a custom email address.
     • From name: Specify a sender name.
   • Email Content:
     • Subject: Use a descriptive subject (e.g., “New submission from [webform_submission:values:name]”).
     • Message: Craft the body of the email in HTML, or use tokens to include form data. Example:

       <h2>New Webform Submission</h2>
       <p><strong>Name:</strong> [webform_submission:values:name]</p>
       <p><strong>Email:</strong> [webform_submission:values:email]</p>
       <p><strong>Message:</strong> [webform_submission:values:message]</p>

Step 5: Test the Configuration

1. Go to the View tab of the webform.
2. Fill out the form with test data and submit.
3. Verify:
   • The email is sent successfully.
   • The recipient email is formatted correctly in HTML.

Step 6: Debugging Tips

1. If the email is not sent or formatted correctly:
   • Check the Mail System configuration for the Webform module.
   • Verify the HTML Mail template settings.
   • Check the mail logs under Reports > Recent log messages.
2. If you are using SMTP:
   • Configure the SMTP Authentication Support module.
   • Ensure your mail server allows sending formatted HTML emails.