Next.js is a powerful framework for building server-side rendered React applications. One common feature of many websites is a "Contact Us" form, which allows users to send messages or inquiries to the site's administrators. To make this feature functional, we need to connect the form to a database, where the submitted information will be stored and retrieved for later use. In this blog, we will explore the steps to connect a database to a "Contact Us" form on a Next.js website.

Assuming you have Node.js and npm installed, create a new Next.js project by running the following commands in your terminal:

Next, we need to install the necessary packages for working with databases and handling form submissions. For this example, we will use MongoDB as our database, but you can choose any other database system of your preference. Install the required dependencies by running the following command:

Before connecting our Next.js app to the MongoDB database, ensure you have a MongoDB instance set up. You can create a free account on MongoDB Atlas and set up a new database there. Once you have your MongoDB URI, create a .env file in the root of your project and store the URI like this:

Now, let's create a simple "Contact Us" form. Inside the "pages" directory, create a new file called "contact.js". Add the following code to create a basic form:

  const [email, setEmail] = useState('');

  const [message, setMessage] = useState('');

    // Add code to handle form submission and database connection here

        onChange={(e) => setName(e.target.value)}

        onChange={(e) => setEmail(e.target.value)}

        onChange={(e) => setMessage(e.target.value)}

      <button type="submit">Submit</button>

To interact with the MongoDB database, we need to create a model that defines the structure of the data we want to store. In the root directory, create a new folder called "models", and within it, create a file named "ContactMessage.js". Add the following code to define the model:

const contactMessageSchema = new mongoose.Schema({

  name: { type: String, required: true },

  email: { type: String, required: true },

  message: { type: String, required: true },

  createdAt: { type: Date, default: Date.now },

const ContactMessage = mongoose.model('ContactMessage', contactMessageSchema);

In the root directory, create a new file called "db.js" to handle the database connection. Add the following code to establish a connection using Mongoose:

    const conn = await mongoose.connect(process.env.MONGODB_URI, {

    console.log(`MongoDB Connected: ${conn.connection.host}`);

    console.error(`Error connecting to MongoDB: ${error.message}`);

Learn how to connect a MongoDB database to a 'Contact Us' form in a Next.js website, enabling the storage and retrieval of user messages.

contact form

Trending Blogposts on contact form

Connecting a Database to the Contact Us Form on a Next.js Website

Popular Discussions on contact form

PRODUCTS

QUICK LINKS

LEGAL

contact form

Trending Blogposts on contact form

Connecting a Database to the Contact Us Form on a Next.js Website

Popular Discussions on contact form