Skip to content

Instantly share code, notes, and snippets.

@tonyspiro
Last active Sep 10, 2018
Embed
What would you like to do?
import React from 'react'
import Router from 'next/router'
import bucket from '../config'
import Page from '../components/page'
import PageNotFound from '../components/404'
import Header from '../components/header'
import Footer from '../components/footer'
import Nav from '../components/nav'
class DefaultPage extends React.Component {
static async getInitialProps({ req, query }) {
let slug = query.slug
if (!slug)
slug = 'home'
let page
try {
const res = await bucket.getObject({ slug })
page = res.object
} catch(e) {
page = {
title: 'Page not found',
component: '404'
}
}
return { page }
}
handleSubmit(e) {
e.preventDefault()
const email = e.target.email.value
const first_name = e.target.first_name.value
const last_name = e.target.last_name.value
var url = 'https://your-cosmic-function-endpoint-here.lambda.aws.com' // ADD YOUR ENDPOINT HERE
var data = {
to: 'your_email@gmail.com', // EDIT THIS TO YOUR EMAIL
from: email,
subject: `Contact form submission: ${first_name} ${last_name}`,
text_body: `Contact form submission: ${first_name} ${last_name}`,
html_body: `Contact form submission: <br /><b>${first_name} ${last_name}</b><br />${email}`
}
fetch(url, {
method: 'POST',
body: JSON.stringify(data),
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));
}
render() {
return (
<div>
<Header page={ this.props.page }/>
<div className="main">
{this.props.page.component && this.props.page.component==='404' ? (
<PageNotFound />
) : (
<Page page={this.props.page} />
)}
<Nav />
<form onSubmit={this.handleSubmit}>
<div>
<input type="email" name="email" placeholder="Email"/>
</div>
<div>
<input type="text" name="first_name" placeholder="First Name"/>
</div>
<div>
<input type="text" name="last_name" placeholder="Last Name"/>
</div>
<div>
<button type="submit">Send Email</button>
</div>
</form>
</div>
<Footer />
</div>
);
}
}
export default DefaultPage
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment