Recently, I found a homepage template on html5up, which has a form at the bottom. While modifying the template today, a friend mentioned that the form could be configured to automatically send email notifications upon submission. This idea sparked my interest, and I ended up spending three to four hours on it (mainly because some "tutorials" online are really misleading!). So, I’m documenting the configuration process for future reference.
Install PHP and PHP-FPM on the Server#
The author is using Ubuntu 18.04, so the commands used are:
Add PHP Support to the Web Server#
The author is using Nginx. To support PHP, the configuration file needs to be modified. Many tutorials online suggest changing nginx.conf
, but I found that my configuration file differs significantly from theirs. After testing, I found that modifying /etc/nginx/sites-available/default
worked. The PHP-related parts of the file should be modified to:
Modify the HTML File Containing the Form#
Next, open the HTML file containing the form and modify the form tag. For example, mine looks like this:
Configure the mail.php File#
The form submission will call the mail.php file, so it needs to be configured next. I browsed many websites and found that there are generally only two templates online, namely this one and this one. However, after personal experience, I found that neither of them worked! The first one was purely a configuration file issue; even after I modified everything correctly, it still didn’t work (perhaps because I deleted too much?). The second one used PHP's mail() function, but unfortunately, as stated in this article that ultimately solved my problem here:
In a PHP environment, there is a function
mail()
for sending emails, but this function requires the server to support sendmail or to set up a mail sending server that does not require relay. However, finding a mail sending relay that does not require authentication is almost impossible, so using the mail function often fails to send emails.
The mail() function indeed cannot successfully send emails. This article also provides a solution, which is to use PHPMailer.
Clone it to the server and unzip it. The mail.php file only needs slight modifications according to the Example given in README.md. My version is roughly:
Method to Submit Without Redirecting#
After the above configuration, your form should be able to send emails normally. The only downside is that after clicking submit, it redirects and shows a bunch of prompt messages, which affects the user experience. This article here provides a feasible method, which is to add a target attribute to the form
tag and add an iframe
tag. For my form, the form
tag needs to be modified to:
And then add:
Although this modification works, it will display a simple frame after clicking submit, showing the previous redirect prompt messages. This does not achieve our goal, so I thought of hiding the iframe
tag by setting its height and width to 0:
However, this introduces another problem: after clicking the button, it is unknown whether the email was successfully sent, as all prompt messages are hidden. So, I thought of changing the two echo
statements in the original PHP file that output prompt messages to echo "<script>alert('Content')</script>"
, which means:
This way, a web alert can prompt the email sending result without redirecting.
Conclusion#
Overall, while the above implementation works normally, there is still much room for improvement, such as the method for submitting without redirecting. However, since I have not systematically studied web-related knowledge, I can only make do with it for now. I’ll consider improvements when I have some free time (laughs). I also welcome everyone to give me suggestions in the comments! (By the way, does anyone actually read this article?!)