基于下拉选择动态分配Mailchimp用户标签的教程

<form action="/" method="post">
    <!-- 其他表单字段，例如姓名和邮箱 -->
    <div class="mb-3">
        <label for="firstName" class="form-label">First Name</label>
        <input type="text" class="form-control" id="firstName" name="firstName" required>
    </div>
    <div class="mb-3">
        <label for="lastName" class="form-label">Last Name</label>
        <input type="text" class="form-control" id="lastName" name="lastName" required>
    </div>
    <div class="mb-3">
        <label for="email" class="form-label">Email address</label>
        <input type="email" class="form-control" id="email" name="email" required>
    </div>

    <!-- 下拉选择器 -->
    <div class="dropdown me-1">
        <select name="dropDown" id="dropDown" class="form-select">
            <option value="">Choose your interest</option> <!-- 提示选项，通常value为空或特定值 -->
            <option value="B2B">Business to Business</option>
            <option value="B2C">Business to Consumer</option>
        </select>
    </div>

    <button type="submit" class="btn btn-primary mt-3">Subscribe</button>
</form>

const express = require('express');
const app = express();
const bodyParser = require('body-parser'); // 如果Express版本较老，需要引入

// 配置 body-parser 来解析 URL-encoded 和 JSON 格式的请求体
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public")); // 假设有静态文件
app.set('view engine', 'ejs'); // 设置 EJS 模板引擎

// GET 路由：渲染表单页面
app.get('/', (req, res) => {
    // 假设 b2b 和 b2c 是用于 EJS 页面渲染的变量，这里不再需要直接渲染到 option 的文本
    // 它们可以是用于其他显示目的，但对于 select 的 value 属性，直接硬编码更简单。
    res.render('index'); // 渲染包含上述表单的 EJS 模板
});

// POST 路由：处理表单提交
app.post('/', (req, res) => {
    // 从 req.body 中获取表单字段值
    const firstName = req.body.firstName;
    const lastName = req.body.lastName;
    const email = req.body.email;
    const selectedTag = req.body.dropDown; // 获取下拉菜单选定的值

    // 构建 Mailchimp API 请求所需的数据结构
    const mailchimpData = {
        status: "active", // 订阅状态
        members: [
            {
                email_address: email,
                status: "subscribed",
                merge_fields: {
                    FNAME: firstName,
                    LNAME: lastName,
                },
                // 将用户选择的标签添加到 tags 数组中
                tags: [selectedTag],
            }
        ],
    };

    // 在此处添加与 Mailchimp API 交互的逻辑
    // 例如：
    // const mailchimp = require('@mailchimp/mailchimp_marketing');
    // mailchimp.setConfig({
    //   apiKey: "YOUR_MAILCHIMP_API_KEY",
    //   server: "YOUR_MAILCHIMP_SERVER_PREFIX" // 例如 us1, us2 等
    // });
    //
    // async function run() {
    //   try {
    //     const response = await mailchimp.lists.batchListMembers(
    //       "YOUR_LIST_ID", // Mailchimp 列表 ID
    //       mailchimpData
    //     );
    //     console.log(response);
    //     res.send("Successfully subscribed!");
    //   } catch (error) {
    //     console.error("Mailchimp API Error:", error);
    //     res.status(500).send("Failed to subscribe.");
    //   }
    // }
    // run();

    // 仅为演示，实际应用中会调用 Mailchimp API
    console.log("Received data:", { firstName, lastName, email, selectedTag });
    console.log("Mailchimp data structure:", mailchimpData);
    res.send("Form submitted and data processed! Check console for Mailchimp data.");
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});