#C08 Contact Form and SES.

Assign the email address you have obtained to Form Mail.

Contact Form.

If you build a website with CMS such as Drupal or WordPress, it is common to set up Form Mail to receive enquiries from visitors by email, and I also use it.If you directly provide email addresses on your website with Mail to, malicious bots If you provide your email address directly in the Mail to on your website, a malicious bot may collect your address and send you a lot of spam, which may affect your security in some cases.

Not only that, but the content of queries and questions can be presented in the form of templates, making it easier for the viewer to make queries and for the recipient of the email to receive the questions in an organised manner. This makes it easier to reply back. In order to avoid the influence of such malicious bots and to make it easier for visitors to make enquiries, Form Mail is installed.

In WordPress, plugins such as Contact7 and Wpform are available and can be installed on websites very easily, so they are used as contact emails.Drupal comes with Contact Form functionality as standard.

This time, we will set up Contact Form and test the form email using an email account with a domain obtained from AWS. When testing, a sending error occurred and the email could not be sent, so the following process is being carried out to identify the cause and make it usable for form mail.

1. testing in the default Drupal state

  1. Configure Contact Form
  2. Assign an email from an AWS-acquired domain
  3. Configure reCAPTCHA
  4. Test form email
  5. Email sending errors
  6. Pursue the cause

2. testing using SMTP in SES

  1. Configuration of SMTP
  2. Configuration of SMTP in SES
  3. Tests with form mail
  4. Email sending errors
  5. Finding the cause

3. Response to address discrepancies

  1. Errors due to discrepancies between the user's email address and the email address set in the form mail
  2. Change the user's email address
  3. Test the form mail
  4. Problem resolution

The cause of the problem has been identified and the system is now available, but the cause is simple: due to a mistake on my part, the email that was used to register the user and the email assigned to receive the form mail were different, and therefore the email could not be sent.

I didn't realise this, and instead of using Drupal's default email sending, I configured SES and SMTP in AWS. As a result of the injury, form emails are now sent via SES SMTP, which is more responsive than the normal email assignment.

This article summarises the process from testing the form mail to setting up the SMTP module and SES, and correcting discrepancies between the user registration address and the form email address to eliminate sending errors.

1.Contact form settings.

This time, the domain is acquired in AWS and an email account is set up for the acquired domain. We will set up the contact form to receive contact form emails from the email account we have set up.

Log in to the Drupal administration screen.

  1. Home > Administration > Structure > Contact form { / / Select contact form }
  2. The following screen will appear, click ‘Edit’ under ‘Contact’.

Home > Administration > Structure > Contact form

This time, the domain is acquired in AWS and an email account is set up for the acquired domain. We will set up the contact form to receive contact form emails from the email account we have set up.

Log in to the Drupal administration screen.

Home > Administration > Structure > Contact form  { / / Select contact form }

The following screen will appear, click ‘Edit’ under ‘Contact’.

Home > Administration > Structure > Contact form

1-1.Contact form.
Home > Administration > Structure > Contact forms
+Add contact form
FormRecipientSelectedOperation
Contactinfo@my-domain.comYesEdit
Website feedbackuser@example.comNoEdit
Personal contact formSelected userNoManage fields

Select ‘ Edit ’ for the enquiry. The following screen will appear.

Home > Administration > Structure > Contact form > Manage > Edit contact form

1-2.Edit contact form.
Home > Administration > Site building > Contact forms > Manage > Edit contact form
ViewsEditingManaging fieldsManaging form displayManaging display
Label.
Contact { //contact form name }System internal name: { contact }
Enter a category name that is easy for users to understand. Examples: ‘Feedback on the site’, ‘Request for product information’
Recipient.
info@my-domain.com { // email account obtained from AWS }
E.g. ‘webmaster@example.com’ or ‘sales@example.com,support@example.com’. To specify multiple recipients, enter email addresses separated by commas.
Message.
{ blank as not used }
Message displayed to the user after submitting this form. Leave blank if no message is to be displayed.
Redirect path.
/ { ‘/’ as the user will be redirected to the Top page after submitting the email }
Path to which the user is redirected after submitting this form. For example, typing ‘/about’ will redirect to that page. Use relative paths starting with a slash.
Auto-Reply.
{ blank as not used }
If you want to send an auto-reply message to the user, please fill in the message. If you do not want to send an auto-reply message, leave blank.
Weight.
0∨ {  Can be set from - to +, but select 0 }
The order of the form is from lightest (smallest) weight to heaviest (largest) weight. If the weights are the same, the order is alphabetical.
Make default form  { // Check }
Save / Delete  { Select Save }

After entering the required fields and saving, click

  1. Manage fields // Set up additional fields.
  2. Manage form display // Manage form display
  3. Manage display // You can optionally set the fields to be displayed.

This time, however, we will not do this as it is a test.

1-3.Settings complete.

Once you have completed the above settings

The contact form will appear at https://my-domain.com/contact.

2.reCAPTCHA settings.

If you configure your website with a CMS such as Drupal or WordPress, the possibility of attacks and malicious hacking will arise when you publish your website, because the site configuration is set against email forms for enquiries and login forms to the administration panel. bot and other spam email There is a risk of attacks and in some cases hacking into the login form, and security considerations should be taken into account.

Google reCAPTCHA provided by Google is famous as a tool to detect and prevent continuous sending, suspicious sending, suspicious login, etc., and it has excellent functions, so we introduce Google reCAPTCHA.

In the case of WordPress, well-known formmail plugins such as Contact7 and WpForm have Google reCAPTCHA settings by default, while Drupal uses a module to set up Google reCAPTCHA.

2-1.Module installation.

Two modules are required to use Google reCAPTCHA in Drupal.

  1. CAPTCHA
  2. reCAPTCHA v3

In addition, reCAPTCHA is also installed because v2 is used for v3 authentication.

  1. reCAPTCHA

Login to Bitnami via SSH and install each of them with Composer.

  1. Install CAPTCHA.
    $ sudo composer require 'drupal/captcha:^2.0'
  2. Install reCAPTCHA v3.
    $ sudo composer require 'drupal/recaptcha_v3:^2.0'
  3. Install reCAPTCHA.
    $ sudo composer require 'drupal/recaptcha:^3.4'
2-2.Google reCAPTCHA settings.

To use Google reCAPTCHA

https://www.google.com/recaptcha/about/

and log in to

  1. Register a domain to use reCAPTCHA v3
  2. Select v2 / v3
  3. Get a v3 site key and secret key
  4. Register a domain to use reCAPTCHA
  5. Select v2 / v3
  6. Obtain site key and secret key for v2

Perform the above process.

You can choose between V2 and V3, I use V3 by default. The difference is that V2 requires constant confirmation (selection of the designated image you see often), while V3 can be used without confirmation if it is whitelisted.

The Drupal CAPTCHA authentication is a numerical authentication by image and a simple calculation, but I want to take the form of Google reCAPTCHA v2 for authentication, so I have registered v3 and v2 respectively and obtained a key so that I can use v2.

If the webmaster logs in with the same IP, the same user agent, cookies, etc., he is recognised as the person he is after the second time and does not need to be confirmed.

A Google account is required, so if you don't have one, you need to register.

2-3.CAPTCHA settings.

reCAPTCHA v3 is an extension of CAPTCHA. The basic settings are made in CAPTCHA, the reCAPTCHA v3 settings are made in a function within CAPTCHA, and the image authentication of reCAPTCHA v2 is used as the authentication method.

2-3-1.CAPTCHA settings.

CAPTCHA settings configure the basic behaviour of a given Drupal page where reCAPTCH is installed.

Home > Administration > Configuration > Users > CAPTCHA settings

  1. Standard question format // reCAPTHA v3 (provided by module reCAPTCHA v3)
  2. Charenge Title // reCAPTHA
  3. Authentication Question Description // This question tests whether you are a human visitor and prevents automated spam submissions.
  4. Wrong CAPTCHA response error message // The response entered for the CAPTCHA is incorrect.
  5. Standard CAPTCHA authentication // Select case-insensitive authentication
  6. Duration // Omit challenges in a multi-step/preview workflow once the user successfully responds to a challenge.
  7. Save configuration.
2-3-2.reCAPTCHA v3 settings.

This is the reCAPTCH v3 setting that is read by CAPTCHA. Enter the site key and secret key issued by Google here. The fallback will use reCAPTCHA v2, so specify reCAPTCHA, check the error message and save the configuration.

Home > Administration > Configuration > Users > CAPTCHA Settings > ReCAPTCHA V3 Settings

  1. Site key // Enter the site key issued by Google reCAPTCHA [40 alphanumeric digits }
  2. Secret key // Enter the site key issued by Google reCAPTCHA [40 alphanumeric digits}.
  3. Local domain name validation // Check to select
  4. Default fallback challenge type // reCAPTCHA (provided by module reCAPTCHA)
  5. Select reCAPTCHA from 4 options: None, Math, Image, reCAPTCHA.
  6. Error message // The reCAPTCHA setting is set too high to prevent unauthorised access. Please follow the reCAPTCH instructions below to send a message.

Save configuration

2-3-3.reCAPTCHA v3 action settings.

This is the setting for the behaviour of reCAPTCH v3. reCAPTCH v3 sets the threshold for judging whether a bot or a person is a bot and what questions are submitted for bot judging. Lowering the threshold value relaxes the judgement; 1 is appropriate, but the judgement is a bit harsh, so setting it between 0.5 and 1 is recommended.

Home > Administration > Configuration > Users > CAPTCHA Settings > ReCAPTCHA V3 Actions.

+Add reCAPTCHA v3 action

Label -//- Action -/- Threshold -/- Fail challenge -/- Action

reCAPTCH v3 action-//-recaptch_v3_action-//-0.8-//-reCAPTCHA (module recaptcha provided)-//- edit

  1. Label // reCAPTCH v3 action
  2. Threshold // 0.8
  3. Fallback challenge // reCAPTCHA (provided by module reCAPTCHA)
  4. Save configuration
2-3-4.reCAPTCHA settings.

As reCAPTCH v2 is used for reCAPTCH v3 questions, configure the reCAPTCHA settings: enter the v2 site key and secret key issued by Google. Select the image authentication style displayed and save the configuration.

Home > Administration > Configuration > Users > CAPTCHA settings > reCAPTCHA

  1. Site key // Enter the site key issued by Google reCAPTCHA [40 alphanumeric digits}.
  2. Secret key // Enter the site key issued by Google reCAPTCHA [40 alphanumeric digits}.
  3. Local domain name validation // Check to select
  4. Widget settings
  5. Theme // Light (default)
  6. Type // Image(default)
  7. Size // Normal(default)
  8. Save configuration
2-3-5.CAPTCHA Points settings.

In the CAPTCHA Points settings, specify and activate the page (actually the form ID) to be authenticated with reCAPTHA v3. Here you specify the form mail. The form ID is not registered by default, so use Add CAPTCHA Point to add the form ID and activate it.

Home > Administration > Configuration > Users > CAPTCHA Configuration > CAPTCHA Configuration.

+Add CAPTCHA Point

Captcha Point form ID-//Captcha Point challenge type-//Captcha Point status-//- Operation

contact_form_001-/-recaptcha_v3/recaptch_v3_action-/-enabled-/-edit

Click Add CAPTCHA Point to add a formmail and enable CAPTCHA.

When adding, enter the FormID and specify the authentication question (ReCAPTCHA v3).

contact_form_001 // Form ID of the form mail created using WebForm.

// The easiest way to find out the form ID is in the HTML source of the form mail, near the submit button: name=‘form_id’ value= // The following is the form ID for this page.

type=‘hidden’ name=‘form_id’ value=contact_form_001

2-4.Settings complete.

This completes the reCAPTHA configuration.

Having completed this configuration, a reCAPTHA icon will appear on the email form of the specified enquiry.

3.Verification results.

Now that you have configured your formmail and reCAPTCHA settings, you can verify that your formmail and reCAPTCHA are working. Open the formmail page

  1. Formmail opens in /contact.
  2. The reCAPTCHA icon is displayed.
  3. Fill in the form and click send email.
  4. The Google reCAPTCHA v2 image confirmation screen is displayed, select the specified image as instructed and press the submit button.
  5. You are redirected to the top page and a transmission error appears at the top of the page.

To determine the cause of the error, clear the reCAPTCHA settings and send the email again without reCAPTCHA to check.

At this point, the only thing we can think of is that the SMTP for the email address registered with Drupal is not working. In a similar case, Drupal running on Xserver has no problems, so it is possible that DrupalCore is not able to run the AWS SMTP, so we will think of a way to use an external SMTP in Drupal.

  1. Even if reCAPTCHA is stopped, the error still occurs in the same way, so we suspect the mail server.
  2. To isolate the problem between DrupalCore's email sending functionality and AWS email, send an email to your AWS email account from your MacBook email client instead of Drupal's form mail, confirm receipt, and then confirm your reply.
  3. In this test, there are no problems with the AWS email.

At this point, the only thing we can think of is that the SMTP for the email address registered with Drupal is not working. In a similar case, Drupal running on Xserver has no problems, so it is possible that DrupalCore is not able to run the AWS SMTP, so we will think of a way to use an external SMTP in Drupal.

4.SMTP Authentication Support.

Find modules that allow you to use external SMTP in Drupal.

SMTP Authentication Support

is supported, so install it immediately.

Install SMTP Authentication Support

$ sudo composer require 'drupal/smtp:^1.4'

This module allows you to use external SMTP with Drupal. The configuration is simple and can be set up quickly.

Home > Administration > Configuration > System > SMTP Authentication Support

4-1.SMTP Authentication Support settings.

Install options

  1. Set SMTP as the default mailsystem // On

SMTP server settings

  1. SMTP server // email-smtp.ap-xxxxxx-1.amazonaws.com
  2. SMTP backup server // blank
  3. SMTP port // 25, 587, etc.
  4. Use encrypted protocol // Use TLS
  5. Enable TLS encryption automatically // On
  6. Timeout // 30
  7. Username // SMTP username specified by SES
  8. Password // SMTP password specified by SES

E-mail options

  1. Hostname // blank
  2. HELO // blank

Send test e-mail

  1. E-mail address to send a test e-mail to // blank
  2. E-mail address to reroute all emails to // blank

Save configuration

Now that SMTP Authentication Support has been set up and external SMTP is available on the Drupal side, it is time to set up SMTP authentication on the AWS side to allow access from Drupal.

After setting up SMTP authentication in AWS, register the username and password set in SMTP Authentication Support to enable Drupal to use AWS SMTP.

Configure SMTP external connections in SES (Simple Email Service) in AWS.

5.SES(Simple Email Service).

Configure SMTP authentication for Drupal to connect with SES (Simple Email Service), the AWS email delivery service.

Open the SES console

  1. Log in to the Amazon Management Console
  2. Search for SES by entering SES or Simple Email in the search field
  3. Select the SES that appears in the search results
  4. Start using Amazon Simple Email Service // Click Start using
  5. The Amazon Simple Email Service console opens.

The Amazon SES console appears.

Click on ‘SMTP Settings’ in the left menu.

The Simple Mail Transfer Protocol (SMTP) settings are displayed.

5-1.Simple Mail Transfer Protocol (SMTP)  settings.
  1. SMTP endpoint // email-smtp.region.amazonaws.com
  2. Transport Layer Security (TLS) // Required
  3. STARTTLS port // 25, 587 or 2587
  4. Custom SSL client support - required
  5. TLS wrapper port // 465 or 2465

Click on ‘Create SMTP credentials’.

AWS SMTP uses IAM to manage the credentials that allow access to SMTP from the outside. Therefore, SMTP credentials are set and managed in IAM, not in SES. To do this, click on the screen and go to SES console > IAM console.

Create the SMTP credentials in the opened IAM console.

5-2.SMTP Create authentication information.

IAM / Users / Creating users

Create an IAM user with SMTP credentials for SMTP authentication with Amazon SES.

  1. Specify the user details // ses-smtp-user. western-date - 6-digit control number is automatically generated. Can be left as is if not required.
  2. Permissions // The groups to which users created in SES belong are displayed. Can be left as is if no changes are required
  3. Tags // Create if required, can be left uncreated
  4. Click Create user.

Proceed to Obtain SMTP credentials.

  1. Note the ID and password displayed. (Can be copied and pasted)
  2. You can download a CSV file and save it on your computer.

This will enable access from Drupal to the AWS SMTP.

Return to the Drupal administration screen and register the SMTP authentication information you have obtained in SMTP Authentication Support.

5-3.SMTP Authentication Support Registering authentication information.

SMTP server settings

  1. SMTP server // email-smtp.ap-xxxxxx-1.amazonaws.com
  2. SMTP backup server // blank
  3. SMTP port // 25, 587, etc.
  4. Use encrypted protocol // Use TLS
  5. Enable TLS encryption automatically // On
  6. Timeout // 30
  7. Username // SMTP username specified by SES
  8. Password // SMTP password specified by SES

ID issued this time in 7.

Enter the password issued this time in 8. and save the configuration to enable Drupal to connect to the SES SMTP and send emails.

If the configuration is incomplete, an error will appear in the saved result of SMTP Authentication Support, so check that the configuration is complete. If no errors are displayed, the settings are valid and emails can be sent using the SES SMTP.

5-4.Settings complete.

Drupal is now ready to receive messages sent from formmail with emails from domains that have been acquired using AWS SMTP.

Verify that the use of an external SMTP resolves the email sending errors.

6.Verification results.

The error has not been resolved, although the operation check performed in 3. Verification results is carried out.
The error shows a different error than in 3. Verification results. The error displayed on the redirected home page shows the answer to the cause. The cause of the error was simple.

The message displayed in the error reads ‘Please check iCloud SMTP’. iCloud? The cause of the error was immediately obvious. When I installed Drupal on Lightsail this time, the user's email address that is registered in the initial settings is the iCloud email address that I use for personal use, as I have not yet acquired a domain name. I forgot to change this temporarily registered email address.

We immediately change the user's email address from the personal iCloud address to the email address of the domain we have acquired with AWS. If you send a message from the form mail again after the change, the email will be sent without any problems.

The reason for the length of this article was that we forgot to change our temporary registration address.

  • Error User registration email -- user@icloud.com / Form email -- info@my-domain.com
  • Correction User registration email -- info@my-domain.com / formmail -- info@my-domain.com

The error occurred because when you try to send an email from formmail, it calls icloud's SMTP, which is different from the AWS email address registered in the formmail, which is the email you registered as a user.

I have written a lengthy article about the process of resolving the email submission error, but the cause was due to a very simple mistake. Now that the cause has been found and dealt with, the purpose of using the acquired domain's email in Drupal and setting it as the recipient of form mail has been fulfilled. Since then, I have been able to use form mail without any problems.

This article is about the content of the formmail test. When the formmail is actually used, additional fields are added, as well as additional explanatory documentation. We hope to explain this in a future article on configuring pages in Drupal.

The error that happened this time made me understand that

  1. The SMTP for the emails that register with Drupal is the default SMTP for registered emails.
  2. Drupal does not have SMTP or the ability to deliver emails.
  3. Simply put, the process is similar to the HTML mail:to.
  4. The SMTP of the user's registered email address is used to send the form mail.
  5. The reason for the error is that a transmission request for the address of the domain name acquired with AWS, which was registered in the form mail, goes to the SMTP of iCloud, where the user registered this time.

If the scale of our website is the same, we do not need an external SMTP as the number of emails sent is almost negligible. If we use the acquired domain and the email address of the acquired domain for user registration and use that email address for form mail, there is no problem.

This is understood to be the case.

One of the injuries is the use of an external, dedicated, high-performance SMTP for the email functionality used in Drupal, which we would not have considered without this error. The effect of this is that using a dedicated SMTP speeds up the sending and receiving of emails.

AWS offers a one-year free service if the scale of the SES email delivery is not that large.

The SES email delivery function is a high-performance email delivery system originally designed for companies to send out customer information emails. The system can send out emails to a large number of users at a large scale and is used by some of the world's most famous companies.

7.Summary.

Summarise the lengthy article.

Setting up a form mail and fixing errors.
  1. Use an email from an AWS-acquired domain as the default email for Drupal.
  2. Use as recipient of form mail.
  3. Use Google reCAPTCHA as formmail is used.
  4. Use CAPTCHA, reCAPTCHA v3 and reCAPTCHA modules, managing authentication with reCAPTCHA v3 and using reCAPTCHA v2 for authentication.
  5. Enable external SMTP as it is not possible to send emails due to errors.
  6. Use SMTP Authentication Support, a module to enable external SMTP.
  7. As external SMTP is used with AWS, manage SMTP with SES and configure authentication management from Drupal.
  8. Authentication management is managed using IAM, not SES.
  9. The cause of the error was found to be a mistake in the registration email, not in the system, and the error in the registration email was corrected.
  10. Correcting the registration email solved the cause of the error and solved the email sending problem.
  11. Understanding Drupal's email handling processes
  12. The configured external SMTP is used as it is. The effect is improved email response.

Having made an error from a mistake in the use of form mail, we have been doing a lot of testing and installing and using modules that we had not initially considered using. We believe that this has helped us to understand Drupal and AWS a little better this time.

Next article
Lightsail Summary.

We have written five articles related to Amazon Lightsail, but as the articles have been long and the overall picture has become blurred, we will summarise them in the next section. After the summary in the next section, we will continue to write articles related to Drupal.

Post
2024-11-03
Contributor
S.Takeda
Article
Related articles.

This is a related article on Drupal and web development. Please take a look if you like.

#C06 Installing Lightsail and Drupal.

The installation is easy to complete, as the virtual server called Lightsail and the optimised Drupal are installed at the same time.

#C26 Civic Theme

This is an article about Civic Theme, which sparked my interest in Drupal and led me to build and publish a website.

#C16 Basics of creating page.

I've been writing a series of articles on the basic concepts of Drupal that are necessary for creating pages, but since it's become a lot of articles and it's hard to understand, I'm going to organise them.

Side Bar 01

I migrated my lifestyle blog, which I created using Word Press, to Drupal, and I am currently updating it by adding articles in Drupal.

This is a blog written by a beginner who is learning Drupal.

This article will explain how to build a website using Drupal.

  All Article.

  Drupal Article.

  Web site Article.

  Mac Article.

  AWS Article.

This article is about second-hand clothes and fashion.

  All Article.

  Old-Clothes Article.

  Fashion Article.

  Watch Article.

  Photo Article.

  Recommended Shops.

Core Drupal 10.4.0

Theme Bootstrap5 4.0.3

  Drupal

  bootstrap5

  Bootstrap

  Font Awesome

  Amazon Web Service

  Amazon Lightsail

  Bitnami

  Google reCAPTCHA