Resetting form fields onsubmit in next js

In this post I am going to show you how you can reset your form fields on submit in any next js website.

First of let's create a basic JSX form template as shown below

  <form id="SubmitForm" className={`${styles.form}`} onSubmit={SubmitForm}>
    <h3 className={`${styles.heading}`}>Basic form example</h3>
    <div >
        <input name="username" placeholder="enter username" className={`${styles.form_field}`} type="text" /> 
    <div >
      <input name="email" placeholder="enter email" className={`${styles.form_field}`} type="email" />
    <div >
     <input name="password" placeholder="enter password" className={`${styles.form_field}`} type="password" />

    <div className={`${styles.button_wrapper}`}>
       <button className={`${styles.submit_button}`} type="submit">Submit</button>

Above is the JSX for a basic form in next js. As you can see from the code above onsubmission of our form a const SubmitForm is being called to handle the submission process.

Below is the Css used to style the form

    display: grid;
    justify-content: center;
    background: #303f9f;
    color: white;
    border-radius: 13px;
    margin-bottom: 10px;
    border: unset;
    display: flex;
    justify-content: center;
    border-radius: 10px;
    border: white 2px solid;
    color: white;
    background: unset;

 If you don't know how to setup an external stylesheet for your next js website then read our How to use external stylesheets in next js post to get started

The final step is to create the SubmitForm const in our code as shown below;

const SubmitForm = (e) =>{
    var formData = new FormData(;
    const form_values = Object.fromEntries(formData);
    console.log('www', form_values)

On clicking the submit button the forms data is consoled out in the browser and the form fields are reset by the "reset()" function attached to the form's id.


Through this short tutorial I have been able to show you how you can reset the fields of any form in your next js using a simple basic jsx form example. Thanks for reading, any comments or questions regarding the post can be added in the comment section below.


Hello, my name is Abubakar Zakari. Am a budding fullstack developer from Nigeria who loves developing softwares and learning new frameworks and langauges.


Select image

No comment yet




Frontend Development |Backend Development |Full Website Development |Bootstrap Website upgrades | Website Debbugging | Website Hosting & deployment


Interested in hiring me or collaborating with me on a project, click on any of the links below to get my social media handle

Or contact me via Tel: (+234)-806-225-7480 | Email:
Privacy Policy

By using our website,
you agree that devmaesters can store cookies on your device and disclose information in accordance with our privacy policy.