技术求助：如何将网页表单数据发送至指定邮箱？

首先修正你代码里的一个关键问题：HTML不允许嵌套<form>标签，你当前代码里在主表单内部又嵌套了一个表单，这会导致提交行为异常，先把嵌套的<form>标签删掉，只保留一个主表单结构。

下面给你几种可行的实现方式，根据你的服务器环境选择：

方法一：使用mailto（无需后端，简单但体验一般） #

这种方式会调用用户本地的邮件客户端（比如Outlook、苹果邮件）来发送邮件，不需要服务器后端支持，适合快速测试：

修改你的表单标签，添加action、method和enctype属性：

<form action="mailto:你的目标邮箱@example.com" method="post" enctype="text/plain">
  <!-- 表单内容保持不变 -->
  <input type="submit" value="Submit">
</form>

注意：这种方式依赖用户本地有配置好的邮件客户端，且邮件是从用户的邮箱发送出去的，不是服务器端发送。

方法二：使用后端脚本（推荐，服务器端发送） #

如果你的网站有后端支持（比如PHP环境），可以写一个简单的后端脚本来处理表单提交并发送邮件，这是生产环境最常用的方案。

步骤1：修改前端表单 #

把表单的action指向你的后端脚本文件（比如send-email.php），method设为post：

<form action="send-email.php" method="post">
  <!-- 表单内容保持不变 -->
  <input type="submit" value="Submit">
</form>

步骤2：创建send-email.php脚本 #

在服务器上创建这个PHP文件，内容如下：

<?php
// 获取表单数据
$employeeFirstName = $_POST['efname'];
$employeeLastName = $_POST['elname'];
$storeLocation = $_POST['elocation'];
$customerName = $_POST['cfname'];
$customerContact = $_POST['cphone'];
$deviceType = $_POST['dropdown'];
$phoneModel = $_POST['mphone'];
$issue = $_POST['wissue'];
$notes = $_POST['anotes'];

// 构建邮件内容
$to = '你的目标邮箱@example.com'; // 替换成实际接收邮箱
$subject = '新的客户推荐申请';
$message = "员工姓名: $employeeFirstName $employeeLastName\n";
$message .= "门店位置: $storeLocation\n\n";
$message .= "客户姓名: $customerName\n";
$message .= "客户联系方式: $customerContact\n";
$message .= "设备类型: $deviceType\n";
$message .= "手机型号: $phoneModel\n";
$message .= "问题描述: $issue\n";
$message .= "额外备注: $notes\n";

// 设置邮件头
$headers = 'From: web-form@你的公司域名.com' . "\r\n" .
           'Reply-To: ' . $customerContact . "\r\n" .
           'X-Mailer: PHP/' . phpversion();

// 发送邮件
if(mail($to, $subject, $message, $headers)) {
    echo "提交成功！我们会尽快处理您的推荐。";
} else {
    echo "提交失败，请稍后重试。";
}
?>

注意：需要确保你的服务器支持PHP的mail()函数，或者可以使用PHPMailer等库来提升邮件发送的可靠性。

方法三：使用无代码表单邮件服务 #

如果没有后端开发能力，可以使用专门的表单提交服务，这类服务能帮你把表单数据转发到指定邮箱，你只需要把表单的action设置为服务提供的接收地址即可（可自行搜索无代码表单邮件工具）。

修正后的完整前端代码示例 #

这里是去掉嵌套表单、优化了样式和添加必填校验的完整HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Phone Doctors Referral Center</title>
    <style>
        body {
            background-color: #e20404;
            color: #FFFFFF;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 2rem 0;
        }
        h1 {
            font-size: 36px;
            font-weight: bold;
            margin: 0;
        }
        .hero {
            background-image: url("phone-repair.jpg");
            background-size: cover;
            background-position: center;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            gap: 1.5rem;
        }
        .hero h2 {
            font-size: 48px;
            margin: 0;
            text-shadow: 2px 2px #000000;
        }
        form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            background: rgba(0,0,0,0.3);
            padding: 2rem;
            border-radius: 8px;
        }
        form label {
            text-align: left;
        }
        form input, form select {
            padding: 0.5rem;
            width: 280px;
            border: none;
            border-radius: 4px;
        }
        form input[type="submit"] {
            background-color: #fff;
            color: #e20404;
            border: none;
            padding: 0.8rem 2rem;
            font-weight: bold;
            cursor: pointer;
            width: auto;
            align-self: center;
        }
    </style>
</head>
<body>
    <header>
        <h1></h1>
    </header>
    <section class="hero">
        <img src="https://scontent-dfw5-2.xx.fbcdn.net/v/t39.30808-6/310105465_435474288684271_2112950804519462739_n.jpg?_nc_cat=108&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=vn1mBIuA8v8AX-c7mRv&tn=4IOIOF7YavKFUIEN&_nc_ht=scontent-dfw5-2.xx&oh=00_AfBHKCcI06i24ne9jd-Fztb2JIbgCBqb54G5S5HIRAA6bw&oe=63F30F2D" alt="Phone Doctors Logo" height="500" width="400">
        <h2>Phone Doctors Referral Center</h2>
        <!-- 修正后的单一表单 -->
        <form action="send-email.php" method="post">
            <label for="efname">Employee First Name:</label>
            <input type="text" id="efname" name="efname" required>

            <label for="elname">Employee Last Name:</label>
            <input type="text" id="elname" name="elname" required>

            <label for="elocation">Store Location:</label>
            <input type="text" id="elocation" name="elocation" required>

            <label for="cfname">Customer's Full Name:</label>
            <input type="text" id="cfname" name="cfname" required>

            <label for="cphone">Customer's # or email:</label>
            <input type="text" id="cphone" name="cphone" required>

            <p>Is the phone an iOS or Android device?</p>
            <select name="dropdown" required>
                <option value="Android">Android</option>
                <option value="iOS">iOS</option>
            </select>

            <label for="mphone">Model of Phone:</label>
            <input type="text" id="mphone" name="mphone" required>

            <label for="wissue">What is the issue?</label>
            <input type="text" id="wissue" name="wissue" required>

            <label for="anotes">Anything else we should know?</label>
            <input type="text" id="anotes" name="anotes">

            <input type="submit" value="Submit">
        </form>
    </section>
    <section>
        <!-- Add more content here -->
    </section>
    <footer>
        <!-- Add footer content here -->
    </footer>
</body>
</html>

内容的提问来源于stack exchange，提问作者Razaroth