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

Jump to bottom

Contact us form email.js #228

Closed
wants to merge 11 commits into from
Closed

Contact us form email.js #228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 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
b62f93a
emailjs setup
akshay1027 Apr 23, 2021
33a4533
emailjs form handling | form tag | added subject input field
akshay1027 Apr 23, 2021
b28a5a9
.env variables added
akshay1027 Apr 30, 2021
bc8207a
.env variables added
akshay1027 Apr 30, 2021
548f213
.env setup
akshay1027 Apr 30, 2021
68c5377
Merge branch 'master' into ContactUs-form-email.js
akshay1027 Apr 30, 2021
228e932
trying to resolve conflicts!
akshay1027 Apr 30, 2021
300eb0c
Update .env
khushishikhu May 15, 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
@@ -1,4 +1,8 @@
AUTH0_DOMAIN=dev-jepc3b7g.us.auth0.com
AUTH0_SECRET=gGzsvHhi1HDG7zZUGFhCIWrfPmYacVyNI4TWg9ZAZ9jL5PNOMDXuaFpVUJLoEB3J
AUTH0_CLIENT_ID=GKFjHGfVijotp6ebmHMPxZGUXORKsy3G
COOKIE_SECRET=gGzsvHhi1HDG7zZUGFhCIWrfPmYacVyNI4TWg9ZAZ9jL5PNOMDXuaFpVUJLoEB3J
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

208 changes: 114 additions & 94 deletions periodo/components/Footer/ContactUs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,109 +1,129 @@
import emailjs from "emailjs-com";
import React from 'react';
import {TextField, Button, Container} from '@material-ui/core';
import {TextField} 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 SubjectIcon from '@material-ui/icons/Subject';
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 () {
export default function ContactUs() {

return (

<Paper style={{alignItems:"center", margin:"0 19%", background:"#960435"}}>
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>
<Paper style={{alignItems:"center", margin:"0 19%", background:"#960435"}}>
<Card style={{backgroundColor: '#960435',
color: 'white'}}>
<CardHeader title="Talk with us (beta)"/>
</Card>
<CardContent>
<div >
<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"}}
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"
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}>
{/*<TextField
margin="dense"
label="Email"
variant="filled"
color="secondary"
name="email"
required
style={{width: '95%', background:"#fad2e3"}}
/> */}
<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
variant="contained"
color="secondary"
style={{background:"black", margin:"10px 0px 0px -10px"}}>
Submit
</Button>
</Col>
</Row>
</Container>
</Grid>
</div>
</CardContent>
</Paper>
) ;
};

export default ContactUs;
<form onSubmit={sendEmail}>
<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"}}
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"
autoComplete="off"
required
style={{width: '100%', background:"#fad2e3"}}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<EmailIcon />
</InputAdornment>
),
}}
/>
</Grid>
<Grid item md={12} sm={12} xs={12} lg={12}>
<TextField
margin="dense"
variant="filled"
name="subject"
label="subject"
color="secondary"
autoComplete="off"
style={{width:"100%", background:"#fad2e3"}}
required
InputProps={{
endAdornment: (
<InputAdornment position="end">
<SubjectIcon />
</InputAdornment>
),
}}
/>
</Grid>
<Grid style={{alignItems:"center"}} item md={12} sm={12} xs={12} lg={12}>
<TextareaAutosize
rowsMax={4}
aria-label="maximum height"
variant="filled"
name="message"
placeholder="Message"
style={{width: '100%',
background:"#e9b8cc",
maxHeight:"90px",
minHeight:"90px",
overflowY: "scroll",
fontSize:"17px",
outline: "none",
padding:"10px",
marginTop:"10px"
}}
/>
</Grid>
<div>
<input type="submit" value="Send Message"
style={{background:"black", color:"white", padding:"10px", border:"2px black solid", borderRadius:"10px", marginTop:"10px" }}>
</input>
</div>
</form>
</CardContent>
</Paper>
</div>
)
}
Loading