Drupal 9 Webform: Sending an email using the drupal webform module and creating webform from scratch.
In this article, you will learn how to create a webform and send emails through webform from scratch.
Step 1: Install the Webform module using the composer command
composer require 'drupal/webform:^6.1.3'Step 2: After installing the module, enable Webform module from extend, Drupal settings.
Also, enable the Webform UI module to easily add and manage elements using a drag-n-drop user interface.
Step 3: Once the module is enabled, Navigate to Structure-> Webforms-> Forms.
For creating a webform follow the below steps:
- Click Add webform button.
2. Enter the title and description of webform then click save.
3. Click Add element button, select the field type, and specify the element settings as shown below. Here we will be using three fields: Name(Type text field), Email(Type email), and Document(Type File).
Incase File element is not visible, please read this article
Webform: Enabling File element in webform.
Click save elements after adding all elements and your webform is ready.
Step 3: For sending email, click settings and then click Emails/Handlers.
For creating an email handler follow the below steps:
- Click Add email button
2. In SEND TO, select custom to the email address and enter the email addresses of users who will receive the emails.
In SEND FROM, select Custom From email address and add the email address from where you want to send emails. In this case, you have to enter an email which is an SMTP Authenticated email address.
To learn how to do SMTP Authentication Configuration setup please follow this article's steps, Drupal 9 SMTP Configuration: From scratch use SMTP and configure with an outlook account
3. For the body you can select any option twig template, custom or default.
Select the twig template, add Html and styling.
To get all submitted values of the webform, use webform_submission:values
{{ webform_token(‘[webform_submission:values]’, webform_submission, [], options) }}To use a specific web form submitted value you can provide the machine name of Textfield “Name”, below is the example
{{ webform_token(‘[webform_submission:values:name]’, webform_submission, [], options) }}
4. Check the checkboxes that you want to display using values.
Also, Check the Attachments to include files with email and save.
5. Now submit the webform with all fields filled.
The email is sent, congratulations!
Note: Make sure to check Allow to send e-mails formatted as HTML to display your email styling when email is sent.
