Added the contact form page and updated the form.
This commit is contained in:
Batuhan Berk Başoğlu
parent
52b135036d
commit
d5d003444e
13 changed files with 366 additions and 176 deletions
|
|
@ -41,16 +41,6 @@
|
|||
height: 800px;
|
||||
}
|
||||
|
||||
.heading-1{
|
||||
padding-left: 40%;
|
||||
padding-top: 10%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.formhelper{
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.button-1 {
|
||||
background-color: rgb(0, 0, 0);
|
||||
border-color: transparent;
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import "./Homepage.css";
|
|||
import house1 from "../images/house1.jpg";
|
||||
import house2 from "../images/house2.jpg";
|
||||
import house3 from "../images/house3.jpg";
|
||||
import house4 from "../images/house4.jpg";
|
||||
import Carousel from "react-bootstrap/Carousel";
|
||||
import Button from "react-bootstrap/Button";
|
||||
import axios from 'axios'
|
||||
|
||||
|
||||
|
||||
|
|
@ -13,10 +13,6 @@ class Homepage extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
email: "",
|
||||
message: "",
|
||||
nextIcon: <span className="next-icon"></span>,
|
||||
prevIcon: <span className="prev-icon"></span>,
|
||||
};
|
||||
|
|
@ -42,7 +38,8 @@ class Homepage extends Component {
|
|||
<Carousel.Item>
|
||||
<img className="headerImg" src={house1} alt="First House" />
|
||||
<Carousel.Caption>
|
||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>360 Michawashkode St, Ottawa, Ontario K4A 3N6</h3>
|
||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>100 Charlie Rogers, Kanata, ON K2V 1A7</h3>
|
||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">Click for Details</Button>
|
||||
</div>
|
||||
|
|
@ -51,7 +48,8 @@ class Homepage extends Component {
|
|||
<Carousel.Item>
|
||||
<img className="headerImg" src={house2} alt="Second House" />
|
||||
<Carousel.Caption>
|
||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>6865 PEBBLE TRAIL WAY, Ottawa, Ontario K4P 0B7</h3>
|
||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1490 Youville Drive, Orléans, ON K1C 2X8</h3>
|
||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">Click for Details</Button>
|
||||
</div>
|
||||
|
|
@ -60,7 +58,18 @@ class Homepage extends Component {
|
|||
<Carousel.Item>
|
||||
<img className="headerImg" src={house3} alt="Third House" />
|
||||
<Carousel.Caption>
|
||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>5284 Knott Crescent, Ottawa, Ontario K4M 0A2</h3>
|
||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>8720 Russell Road, Navan, ON K4B 1J1</h3>
|
||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">Click for Details</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
<Carousel.Item>
|
||||
<img className="headerImg" src={house4} alt="Fourth House" />
|
||||
<Carousel.Caption>
|
||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>2785 8th Line Road, Metcalfe, ON K0A 2P0</h3>
|
||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">Click for Details</Button>
|
||||
</div>
|
||||
|
|
@ -69,102 +78,9 @@ class Homepage extends Component {
|
|||
</Carousel>
|
||||
</div>
|
||||
</section>
|
||||
<section class="colored-section" id="contact">
|
||||
<div className="container-fluid">
|
||||
<div className="contactIntro">
|
||||
<h2 className="heading-1">Contact Us</h2>
|
||||
<form
|
||||
id="contact-form"
|
||||
onSubmit={this.handleSubmit.bind(this)}
|
||||
method="POST"
|
||||
>
|
||||
<div className="formhelper row">
|
||||
<div className="col-6">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="First Name"
|
||||
value={this.state.firstname}
|
||||
onChange={this.onFirstNameChange.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Last Name"
|
||||
value={this.state.lastname}
|
||||
onChange={this.onLastNameChange.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="email"
|
||||
className="form-control"
|
||||
placeholder="Email Address"
|
||||
aria-describedby="emailHelp"
|
||||
value={this.state.email}
|
||||
onChange={this.onEmailChange.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<textarea
|
||||
className="form-control"
|
||||
placeholder="Message"
|
||||
rows="5"
|
||||
value={this.state.message}
|
||||
onChange={this.onMessageChange.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
<div className="buttonhelper">
|
||||
<button type="submit" className="button-1">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
onFirstNameChange(event) {
|
||||
this.setState({ firstname: event.target.value });
|
||||
}
|
||||
|
||||
onLastNameChange(event) {
|
||||
this.setState({ lastname: event.target.value });
|
||||
}
|
||||
|
||||
onEmailChange(event) {
|
||||
this.setState({ email: event.target.value });
|
||||
}
|
||||
|
||||
onMessageChange(event) {
|
||||
this.setState({ message: event.target.value });
|
||||
}
|
||||
|
||||
handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
axios({
|
||||
method: "POST",
|
||||
url: "http://localhost:3002/send",
|
||||
data: this.state
|
||||
}).then((response) => {
|
||||
if (response.data.status === 'success') {
|
||||
alert("Message Sent.");
|
||||
this.resetForm()
|
||||
} else if (response.data.status === 'fail') {
|
||||
alert("Message failed to send.")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
resetForm() {
|
||||
this.setState({ firstname: '', lastname: '', email: '', message: '' })
|
||||
}
|
||||
}
|
||||
|
||||
export default Homepage;
|
||||
|
|
|
|||
|
|
@ -1,59 +1 @@
|
|||
var express = require('express');
|
||||
var router = express.Router();
|
||||
var nodemailer = require('nodemailer');
|
||||
var cors = require('cors');
|
||||
const creds = require('./config');
|
||||
|
||||
var transport = {
|
||||
host: 'smtp.mailtrap.io', // Don’t forget to replace with the SMTP host of your provider
|
||||
port: 2525,
|
||||
auth: {
|
||||
user: creds.USER,
|
||||
pass: creds.PASS
|
||||
}
|
||||
}
|
||||
|
||||
var transporter = nodemailer.createTransport(transport)
|
||||
|
||||
transporter.verify((error, success) => {
|
||||
if (error) {
|
||||
console.log(error);
|
||||
} else {
|
||||
console.log('Server is ready to take messages');
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/send', (req, res, next) => {
|
||||
var firstname = req.body.firstname
|
||||
var lastname = req.body.lastname
|
||||
var email = req.body.email
|
||||
var message = req.body.message
|
||||
var content = `firstname: ${firstname} \n lastname: ${lastname} \n email: ${email} \n message: ${message} `
|
||||
|
||||
var mail = {
|
||||
from: email,
|
||||
to: 'kenes@cribs.com', // Change to email address that you want to receive messages on
|
||||
subject: 'New Message from Contact Form',
|
||||
text: content
|
||||
}
|
||||
|
||||
transporter.sendMail(mail, (err, data) => {
|
||||
if (err) {
|
||||
res.json({
|
||||
status: 'fail'
|
||||
})
|
||||
} else {
|
||||
res.json({
|
||||
status: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const app = express()
|
||||
app.use(cors())
|
||||
app.use(express.json())
|
||||
app.use('/', router)
|
||||
app.listen(3002)
|
||||
|
||||
export { default } from "./homePage";
|
||||
export { default } from "./homePage";
|
||||
Loading…
Add table
Add a link
Reference in a new issue