Add Contact Form in Nextjs

Contact Form

In the blog, we'll have our contact us form. So readers or visitors can contact us. Let's create that form quickly.

Before proceeding, we should have our thoughts in one place. What do we want in our contact form?

We should have the email id of the user or visitor.
We should have the name of the user or visitor.
And a message.
If we think about it, email and username have an input field of type email and text. If we create an Input component and pass the input field type, we can use it anywhere within our application. I mean without repeating it.

Let's create a folder Form under the components. Under the Form, create the InputField.js file. And add the following code:

function InputFieldComponent(props) {
    return (
        <input type={props.type.type} id={props.type.id} name={props.type.name}
               className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight
                            px-4 py-4 focus:outline-none focus:shadow-outline"
               placeholder={props.type.placeholder}

        />
    )
}

export default InputFieldComponent

In the above component, we pass the type, id, name and, placeholder for the input field. In this way, we can use it anywhere in the application.

Similarly, create the component for TextArea. Create a file TextAreaField.js under the Form folder and add the following code:

function TextAreaComponent(props) {
    return (
        <textarea type={props.type.type} id={props.type.id} name={props.type.name}
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight
            px-4 py-4 focus:outline-none focus:shadow-outline"
            placeholder={props.type.placeholder} rows={props.type.rows}/>
    )
}

export default TextAreaComponent

What next? We need to use it in our Contact Form. Let's create a component for Contact Form. Create a folder Contact under the components. And add the ContactComponent.js file and add the following code:

import Button from "../Button/Button";
import InputFieldComponent from "../Form/InputField";
import TextAreaComponent from "../Form/TextAreaField";

function ContactComponent() {
    const emailType = {
        type: 'email',
        placeholder: 'Your Email Please',
        id: 'username',
        name: 'username'
    }

    const nameType = {
        type: 'text',
        placeholder: 'Your Full Name Please',
        id: 'full-name',
        name: 'fullname'
    }

    const messageType = {
        type: 'text',
        placeholder: 'Type your message here...',
        id: 'message',
        name: 'message',
        rows: 5
    }

    const button = [
        'med', '123'
    ]

    return(
        <div className={`w-1/2 mx-auto mt-10 my-auto`}>
            <form action='#' className={`bg-white shadow-2xl rounded px-8 pt-6 pb-8 mb-4 mt-4`}
                  onSubmit={submitContactMessage}>
                <div id="login-box" className={`text-center mb-4`}>
                    <span className={`mx-auto`}>
                        Mail me directly at
                        <span className={`text-cyan-600 underline ml-1 mr-1 font-medium`}>
                            <a href={`mailto:[email protected]`}>kukreti.ashutosh@gmail.com </a>
                        </span>
                        or submit your message via
                    </span>
                    <div id="login-box-caption" className={`font-bold text-2xl text-cyan-500`}>Contact Me Form</div>

                </div>
                <div className={`mb-3 mt-10`}>
                    <label className={`block text-gray-700 text-sm font-bold mb-2`} htmlFor="username">
                        Your Email ID
                    </label>
                    <InputFieldComponent type={ emailType } />
                    <div id={`username-required`} className={`text-red-500 italic text-sm mt-1`}/>
                </div>

                <div className={`mb-3 mt-10`}>
                    <label className={`block text-gray-700 text-sm font-bold mb-2`} htmlFor="message">
                        Your Full Name
                    </label>
                    <InputFieldComponent type={ nameType } />
                    <div id={`fullname-required`} className={`text-red-500 italic text-sm mt-1`}/>
                </div>

                <div className={`mb-3 mt-10`}>
                    <TextAreaComponent type={ messageType } />
                    <div id={`message-required`} className={`text-red-500 italic text-sm mt-1`}/>
                </div>

                <div className={`mb-3 mt-10`}>
                    <Button size={button} children={<span>Submit</span>} />
                </div>

                <div id={`message-success`} className={`text-green-500 italic text-sm mt-1`}/>

            </form>
        </div>
    )
}

function submitContactMessage(event) {
    event.preventDefault()

    const userEmail = event.target.username.value
    const userFullName = event.target.fullname.value
    const userMessage = event.target.message.value

    if (!userEmail) {
        document.getElementById('username-required').innerHTML = 'Email Id is required'
    }
    if (!userFullName) {
        document.getElementById('fullname-required').innerHTML = 'Full Name is required'
    }
    if (!userMessage) {
        document.getElementById('message-required').innerHTML = 'Message is required'
        return
    }

    document.getElementById('message-success').innerHTML =
        'Thanks you for contacting me. I\'ll soon be in touch with you.'
}

export default ContactComponent

We are using "" and pass the constant emailType and nameType.

And now use this component in index.js under the contact page.

import ContactComponent from "../../components/Contact/ContactComponent";

function ContactPage() {
    return (
        <div>
            <ContactComponent />
        </div>
    )
}

export default ContactPage


Refresh the page.

We'll add the API to store the information later. The backend of our blog is not ready yet.

12

Tags:

Nextjs