Skip to content

Commit f0f61a4

Browse files
mathcodesmathcodes
committed
working and styled form
1 parent 854fe6e commit f0f61a4

File tree

11 files changed

+305
-126
lines changed

11 files changed

+305
-126
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@testing-library/jest-dom": "^5.11.4",
1717
"@testing-library/react": "^11.1.0",
1818
"@testing-library/user-event": "^12.1.10",
19+
"aos": "^2.3.4",
1920
"axios": "^0.21.1",
2021
"caniuse-lite": "^1.0.30001364",
2122
"dotenv": "^16.0.3",
@@ -30,6 +31,7 @@
3031
"react-fast-marquee": "^1.2.1",
3132
"react-helmet": "^6.1.0",
3233
"react-icons": "^4.2.0",
34+
"react-material-ui-form-validator": "^3.0.1",
3335
"react-pdf": "^5.7.2",
3436
"react-reveal": "^1.2.2",
3537
"react-router-dom": "^5.2.0",

‎src/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { ThemeSwitcher } from './contexts/ThemeSwitcher';
55
import { Main, ProjectPage, ThankYou, FormPage } from './pages';
66
import { BackToTop } from './components';
77
import ScrollToTop from './utils/ScrollToTop';
8-
import * as dotenv from 'dotenv' // see https://github.com/motdotla/dotenv#how-do-i-use-dotenv-with-import
8+
import * as dotenv from 'dotenv'
99
// import express from 'express'
1010
import './App.css'
1111
import { FormspreeProvider } from '@formspree/react';

‎src/components/Navbar/Navbar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ function Navbar() {
229229

230230
<Fade left>
231231
<NavLink
232-
to='/esume'
232+
to='/Resume'
233233
smooth={true}
234234
spy='true'
235235
duration={2000}

‎src/components/Projects/Projects.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
.project--desc:hover,
5858
.project--lang:hover {
5959
z-index: 100;
60-
background-color: #417f88;
60+
background-color: yellow;
6161

6262
}
6363

‎src/components/Services/Services.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ function Services() {
1414
{servicesData.length > 0 && (
1515
<div className="services" id="services" style={{ backgroundColor: theme.secondary }}>
1616

17-
{/* SHOPIFY PDF BUTTON ADN FREE OFFER CTA */}
17+
1818

1919
<div className="services-header">
2020
<h1 style={{ color: theme.secondary70 }}>Services</h1>

‎src/pages/FormPage/DropDown.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React, { useState } from "react";
2+
import "./FormPage.css";
3+
import InputLabel from "@material-ui/core/InputLabel";
4+
import MenuItem from "@material-ui/core/MenuItem";
5+
import FormControl from "@material-ui/core/FormControl";
6+
import Select from "@material-ui/core/Select";
7+
import { SelectValidator } from "react-material-ui-form-validator";
8+
9+
export default function Dropdown(props) {
10+
const { options } = props;
11+
console.log("options : ", options);
12+
const [stateName, setStateName] = useState("");
13+
14+
// const handleChange = (e) => {
15+
// setStateName({[e.target.name]: e.target.value});
16+
// };
17+
18+
return (
19+
// <FormControl
20+
// variant="outlined"
21+
// // className={classes.formControl}
22+
// // error={!state ? true : false}
23+
// >
24+
// <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
25+
// <Select
26+
// labelId="demo-simple-select-outlined-label"
27+
// id="demo-simple-select-outlined"
28+
// // value={formData.state}
29+
// onChange={handleChange}
30+
// label="State"
31+
// >
32+
// {options.map((item) => (
33+
// <MenuItem value={item}>{item}</MenuItem>
34+
// ))}
35+
// </Select>
36+
// </FormControl>
37+
<SelectValidator
38+
name="bank"
39+
id="banks"
40+
variant="outlined"
41+
onChange={(e) => setStateName({ [e.target.name]: e.target.value })}
42+
// onChange={handleChange}
43+
// value={formData.state}
44+
// SelectProps={{
45+
// native: true
46+
// }}
47+
validators={["required"]}
48+
errorMessages={["required"]}
49+
>
50+
{options.map((item) => (
51+
<option value={item}>{item}</option>
52+
))}
53+
{/* <option value="">select me</option>
54+
<option value="-1">Bancos</option>
55+
<option value="-1">ghh</option> */}
56+
{/* {this.getBanks()} */}
57+
</SelectValidator>
58+
);
59+
}

‎src/pages/FormPage/FormPage.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
.formComp{
2+
box-sizing: border-box;
3+
padding: 0 0rem;
4+
flex: initial;
5+
height: 70%;
6+
width: 100%;
7+
background: var(--primary);
8+
align-items: center;
9+
justify-content: center;
10+
padding: 0 2rem;
11+
color: white;
12+
margin-bottom:40%;
13+
}
14+
.form-container{
15+
display: flex;
16+
flex-direction: column;
17+
padding: 0 20%;
18+
justify-content: center;
19+
height: 100%;
20+
width:100%;
21+
position: relative;
22+
}
23+
24+
.formHeader{
25+
display: flex;
26+
27+
text-align: left;
28+
color:#eaeaea
29+
}
30+
.formButton{
31+
width: 50%;
32+
margin: auto;
33+
padding: 0 5rem;
34+
}
35+
36+
.formDiv{
37+
/* width: 100%; */
38+
margin: auto;
39+
}
40+
41+
.inputForm{
42+
background: #eaeaea;
43+
color: black;
44+
}
45+
46+
.App {
47+
font-family: sans-serif;
48+
text-align: center;
49+
}
50+
.formElement {
51+
width: 30%;
52+
display: inline-flex;
53+
background: #eaeaea;
54+
}
55+
56+
.imgForm{
57+
display: flex;
58+
justify-content: center;
59+
width: 10%;
60+
margin: 1rem;
61+
}
62+
63+
.MuiInputBase-input {
64+
margin: 3rem 3rem;
65+
}

‎src/pages/FormPage/FormPage.js‎

Lines changed: 82 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,131 +1,95 @@
1-
import * as React from 'react';
2-
import Avatar from '@mui/material/Avatar';
3-
import Button from '@mui/material/Button';
4-
import CssBaseline from '@mui/material/CssBaseline';
5-
import TextField from '@mui/material/TextField';
6-
import FormControlLabel from '@mui/material/FormControlLabel';
7-
import Checkbox from '@mui/material/Checkbox';
8-
import Link from '@mui/material/Link';
9-
import Grid from '@mui/material/Grid';
10-
import Box from '@mui/material/Box';
11-
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
12-
import Typography from '@mui/material/Typography';
13-
import Container from '@mui/material/Container';
14-
import { createTheme, ThemeProvider } from '@mui/material/styles';
1+
import React from "react";
2+
import { styled } from '@mui/material/styles';
3+
import Paper from '@mui/material/Paper';
4+
import { useForm, ValidationError } from "@formspree/react";
5+
import { Container, Grid } from '@mui/material';
6+
import ThanksBar from './ThanksBar';
157

16-
function Copyright(props) {
17-
return (
18-
<Typography variant="body2" color="text.secondary" align="center" {...props}>
19-
{'Copyright © '}
20-
<Link color="inherit" href="https://mui.com/">
21-
Your Website
22-
</Link>{' '}
23-
{new Date().getFullYear()}
24-
{'.'}
25-
</Typography>
26-
);
27-
}
8+
function ContactForm() {
9+
const [state, handleSubmit] = useForm("xaykzqea");
10+
if (state.succeeded) {
11+
return <p>Thanks for joining!</p>;
12+
}
2813

29-
const theme = createTheme();
30-
31-
export default function FormPage() {
32-
const handleSubmit = (event) => {
33-
event.preventDefault();
34-
const data = new FormData(event.currentTarget);
35-
console.log({
36-
email: data.get('email'),
37-
password: data.get('password'),
38-
});
39-
};
14+
const Item = styled(Paper)(({ theme }) => ({
15+
backgroundColor: theme.palette.mode === 'dark' ? '#2d3334' : '#fff',
16+
...theme.typography.body2,
17+
padding: theme.spacing(1),
18+
textAlign: 'center',
19+
color: theme.palette.text.secondary,
20+
}));
4021

4122
return (
42-
<ThemeProvider theme={theme}>
43-
<Container component="main" maxWidth="xs">
44-
<CssBaseline />
45-
<Box
46-
sx={{
47-
marginTop: 8,
48-
display: 'flex',
49-
flexDirection: 'column',
50-
alignItems: 'center',
51-
}}
52-
>
53-
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
54-
<LockOutlinedIcon />
55-
</Avatar>
56-
<Typography component="h1" variant="h5">
57-
Sign up
58-
</Typography>
59-
<Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
23+
<>
24+
<ThanksBar />
25+
<form className="mx-auto w-full pt-10 sm:w-3/4" onSubmit={handleSubmit}>
26+
<div className="flex flex-col md:flex-row">
27+
<Container maxWidth="sm">
6028
<Grid container spacing={2}>
61-
<Grid item xs={12} sm={6}>
62-
<TextField
63-
autoComplete="given-name"
64-
name="firstName"
65-
required
66-
fullWidth
67-
id="firstName"
68-
label="First Name"
69-
autoFocus
70-
/>
71-
</Grid>
72-
<Grid item xs={12} sm={6}>
73-
<TextField
74-
required
75-
fullWidth
76-
id="lastName"
77-
label="Last Name"
78-
name="lastName"
79-
autoComplete="family-name"
80-
/>
29+
<Grid item xs={6} md={8}>
30+
<Item>
31+
<input
32+
data-aos="fade-right"
33+
data-aos-duration="1000"
34+
className="mr-3 w-full rounded border px-4 py-3 font-body text-black md:w-1/2 lg:mr-5"
35+
placeholder="Name"
36+
type="text"
37+
id="name"
38+
name="name"
39+
/>
40+
</Item>
8141
</Grid>
82-
<Grid item xs={12}>
83-
<TextField
84-
required
85-
fullWidth
86-
id="email"
87-
label="Email Address"
88-
name="email"
89-
autoComplete="email"
90-
/>
42+
<Grid item xs={6} md={4}>
43+
<Item>
44+
<input
45+
data-aos="fade-left"
46+
data-aos-duration="1000"
47+
className="mt-6 w-full rounded border px-4 py-3 font-body text-black md:mt-0 md:ml-3 md:w-1/2 lg:ml-5"
48+
placeholder="Email"
49+
type="email"
50+
id="email"
51+
name="email"
52+
/>
53+
<ValidationError prefix="Email" field="email" errors={state.errors} />
54+
55+
</Item>
9156
</Grid>
9257
<Grid item xs={12}>
93-
<TextField
94-
required
95-
fullWidth
96-
name="password"
97-
label="Password"
98-
type="password"
99-
id="password"
100-
autoComplete="new-password"
101-
/>
58+
<Item>
59+
<textarea
60+
data-aos="fade-up"
61+
data-aos-duration="1000"
62+
className="mt-6 w-full rounded border px-4 py-3 font-body text-black md:mt-8"
63+
placeholder="Message"
64+
id="message"
65+
cols="30"
66+
rows="10"
67+
name="message"
68+
></textarea>
69+
<ValidationError prefix="Message" field="message" errors={state.errors} />
70+
71+
</Item>
10272
</Grid>
10373
<Grid item xs={12}>
104-
<FormControlLabel
105-
control={<Checkbox value="allowExtraEmails" color="primary" />}
106-
label="I want to receive inspiration, marketing promotions and updates via email."
107-
/>
108-
</Grid>
109-
</Grid>
110-
<Button
111-
type="submit"
112-
fullWidth
113-
variant="contained"
114-
sx={{ mt: 3, mb: 2 }}
115-
>
116-
Sign Up
117-
</Button>
118-
<Grid container justifyContent="flex-end">
119-
<Grid item>
120-
<Link href="#" variant="body2">
121-
Already have an account? Sign in
122-
</Link>
74+
<Item>
75+
<button
76+
data-aos="fade-down"
77+
data-aos-duration="1000"
78+
type="submit"
79+
disabled={state.submitting}
80+
className="mt-6 flex items-center justify-center rounded bg-primary px-8 py-3 font-header text-lg font-bold uppercase text-white hover:bg-grey-20"
81+
>
82+
Send
83+
<i className="bx bx-chevron-right relative -right-2 text-3xl"></i>
84+
</button>
85+
</Item>
12386
</Grid>
12487
</Grid>
125-
</Box>
126-
</Box>
127-
<Copyright sx={{ mt: 5 }} />
128-
</Container>
129-
</ThemeProvider>
88+
</Container>
89+
</div>
90+
</form>
91+
</>
13092
);
131-
}
93+
}
94+
95+
export default ContactForm;

0 commit comments

Comments
 (0)