Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Contactus #327

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Contactus #327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
58e617f
Merge pull request #1 from Feminine-Divine/master
akshay1027 Apr 5, 2021
f0942a2
Merge pull request #2 from Feminine-Divine/master
akshay1027 Apr 19, 2021
ea44754
Merge pull request #3 from Feminine-Divine/master
akshay1027 Apr 23, 2021
40aa424
Merge branch 'Feminine-Divine:master' into master
akshay1027 May 19, 2021
65e1d16
adding email js functionality
akshay1027 May 19, 2021
ea3d1bf
updated ,env file with credentials
akshay1027 May 19, 2021
5fa9a44
updated contact form to new styles!
akshay1027 May 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion periodo/.env
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,8 @@ AUTH0_SECRET=gGzsvHhi1HDG7zZUGFhCIWrfPmYacVyNI4TWg9ZAZ9jL5PNOMDXuaFpVUJLoEB3J
AUTH0_CLIENT_ID=GKFjHGfVijotp6ebmHMPxZGUXORKsy3G
COOKIE_SECRET=gGzsvHhi1HDG7zZUGFhCIWrfPmYacVyNI4TWg9ZAZ9jL5PNOMDXuaFpVUJLoEB3J
REACT_APP_SECRET="akldhwcfnasjdbkbfeabnjkvdbavbdjbskeubvjdkudnvdkjuhd"
REACT_APP_USERBASE_URL="https://dev-jepc3b7g.us.auth0.com"
REACT_APP_USERBASE_URL="https://dev-jepc3b7g.us.auth0.com"
COOKIE_SECRET=gGzsvHhi1HDG7zZUGFhCIWrfPmYacVyNI4TWg9ZAZ9jL5PNOMDXuaFpVUJLoEB3J
NEXT_PUBLIC_CONTACT_FORM_SERVICE_ID=service_rihc5vc
NEXT_PUBLIC_CONTACT_FORM_TEMPLATE_ID=template_lak44qq
NEXT_PUBLIC_CONTACT_FORM_USER_ID=user_qEcuUm8SHNEx9IFbSv8c4
207 changes: 88 additions & 119 deletions periodo/components/Footer/ContactUs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,119 +1,88 @@
import React from "react";
import { TextField, Button, Container } from "@material-ui/core";
import { Card, CardHeader, CardContent } from "@material-ui/core";
import EmailIcon from "@material-ui/icons/Email";
import InputAdornment from "@material-ui/core/InputAdornment";
import PersonIcon from "@material-ui/icons/Person";
import { TextareaAutosize } from "@material-ui/core";
import { Paper, Grid } from "@material-ui/core";
import { Row, Col } from "reactstrap";

function ContactUs() {
return (
<Paper
style={{ alignItems: "center",isolation: 'isolate', margin: "0 19%", background: "#960435" }}
>
<Card style={{ backgroundColor: "#960435", color: "white" }}>
<CardHeader title="Talk with us (beta)" />
</Card>
<CardContent>
<form>
<Grid container spacing={2} lg={12}>
<Grid item md={12} sm={12} xs={12} lg={12}>
<TextField
margin="dense"
variant="filled"
name="Name"
label="Name"
color="secondary"
autoComplete="off"
style={{ width: "100%", background: "#fad2e3" }}
type="text"
required
InputProps={{
endAdornment: (
<InputAdornment position="end">
<PersonIcon />
</InputAdornment>
),
}}
/>
</Grid>
<Grid
style={{ alignItems: "center" }}
item
md={12}
sm={12}
xs={12}
lg={12}
>
<TextField
margin="dense"
label="Email"
variant="filled"
color="secondary"
name="email"
type="email"
autoComplete="off"
required
style={{ width: "100%", background: "#fad2e3" }}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<EmailIcon />
</InputAdornment>
),
}}
/>
</Grid>
<Grid
style={{ alignItems: "center" }}
item
md={12}
sm={12}
xs={12}
lg={12}
>
<TextareaAutosize
rowsMax={4}
aria-label="maximum height"
placeholder="Message"
style={{
width: "100%",
background: "#e9b8cc",
maxHeight: "90px",
minHeight: "90px",
overflowY: "scroll",
fontSize: "17px",
outline: "none",
padding: "10px",
marginTop: "10px",
}}
/>
</Grid>
<br />
<br />
<Container>
<Row>
<Col>
<Button
type="submit"
variant="contained"
color="secondary"
style={{
background: "black",
margin: "10px 0px 0px -10px",
}}
>
Submit
</Button>
</Col>
</Row>
</Container>
</Grid>
</form>
</CardContent>
</Paper>
);
}
export default ContactUs;
import emailjs from "emailjs-com";
import React from "react";
import { TextField, Button, Container } from "@material-ui/core";
import { Card, CardHeader, CardContent } from "@material-ui/core";
import EmailIcon from "@material-ui/icons/Email";
import InputAdornment from "@material-ui/core/InputAdornment";
import PersonIcon from "@material-ui/icons/Person";
import { TextareaAutosize } from "@material-ui/core";
import { Paper, Grid } from "@material-ui/core";
import { Row, Col } from "reactstrap";
import styles from "./ContactUs.module.css";
import 'font-awesome/css/font-awesome.min.css';


export default function ContactUs() {

function sendEmail(e) {
e.preventDefault();

// NOTE: make sure to make your own setup and also make .env configurations!

emailjs.sendForm(
process.env.NEXT_PUBLIC_CONTACT_FORM_SERVICE_ID,
process.env.NEXT_PUBLIC_CONTACT_FORM_TEMPLATE_ID,
e.target,
process.env.NEXT_PUBLIC_CONTACT_FORM_USER_ID
)
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
e.target.reset()
}

return (
<div className={styles.contactus_body}>
<div className={styles.form_wrapper}>
<div className={styles.form_container}>
<div className={styles.title_container}>
<h2>Talk to us <span id={styles.touch}>Beta</span></h2>
<h3>Contact us</h3>
</div>
<form onSubmit={sendEmail}>
<div className={styles.row_clearfix}>
<div className={styles.col_half}>
<label className={styles.input_label}>First name</label>
<div className={styles.input_field}> <span><i aria-hidden="true" className="fa fa-user"></i></span>
<input className={styles.inputN} type="text" name="first_name" placeholder="John" required />
</div>
</div>
<div className={styles.col_half}>
<label className={styles.input_label}>Last name</label>
<div className={styles.input_field}> <span><i aria-hidden="true" class="fa fa-user"></i></span>
<input className={styles.inputN} type="text" name="last_name" placeholder="Doe" />
</div>
</div>
</div>
<div className={styles.row_clearfix}>
<div className={styles.col_half}>
<label className={styles.input_label}>Email</label>
<div className={styles.input_field}> <span><i aria-hidden="true" class="fa fa-envelope"></i></span>
<input className={styles.inputN} type="email" name="email" placeholder="[email protected]" required />
</div>
</div>
<div className={styles.col_half}>
<label className={styles.input_label}>Phone</label>
<div className={styles.input_field}> <span><i aria-hidden="true" class="fa fa-phone"></i></span>
<input className={styles.inputN} type="tel" name="phone" placeholder="Phone no" pattern="[0-9]{10}" />
</div>
</div>
</div>
<div className={styles.row_clearfix}>
<div>
<label className={styles.input_label}>Comments</label>
<div className={styles.textarea_field}> <span><i aria-hidden="true" class="fa fa-comment"></i></span>
<input type="text" className={styles.inputtextarea} name="comments" />
</div>
</div>
</div>
<input className={styles.inputN} type="submit" value="Submit" />
</form>
</div>
</div>
</div>
);
}
export default ContactUs;