更新输入值后无法触发Formspree表单提交动作的问题求助

问题说明 #

我想用仅支持两个输入字段的Formspree邮件服务，因此采用双表单方案：第一个表单收集姓名、邮箱、电话、消息等多字段，提交时将这些内容整合后更新第二个Formspree目标表单的email和message字段，再触发其提交，但当前代码无法完成该任务，希望实现带更新后值的第二个表单提交动作。

原HTML代码：

<main>
        <div class="container">
            <p class="specialtext">Contact ME!</p>
            <form  class="contactform" id="firstForm">
                <input type="text" id="name" placeholder="Your Name" required>
                <input type="email" id="email" name="email" placeholder="E-Mail" required>
                <input type="text" id="phoneno" name="phone" placeholder="Phone No.">
                <textarea name="message" id="message"  placeholder="Message" cols="30" rows="10" required></textarea>
                <button type="submit">SUBMIT</button>
            </form>

            <form action="https://formspree.io/f/xoqzgybd" method="post" id="secondForm">
                <!-- <input type="email" name="name" > -->
                <input type="email" name="email">
                <textarea name="message" id="" cols="1" rows="1"></textarea>
            </form>

        </div>
    </main>

原JavaScript代码：

let firstForm = document.getElementById('firstForm');
let secondForm = document.getElementById('secondForm');
let emailInput = document.querySelector('#secondForm input[name="email"]');
let messageInput = document.querySelector('#secondForm textarea[name="message"]');

firstForm.addEventListener('submit', function(e){
    e.preventDefault();
    
    let emailtext=document.querySelector( '#email' ).value;
    let messagetext = document.getElementById('name').value + "/n" +
        document.getElementById('phoneno').value + "/n" +
        document.getElementById('message').value;

    emailInput.value = emailtext;
    messageInput.value = messagetext;

    secondForm.submit();
});

错误原因及修正方案 #

原代码核心问题是换行符使用错误：将JavaScript中正确的换行符\n写成了/n，导致整合后的消息内容格式混乱，同时可能影响Formspree的字段识别。另外可优化第二个表单的显示逻辑，避免干扰用户操作。

修正后的完整代码 #

HTML（添加隐藏样式）

<main>
    <div class="container">
        <p class="specialtext">Contact ME!</p>
        <form class="contactform" id="firstForm">
            <input type="text" id="name" placeholder="Your Name" required>
            <input type="email" id="email" name="email" placeholder="E-Mail" required>
            <input type="text" id="phoneno" name="phone" placeholder="Phone No.">
            <textarea name="message" id="message" placeholder="Message" cols="30" rows="10" required></textarea>
            <button type="submit">SUBMIT</button>
        </form>

        <!-- 隐藏第二个表单，避免干扰用户操作 -->
        <form action="https://formspree.io/f/xoqzgybd" method="post" id="secondForm" style="display: none;">
            <input type="email" name="email">
            <textarea name="message"></textarea>
        </form>
    </div>
</main>

JavaScript（修正换行符，优化字段处理）

const firstForm = document.getElementById('firstForm');
const secondForm = document.getElementById('secondForm');
const emailInput = secondForm.querySelector('input[name="email"]');
const messageInput = secondForm.querySelector('textarea[name="message"]');

firstForm.addEventListener('submit', function(e) {
    e.preventDefault();
    
    // 获取并清理表单字段值
    const userName = document.getElementById('name').value.trim();
    const userEmail = document.getElementById('email').value.trim();
    const userPhone = document.getElementById('phoneno').value.trim();
    const userMessage = document.getElementById('message').value.trim();

    // 整合多字段内容，使用正确换行符\n
    const combinedMessage = `姓名: ${userName}\n电话: ${userPhone || '未填写'}\n留言: ${userMessage}`;

    // 为第二个表单赋值
    emailInput.value = userEmail;
    messageInput.value = combinedMessage;

    // 提交Formspree表单
    secondForm.submit();
});

关键修改点 #

• 替换错误的/n为正确的换行符\n，确保邮件内容格式清晰
• 给第二个表单添加display: none样式，隐藏表单避免用户误操作
• 添加trim()清理字段首尾空格，提升内容整洁度
• 为整合后的消息添加字段标签，让收到的邮件内容更易读

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