Introduction to Next.js | NextJs Tutorial for Beginners #1

Our first Next.js website | NextJs Tutorial for Beginners #2

File Based Routing in Next.js | NextJs Tutorial for Beginners #3

JavaScript and React Refresher for Next.js | NextJs Tutorial for Beginners #4

Project 1: Hunting Coder - A Coder's Blog | NextJs Tutorial for Beginners #5

Head and Script Component in Next.js | NextJs Tutorial for Beginners #6

Image Component in Next.js | NextJs Tutorial for Beginners #7

Creating Multiple Pages in Next.js | NextJs Tutorial for Beginners #8

Link component in Next.js - Understanding next/link | NextJs Tutorial for Beginners #9

Component Level CSS in Next.js | NextJs Tutorial for Beginners #10

Adding Global Styles in Next.js | NextJs Tutorial for Beginners #11

Styled jsx in Next.js | NextJs Tutorial for Beginners #12

Basic Cleanup of Hunting Coder Blog | NextJs Tutorial for Beginners #13

Displaying Navbar on all pages | NextJs Tutorial for Beginners #14

Creating Blog and Blogpost page | NextJs Tutorial for Beginners #15

Adding blog jsons as data | NextJs Tutorial for Beginners #16

Introduction to API Routes in Next.js | NextJs Tutorial for Beginners #17

Creating endpoints to get one/all blogposts | NextJs Tutorial for Beginners #18

Using the API Endpoints | NextJs Tutorial for Beginners #19

Fetching BlogPost using /getblog Endpoint | NextJs Tutorial for Beginners #20

Prerendering Strategies in Next.js | NextJs Tutorial for Beginners #21

Server Side Rendering - getServerSideProps() in Next.js | NextJs Tutorial for Beginners #22

Static site generation, getStaticProps() & getStaticPaths | NextJs Tutorial for Beginners #23

Rendering HTML text using dangerouslySetInnerHTML in Next.js | NextJs Tutorial for Beginners #24

Creating an API to save Contact Data | NextJs Tutorial for Beginners #25

Designing the /contact FrontEnd Page | NextJs Tutorial for Beginners #26

Designing the About Page | NextJs Tutorial for Beginners #27

Styling Fixes in our Hunting coder Blog | NextJs Tutorial for Beginners #28

Adding Infinite Scroll to Hunting Coder | NextJs Tutorial for Beginners #29

Adding Responsive Design to Hunting Coder | NextJs Tutorial for Beginners #30

Deploying Hunting Coder | NextJs Tutorial for Beginners #31

Adding huntingcoder.com Domain and Search Console | NextJs Tutorial for Beginners #32

In the last lecture, we created the postcontact API to process the POST request an user would send to us through the contact form containing all the information regarding their purpose of contacting us. It contains the user's name, email, explanation of why they want to reach out, and their phone number.
However, only creating the endpoint for receiving data and feeding it into the database is not enough. To facilitate the use of this API in the front end, we must design a front-end contact form that users can use to send us their query.&nbsp; Today, we will design that contact form. So, let&rsquo;s get started.
&nbsp;
<h2>Designing the contact page:</h2>
Run the development server.&nbsp; Currently, when you navigate to the page at <a href="http://localhost:3000/contact/">http://localhost:3000/contact/</a>, you will find nothing but a demo text. This is where we wish to see our contact form. As we have done earlier as well, we will first define a module.css file named Contact.module.css for handling the styling of the form. Get back to the contact.js file in the pages folder.
In the return statement of the Contact component, we will frame our form&rsquo;s JSX. We will, however, use the basic template of a form present on the bootstrap website in order to save ourselves some time. Below is the one I've used.
<pre class="language-javascript"><code>&lt;form&gt;
 &lt;div class="form-group"&gt;
 &lt;label for="exampleInputEmail1"&gt;Email address&lt;/label&gt;
 &lt;input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"&gt;
 &lt;small id="emailHelp" class="form-text text-muted"&gt;We'll never share your email with anyone else.&lt;/small&gt;
 &lt;/div&gt;
 &lt;div class="form-group"&gt;
 &lt;label for="exampleInputPassword1"&gt;Password&lt;/label&gt;
 &lt;input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"&gt;
 &lt;/div&gt;
 &lt;div class="form-group form-check"&gt;
 &lt;input type="checkbox" class="form-check-input" id="exampleCheck1"&gt;
 &lt;label class="form-check-label" for="exampleCheck1"&gt;Check me out&lt;/label&gt;
 &lt;/div&gt;
 &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</code></pre>
Code Snippet 1: Form template in HTML
&nbsp;
Make sure you do little changes needed to convert this HTML template to JSX. Import styles from Contact.module.css. We&rsquo;ll add a heading h1 on the top of the page. In the template above, there are three input fields, whereas we need four of them. We would have fields for name, email, phone and description. So, we will make changes accordingly. We have also added a textarea for the description field.
Here&rsquo;s how the form&rsquo;s JSX looks.
<pre class="language-javascript"><code> &lt;div className={styles.container}&gt;
 &lt;h1&gt;Contact Us&lt;/h1&gt;
 &lt;form&gt;
 &lt;div className={styles.mb3}&gt;
 &lt;label htmlFor="name" className={styles.formlabel}&gt;Enter your name&lt;/label&gt;
 &lt;input type="text" className="form-control" id="name" name='name' aria-describedby="emailHelp" /&gt;
 &lt;/div&gt;
 &lt;div className={styles.mb3}&gt;
 &lt;label htmlFor="email" className={styles.formlabel}&gt;Email address&lt;/label&gt;
 &lt;input type="email" className="form-control" name='email' id="email" aria-describedby="emailHelp" /&gt;
 &lt;div id="emailHelp" className="form-text"&gt;We'll never share your email with anyone else.&lt;/div&gt;
 &lt;/div&gt;
 &lt;div className={styles.mb3}&gt;
 &lt;label htmlFor="phone" className={styles.formlabel}&gt;Phone&lt;/label&gt;
 &lt;input type="phone" className="form-control" name='phone' id="phone" /&gt;
 &lt;/div&gt;
 &lt;div className={styles.mb3}&gt;
 &lt;label htmlFor="desc"&gt;Elaborate your concern&lt;/label&gt;
 &lt;textarea className="form-control" placeholder="Write your concern here" name='desc' id="desc" /&gt;
 &lt;/div&gt;
 &lt;button type="submit" className="btn btn-primary"&gt;Submit&lt;/button&gt;
 &lt;/form&gt;
 &lt;/div&gt;;
</code></pre>
Code Snippet 2: Contact Form template in JSX
&nbsp;
We still have to create classes we have used above. We have three classes, container, mb-3, and form-label. We&rsquo;ll define all these in the Contact.module.css. The container object would have a max-width of 45vw, and margin set to auto. Similarly, the mb-3 object would have a bottom margin of 21px, while the form-label object would have a left and right margin of 14px.
<pre class="language-javascript"><code>.container {
 max-width: 45vw;
 margin: auto;
}

.mb3 {
 margin-bottom: 21px;
}

.formlabel {
 margin: 0px 14px;
}
</code></pre>
Code Snippet 3: styles/Contact.module.css
&nbsp;
Here&rsquo;s how the contact form looks.
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/videos/nextjs-tutorial-in-hindi-26/39f67631a617ecf2d587660403f21a98.webp" alt="" />
As far as the front end is concerned, we are not doing much. Now that we have designed the form, we will implement its functionality. We&rsquo;ll have to write a function for submitting the form when we click the submit button.
&nbsp;
<h3>Creating function handleSubmit:</h3>
Create an arrow function handleSubmit and put this in the form tag as its onSubmit function. Create four states for each of the fields. And set them blank as default. Ensure that each of the input fields has a value attribute and that their names are the same as those of the states. To be able to use states, you must import useState from react. 
In the handleSubmit function, which must take event e as a parameter, use the preventDefault function to avoid the reloading of the page on submitting the form. In order for the input made by a user to be reflected on the frontend, we also need to add an onChange function for each of the input fields. For that, create another function named handleChange. We will use this to set all four states using the target.value attribute of the event parameter e.
Here&rsquo;s how the handleChange function looks.
<pre class="language-javascript"><code>const handleChange = (e) =&gt; {
 if (e.target.name == 'phone') {
 setphone(e.target.value)
 }
 else if (e.target.name == 'email') {
 setemail(e.target.value)
 }
 else if (e.target.name == 'desc') {
 setdesc(e.target.value)
 }
 else if (e.target.name == 'name') {
 setname(e.target.value)
 }
 }
</code></pre>
Code Snippet 4: handleChange function
&nbsp;
After we've set all states, we'll use the handleSubmit function to prepare these values for submission. Here&rsquo;s where we will use the postcontact API. We will use the API to POST JSON-encoded data. Snippet for the same is available on the internet. Below is the one we are using.
<pre class="language-javascript"><code>const data = { username: 'example' };

fetch('https://example.com/profile', {
 method: 'POST', // or 'PUT'
 headers: {
 'Content-Type': 'application/json',
 },
 body: JSON.stringify(data),
})
.then(response =&gt; response.json())
.then(data =&gt; {
 console.log('Success:', data);
})
.catch((error) =&gt; {
 console.error('Error:', error);
});
</code></pre>
Code Snippet 5: Using the fetch API 
&nbsp;
Use this snippet in the handleSubmit function. Replace the fetch API link with that of the postcontact. Add all four fields to the data object. We will add an alert affirming the submission of the form. We&rsquo;ll also set blank all the input fields. Here&rsquo;s the changed final code of contact.js.
<pre class="language-javascript"><code>import React, { useState } from 'react';
import styles from '../styles/Contact.module.css'

const Contact = () =&gt; {
 const [name, setname] = useState('')
 const [email, setemail] = useState('')
 const [phone, setphone] = useState('')
 const [desc, setdesc] = useState('')

 const handleSubmit = (e) =&gt; {
 e.preventDefault()
 console.log(phone, name, email, desc)
 const data = { phone, name, email, desc };

 fetch('http://localhost:3000/api/postcontact', {
 method: 'POST', // or 'PUT'
 headers: {
 'Content-Type': 'application/json',
 },
 body: JSON.stringify(data),
 })
 .then(response =&gt; response.text())
 .then(data =&gt; {
 console.log('Success:', data);
 alert("Thanks for contacting us");
 setphone('')
 setname('')
 setdesc('')
 setemail('')
 })
 .catch((error) =&gt; {
 console.error('Error:', error);
 });

 }
 const handleChange = (e) =&gt; {
 if (e.target.name == 'phone') {
 setphone(e.target.value)
 }
 else if (e.target.name == 'email') {
 setemail(e.target.value)
 }
 else if (e.target.name == 'desc') {
 setdesc(e.target.value)
 }
 else if (e.target.name == 'name') {
 setname(e.target.value)
 }
 }

 return &lt;div className={styles.container}&gt;
 &lt;h1&gt;Contact Us&lt;/h1&gt;
 &lt;form onSubmit={handleSubmit}&gt;
 &lt;div className={styles.mb3}&gt;
 &lt;label htmlFor="name" className={styles.formlabel}&gt;Enter your name&lt;/label&gt;
 &lt;input type="text" value={name} onChange={handleChange} className="form-control" id="name" name='name' aria-describedby="emailHelp" /&gt;
 &lt;/div&gt;
 &lt;div className={styles.mb3}&gt;
 &lt;label htmlFor="email" className={styles.formlabel}&gt;Email address&lt;/label&gt;
 &lt;input type="email" value={email} onChange={handleChange} className="form-control" name='email' id="email" aria-describedby="emailHelp" /&gt;
 &lt;div id="emailHelp" className="form-text"&gt;We'll never share your email with anyone else.&lt;/div&gt;
 &lt;/div&gt;
 &lt;div className={styles.mb3}&gt;
 &lt;label htmlFor="phone" className={styles.formlabel}&gt;Password&lt;/label&gt;
 &lt;input type="phone" value={phone} onChange={handleChange} className="form-control" name='phone' id="phone" /&gt;
 &lt;/div&gt;
 &lt;div className={styles.mb3}&gt;
 &lt;label htmlFor="desc"&gt;Elaborate your concern&lt;/label&gt;
 &lt;textarea value={desc} onChange={handleChange} className="form-control" placeholder="Write your concern here" name='desc' id="desc" /&gt;
 &lt;/div&gt;
 &lt;button type="submit" className="btn btn-primary"&gt;Submit&lt;/button&gt;
 &lt;/form&gt;
 &lt;/div&gt;;
};

export default Contact;
</code></pre>
Code Snippet 6: pages/contact.js
&nbsp;
Here, we finish the designing of the contact form, and the application of the postcontact API. Please review the process again, and I'll see you all in the next lecture, where we'll design our about page.
&nbsp;