From 2a6e539e19023371e2d21f5dc995f613244da031 Mon Sep 17 00:00:00 2001 From: Vaibhav Sharma Date: Sat, 9 Mar 2019 17:13:45 +0530 Subject: [PATCH] feat: Contact Form using Netlify --- LICENSE | 2 +- README.md | 1 + data/config.js | 2 +- .../preview-templates/ContactPagePreview.js | 4 - src/components/AboutPageTemplate/index.js | 2 +- src/components/Contact/index.js | 20 --- src/components/ContactPageTemplate/index.js | 152 +++++++++++++----- src/components/Footer/index.js | 1 + src/components/HomePageTemplate/index.js | 2 +- src/components/PricingPageTemplate/index.js | 2 +- src/pages/contact/index.md | 11 +- src/pages/contact/success/index.js | 15 ++ src/pages/tags/index.js | 2 +- src/templates/contact-page.js | 5 - 14 files changed, 135 insertions(+), 86 deletions(-) delete mode 100644 src/components/Contact/index.js create mode 100644 src/pages/contact/success/index.js diff --git a/LICENSE b/LICENSE index 6267bf1..6cf58a5 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2018 Vaibhav Sharma +Copyright (c) 2019 Vaibhav Sharma Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index ef5533f..bb841e5 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ It follows the [JAMstack architecture](https://jamstack.org) by using Git as a s * Disqus and Share Support * Elastic-Lunr Search (NEW) * Pagination (NEW) +* Contact Form (Netlify Forms) * Easy Configuration using `config.js` file ## Prerequisite diff --git a/data/config.js b/data/config.js index 0ae19a9..a3f7e47 100644 --- a/data/config.js +++ b/data/config.js @@ -13,7 +13,7 @@ module.exports = { userTwitter: 'vaibhaved', userLocation: 'Delhi NCR, India', userDescription: '', - copyright: 'Copyright © Gatsby Starter Business 2018. All Rights Reserved.', // Copyright string for the footer of the website and RSS feed. + copyright: 'Copyright © Gatsby Starter Business 2018-2019. All Rights Reserved.', // Copyright string for the footer of the website and RSS feed. themeColor: '#00d1b2', // Used for setting manifest and progress theme colors. backgroundColor: '#ffffff', // Used for setting manifest background color. } diff --git a/src/cms/preview-templates/ContactPagePreview.js b/src/cms/preview-templates/ContactPagePreview.js index f487c24..ec1187d 100644 --- a/src/cms/preview-templates/ContactPagePreview.js +++ b/src/cms/preview-templates/ContactPagePreview.js @@ -3,16 +3,12 @@ import PropTypes from 'prop-types' import ContactPageTemplate from '../../components/ContactPageTemplate' const ContactPagePreview = ({ entry, getAsset }) => { - const entryContacts = entry.getIn(['data', 'contacts']) - const contacts = entryContacts ? entryContacts.toJS() : [] - return ( ) } diff --git a/src/components/AboutPageTemplate/index.js b/src/components/AboutPageTemplate/index.js index a1b7f01..a7a28c1 100644 --- a/src/components/AboutPageTemplate/index.js +++ b/src/components/AboutPageTemplate/index.js @@ -7,7 +7,7 @@ const AboutPageTemplate = ({title, content, contentComponent}) => { return (
-
+
diff --git a/src/components/Contact/index.js b/src/components/Contact/index.js deleted file mode 100644 index 4aca0d6..0000000 --- a/src/components/Contact/index.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' - -const Contact = ({email, description}) => { - return ( -
-

{email}

-

{description}

-
- ) -} - -Contact.propTypes = { - email: PropTypes.string.isRequired, - description: PropTypes.string, -} - -export default Contact diff --git a/src/components/ContactPageTemplate/index.js b/src/components/ContactPageTemplate/index.js index b7afdd9..22b7a88 100644 --- a/src/components/ContactPageTemplate/index.js +++ b/src/components/ContactPageTemplate/index.js @@ -1,57 +1,127 @@ -import React from 'react' +import React, {Component} from 'react' +import { navigate } from 'gatsby-link' import Helmet from 'react-helmet' -import Contact from '../Contact' import PropTypes from 'prop-types' -const ContactPageTemplate = ({ - title, - subtitle, - meta_title, - meta_description, - contacts, -}) => { - return ( -
- - {meta_title} - - -
-
-
-
-
-
-

- {title} -

-

- {subtitle} -

+const encode = (data) => { + return Object.keys(data) + .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])) + .join('&') +} + +class ContactPageTemplate extends Component { + constructor (props) { + super(props) + this.state = { isValidated: false } + } + + handleChange = e => { + this.setState({ [e.target.name]: e.target.value }) + } + + handleSubmit = e => { + e.preventDefault() + const form = e.target + // eslint-disable-next-line + fetch('/?no-cache=1', { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: encode({ + 'form-name': form.getAttribute('name'), + ...this.state, + }), + }) + .then(() => navigate(form.getAttribute('action'))) + // eslint-disable-next-line + .catch(error => alert(error)) + } + + render () { + const {title, subtitle, meta_title, meta_description} = this.props + return ( +
+ + {meta_title} + + +
+
+
+
+
+
+

+ {title} +

+

+ {subtitle} +

+
-
-
-
-
- {contacts.map((contact, id) => - - )} -
-
-
- ) -} +
+
+
+
+ + +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+