Creé una página de registro de 3 formularios para un mejor CSS, pero ahora tengo problemas para ingresar y almacenarlo en mi base de datos.

 <div class="container"> <form id="form1"> <h2> Join Us </h2> <input type="text" placeholder="Username" name="username" required /> <input type="text" placeholder="First Name" name="firstname" required /> <input type="text" placeholder="Last Name" name="lastname" /> <div class="btn"> <button type="button" id="login"><a href="login.html"> Login </a></button> <button type="button" id="next1"> Next </button> </div> </form> <form id="form2"> <h2> Create Password </h2> <input type="password" placeholder="Password" name="password" required /> <input type="password" placeholder="Confirm Password" required /> <div class="btn"> <button type="button" id="back1"> Back </button> <button type="button" id="next2"> Next </button> </div> </form> <form id="form3"> <h2> Complete Signup </h2> <input type="number" placeholder="Mobile number" name="number" required /> <input type="email" placeholder="E-mail" name="mail" required /> <div class="btn"> <button type="button" id="back2"> Back </button> <button type="submit" id="submit"> Submit </button> </div> </form>

Cada vez que trato de tomar una entrada y almacenarla, solo almacena los datos del último formulario. ¿Hay alguna manera de que pueda tomar datos de los tres formularios y almacenarlos?

Insertar función js

 submit.onclick = function submit() { form1.method = "post"; form2.method = "post"; form3.method = "post"; form3.action = "insert.php" }