Routing: Exercise 3

Exercise Topic: Create a Contacts Page

Instructions:

Create a Contacts page that displays contact information for your business or organization. The page should include a form for users to submit inquiries or feedback. Use Primereact components to style and structure the page.

The Contacts Page should include:

A header with a title, and a brief description of what the page is for.
A section for displaying contact information, such as the business address, phone number, email address, and any other relevant information.
A form for users to submit inquiries or feedback, with fields for name, email address, subject, and message.
A submit button to submit the form.

Example with Prime

import React, { useState } from 'react';

import { Card } from 'primereact/card';

import { Fieldset } from 'primereact/fieldset';

import { InputText } from 'primereact/inputtext';

import { InputTextarea } from 'primereact/inputtextarea';

import { Button } from 'primereact/button';

import { Divider } from "primereact/divider";

function MyContactPage() {

const [name, setName] = useState('');

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

const [subject, setSubject] = useState('');

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

function handleSubmit(event) {

event.preventDefault();

// Send the form data to the server or do something else with it

}

return (

<h1 className="p-text-center">Contact Us</h1>

<p className="p-mb-6 p-text-center">Feel free to get in touch with us if you have any questions or feedback.</p>

<li>123 Main St, Anytown, USA</li>

<li>info@yourbusiness.com</li>

</ul>

</Fieldset>

<InputText id="name" value={name} onChange={(e) => setName(e.target.value)} />

</div>

<label htmlFor="email">Email: </label>

<InputText id="email" value={email} onChange={(e) => setEmail(e.target.value)} />

</div>

<label htmlFor="subject">Subject: </label>

<InputText id="subject" value={subject} onChange={(e) => setSubject(e.target.value)} />

</div>

<label htmlFor="message">Message: </label>

<InputTextarea id="message" value={message} onChange={(e) => setMessage(e.target.value)} rows={5} />

</div>

</form>

</Fieldset>

</Card>

);

}

export default MyContactPage;

Example with Prime & Css

MyContactPageCss.js

import React, { useState } from "react";

import { InputText } from "primereact/inputtext";

import { InputTextarea } from "primereact/inputtextarea";

import { Button } from "primereact/button";

import { Divider } from "primereact/divider";

import "./MyContactPageCss.css";

function MyContactPageCss() {

const [name, setName] = useState("");

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

const [subject, setSubject] = useState("");

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

function handleSubmit(event) {

event.preventDefault();

// Send the form data to the server or do something else with it

}

return (

<h1>Contact Us</h1>

<p>Feel free to get in touch with us if you have any questions or feedback.</p>

</div>

<h2>Contact Information</h2>

<ul>

<li>

<strong>Address:</strong> 123 Main St, Anytown, USA

</li>

<li>

<strong>Phone:</strong> (123) 456-7890

</li>

<li>

<strong>Email:</strong> info@yourbusiness.com

</li>

</ul>

</div>

<h2>Send us a message</h2>

<InputText id="name" value={name} onChange={(e) => setName(e.target.value)} />

</div>

<label htmlFor="email">Email: </label>

<InputText id="email" value={email} onChange={(e) => setEmail(e.target.value)} />

</div>

<label htmlFor="subject">Subject: </label>

<InputText id="subject" value={subject} onChange={(e) => setSubject(e.target.value)} />

</div>

<label htmlFor="message">Message: </label>

<InputTextarea id="message" value={message} onChange={(e) => setMessage(e.target.value)} rows={5} />

</div>

</form>

</div>

);

}

export default MyContactPageCss;

MyContactPageCss.css

.contacts-page {

display: flex;

flex-direction: column;

align-items: center;

margin-top: 3rem;

}

.header {

text-align: center;

margin-bottom: 2rem;

}

.contact-info {

text-align: center;

margin-bottom: 2rem;

}

.contact-form {

width: 50%;

}