Not able to perform form action after updating of input values

I want to use an email service from formspree that uses input format :

<form
  action="https://formspree.io/f/*formendpoint* "
  method="POST"
>
  <label>
    Your email:
    <input type="email" name="email">
  </label>
  <label>
    Your message:
    <textarea name="message"></textarea>
  </label>
  <!-- your other form fields go here -->
  <button type="submit">Send</button>
</form>

As this allows only two inputs. so I am using one form to take multiple inputs and update the input values of another form which will perform the formspree function. But the following code is unable to perform the task.

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>

Script:

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();
});

I want the action of second form performed with updated values.your text

Make sure you have spell all the inputs and outputs correctly.

Here is a simpler script that is easier to debug

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let firstForm = document.getElementById('firstForm');
let secondForm = document.getElementById('secondForm');
let emailInput = document.getElementById('email');
let emailOutput = document.getElementById('email1');
let messageOutput = document.getElementById('message1');

firstForm.addEventListener('submit', function(e) {
  e.preventDefault();
  emailOutput.value = document.getElementById('email').value;
  let messagetext = [];
  messagetext.push(document.getElementById('name').value);
  messagetext.push(document.getElementById('phoneno').value);
  messagetext.push(document.getElementById('message').value);
  messageOutput.value = messagetext.join("\n");
  secondForm.submit();
});

<!-- language: lang-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>
  </div>
</main>

<form action="https://formspree.io/f/xoqzgybd" method="post" id="secondForm" hidden>
  <input name="email" id="email1">
  <textarea name="message" id="message1"></textarea>
</form>

<!-- end snippet -->