├── .prettierignore ├── src ├── images │ ├── gatsby-icon.png │ └── gatsby-astronaut.png ├── pages │ ├── 404.js │ ├── index.js │ └── page-2.js └── components │ ├── header.js │ ├── image.js │ ├── layout.js │ ├── seo.js │ ├── form-A.js │ ├── form-B.js │ └── layout.css ├── .prettierrc ├── gatsby-node.js ├── gatsby-browser.js ├── gatsby-ssr.js ├── static └── api │ └── contact │ ├── config.php │ ├── index.php │ └── classes │ └── sendmail.php ├── gatsby-config.js ├── LICENSE ├── .gitignore ├── package.json └── README.md /.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /src/images/gatsby-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frankagathos/gatsby-with-php-form/HEAD/src/images/gatsby-icon.png -------------------------------------------------------------------------------- /src/images/gatsby-astronaut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frankagathos/gatsby-with-php-form/HEAD/src/images/gatsby-astronaut.png -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": false, 4 | "singleQuote": false, 5 | "tabWidth": 2, 6 | "trailingComma": "es5" 7 | } 8 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's Node APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/node-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's Browser APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/browser-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's SSR (Server Side Rendering) APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/ssr-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /static/api/contact/config.php: -------------------------------------------------------------------------------- 1 | ( 7 | 8 | 9 |

NOT FOUND

10 |

You just hit a route that doesn't exist... the sadness.

11 | 12 | ) 13 | 14 | export default NotFoundPage 15 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | import Layout from "../components/layout" 4 | import SEO from "../components/seo" 5 | import Form from '../components/form-A'; 6 | 7 | 8 | const IndexPage = () => ( 9 | 10 | 11 |
12 | Contact form B 13 | 14 | ) 15 | 16 | export default IndexPage 17 | -------------------------------------------------------------------------------- /src/components/header.js: -------------------------------------------------------------------------------- 1 | import { Link } from "gatsby" 2 | import PropTypes from "prop-types" 3 | import React from "react" 4 | 5 | const Header = ({ siteTitle }) => ( 6 |
12 |
19 |

20 | 27 | {siteTitle} 28 | 29 |

30 |
31 |
32 | ) 33 | 34 | Header.propTypes = { 35 | siteTitle: PropTypes.string, 36 | } 37 | 38 | Header.defaultProps = { 39 | siteTitle: ``, 40 | } 41 | 42 | export default Header 43 | -------------------------------------------------------------------------------- /static/api/contact/index.php: -------------------------------------------------------------------------------- 1 | false, 14 | "message" => $SendMailEmptyerrorMessage 15 | ] 16 | ); 17 | exit(); 18 | } 19 | 20 | if ($_POST){ 21 | //@important: Please change this before using 22 | http_response_code(200); 23 | $subject = 'Contact from: ' . $_POST['firstName']; 24 | $from = $_POST['email']; 25 | $message = $_POST['msg']; 26 | //Actual sending email 27 | $sendEmail = new Sender($adminEmail, $from, $subject, $message); 28 | $sendEmail->send(); 29 | } else { 30 | // tell the user about error 31 | echo json_encode( 32 | [ 33 | "sent" => false, 34 | "message" => $SendMailFailederrorMessage 35 | ] 36 | ); 37 | } -------------------------------------------------------------------------------- /src/components/image.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { useStaticQuery, graphql } from "gatsby" 3 | import Img from "gatsby-image" 4 | 5 | /* 6 | * This component is built using `gatsby-image` to automatically serve optimized 7 | * images with lazy loading and reduced file sizes. The image is loaded using a 8 | * `useStaticQuery`, which allows us to load the image from directly within this 9 | * component, rather than having to pass the image data down from pages. 10 | * 11 | * For more information, see the docs: 12 | * - `gatsby-image`: https://gatsby.dev/gatsby-image 13 | * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/ 14 | */ 15 | 16 | const Image = () => { 17 | const data = useStaticQuery(graphql` 18 | query { 19 | placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) { 20 | childImageSharp { 21 | fluid(maxWidth: 300) { 22 | ...GatsbyImageSharpFluid 23 | } 24 | } 25 | } 26 | } 27 | `) 28 | 29 | return 30 | } 31 | 32 | export default Image 33 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: `Gatsby Form with PHP`, 4 | description: `Gatsby examples to use with a LAMP stack server(PHP).`, 5 | author: `Frank Agathos (Frantzeskos Agathos)`, 6 | }, 7 | plugins: [ 8 | `gatsby-plugin-react-helmet`, 9 | { 10 | resolve: `gatsby-source-filesystem`, 11 | options: { 12 | name: `images`, 13 | path: `${__dirname}/src/images`, 14 | }, 15 | }, 16 | `gatsby-transformer-sharp`, 17 | `gatsby-plugin-sharp`, 18 | { 19 | resolve: `gatsby-plugin-manifest`, 20 | options: { 21 | name: `gatsby-starter-default`, 22 | short_name: `starter`, 23 | start_url: `/`, 24 | background_color: `#663399`, 25 | theme_color: `#663399`, 26 | display: `minimal-ui`, 27 | icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site. 28 | }, 29 | }, 30 | // this (optional) plugin enables Progressive Web App + Offline functionality 31 | // To learn more, visit: https://gatsby.dev/offline 32 | // `gatsby-plugin-offline`, 33 | ], 34 | } 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 gatsbyjs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variables file 55 | .env 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /src/pages/page-2.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | import Form from "../components/form-B" 4 | 5 | import Layout from "../components/layout" 6 | import SEO from "../components/seo" 7 | 8 | const config = { 9 | title: 'Contact Form B', 10 | successMessage: 'Thank you for contacting me.', 11 | errorMessage: 'Sorry we have some problems.', 12 | fields:{ 13 | firstName: '', 14 | lastName: '', 15 | email: '', 16 | msg: '' 17 | }, 18 | fieldsConfig: [ 19 | { id: 1, label: 'First Name', fieldName: 'firstName', type: 'text',placeholder:'Your First Name', isRequired: true , className:'first-name-field'}, 20 | { id: 2, label: 'Last Name', fieldName: 'lastName', type: 'text', placeholder: 'Your Last Name', isRequired: true , className:'last-name-field'}, 21 | { id: 3, label: 'Email', fieldName: 'email', type: 'email', placeholder: ' Your Email', isRequired: true , className:'email-field'}, 22 | { id: 4, label: 'Message', fieldName: 'msg', type: 'textarea',placeholder:'Write something.....', isRequired: true , className:'message-field'} 23 | ] 24 | } 25 | 26 | const SecondPage = () => ( 27 | 28 | 29 | 30 | 31 | 32 | Form-A 33 | 34 | ) 35 | 36 | export default SecondPage 37 | -------------------------------------------------------------------------------- /src/components/layout.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Layout component that queries for data 3 | * with Gatsby's useStaticQuery component 4 | * 5 | * See: https://www.gatsbyjs.org/docs/use-static-query/ 6 | */ 7 | 8 | import React from "react" 9 | import PropTypes from "prop-types" 10 | import { useStaticQuery, graphql } from "gatsby" 11 | 12 | import Header from "./header" 13 | import "./layout.css" 14 | 15 | const Layout = ({ children }) => { 16 | const data = useStaticQuery(graphql` 17 | query SiteTitleQuery { 18 | site { 19 | siteMetadata { 20 | title 21 | } 22 | } 23 | } 24 | `) 25 | 26 | return ( 27 | <> 28 |
29 |
37 |
{children}
38 |
39 |
40 |

41 |
42 | © {new Date().getFullYear()}, Created by 43 | {` `} 44 | Frank Agathos 45 |
46 |
47 | 48 | ) 49 | } 50 | 51 | Layout.propTypes = { 52 | children: PropTypes.node.isRequired, 53 | } 54 | 55 | export default Layout 56 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-default", 3 | "private": true, 4 | "description": "A simple starter to get up and developing quickly with Gatsby", 5 | "version": "0.1.0", 6 | "author": "Kyle Mathews ", 7 | "dependencies": { 8 | "gatsby": "^2.15.28", 9 | "gatsby-image": "^2.2.23", 10 | "gatsby-plugin-manifest": "^2.2.20", 11 | "gatsby-plugin-offline": "^3.0.11", 12 | "gatsby-plugin-react-helmet": "^3.1.10", 13 | "gatsby-plugin-sharp": "^2.2.27", 14 | "gatsby-source-filesystem": "^2.1.28", 15 | "gatsby-transformer-sharp": "^2.2.19", 16 | "prop-types": "^15.7.2", 17 | "react": "^16.10.0", 18 | "react-dom": "^16.10.0", 19 | "react-helmet": "^5.2.1" 20 | }, 21 | "devDependencies": { 22 | "prettier": "^1.18.2" 23 | }, 24 | "keywords": [ 25 | "gatsby" 26 | ], 27 | "license": "MIT", 28 | "scripts": { 29 | "build": "gatsby build", 30 | "develop": "gatsby develop", 31 | "format": "prettier --write \"**/*.{js,jsx,json,md}\"", 32 | "start": "npm run develop", 33 | "serve": "gatsby serve", 34 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \"" 35 | }, 36 | "repository": { 37 | "type": "git", 38 | "url": "https://github.com/gatsbyjs/gatsby-starter-default" 39 | }, 40 | "bugs": { 41 | "url": "https://github.com/gatsbyjs/gatsby/issues" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React/Gatsby - PHP form 2 | 3 | ## Intro 4 | 5 | This repo includes: 6 | 7 | 1. The client app with Gatsby using Gatsby default starter. Please note that the method we use here to send emails will apply to any static site generator builder framework(next.js, create react app etc.). 8 | 2. The back-end API using PHP to handle the requests from the client and send the emails. 9 | 10 | In order to send emails with PHP you will need a local web server on your computer with a solution like XAMPP. If you have a LAMP stack server then you can deploy directly on your server. Current examples use axios to send the request from the client but other methods can be used instead. 11 | 12 | ## Installation 13 | 14 | After you clone the repo use the console to cd to the project's root directory and run: 15 | 1. **npm install** - to install npm packages. 16 | 2. **npm start** - to start the development server. 17 | 18 | ## Quick start for Gatsby 19 | 20 | Use form-A or form-B example components and follow the steps below: 21 | 22 | 1. **Replace the email address in [config.php](https://github.com/frankagathos/gatsby-with-php-form/blob/master/static/api/contact/config.php) with your email**. 23 | 2. **Replace the domain in the [form-A component](https://github.com/frankagathos/gatsby-with-php-form/blob/master/src/components/form-A.js) to the domain of your website or localhost if you are in dev**. 24 | 3. Create a static Gatsby site build using **npm run build** or **gatsby build**. 25 | 4. **Deploy the generated Gatsby static app found in the public folder to the server.**. 26 | 27 | ## Quick start for any React application 28 | 29 | Use form-A or form-B example components and follow the steps below: 30 | 31 | 1. **Follow steps 1. and 2. from above**. 32 | 2. **Add the [form-A component](https://github.com/frankagathos/gatsby-with-php-form/blob/master/src/components/form-A.js) in your app**. 33 | 3. **Add the api folder in the same directory you deploy your app**. 34 | 35 | More examples with hooks and front-end and back-end validation soon to come! 36 | 37 | Star if you found this helpful and enjoy! -------------------------------------------------------------------------------- /src/components/seo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SEO component that queries for data with 3 | * Gatsby's useStaticQuery React hook 4 | * 5 | * See: https://www.gatsbyjs.org/docs/use-static-query/ 6 | */ 7 | 8 | import React from "react" 9 | import PropTypes from "prop-types" 10 | import Helmet from "react-helmet" 11 | import { useStaticQuery, graphql } from "gatsby" 12 | 13 | function SEO({ description, lang, meta, title }) { 14 | const { site } = useStaticQuery( 15 | graphql` 16 | query { 17 | site { 18 | siteMetadata { 19 | title 20 | description 21 | author 22 | } 23 | } 24 | } 25 | ` 26 | ) 27 | 28 | const metaDescription = description || site.siteMetadata.description 29 | 30 | return ( 31 | 72 | ) 73 | } 74 | 75 | SEO.defaultProps = { 76 | lang: `en`, 77 | meta: [], 78 | description: ``, 79 | } 80 | 81 | SEO.propTypes = { 82 | description: PropTypes.string, 83 | lang: PropTypes.string, 84 | meta: PropTypes.arrayOf(PropTypes.object), 85 | title: PropTypes.string.isRequired, 86 | } 87 | 88 | export default SEO 89 | -------------------------------------------------------------------------------- /static/api/contact/classes/sendmail.php: -------------------------------------------------------------------------------- 1 | sendTo = $sendTo; 18 | $this->sendFrom = ($sendFrom) ? $sendFrom : 'gatsbyPHP@page.com'; 19 | $this->subject = $subject; 20 | $this->message = $message; 21 | } 22 | 23 | public function setTo($email, $name) { 24 | return $this->sendTo = $email; 25 | } 26 | 27 | public function getTo() { 28 | return $this->sendTo; 29 | } 30 | 31 | public function setFrom($email, $name) { 32 | return $this->sendFrom = $email; 33 | } 34 | 35 | public function setSubject($subject) { 36 | return $this->subject = $subject; 37 | } 38 | 39 | public function getSubject() { 40 | return $this->subject; 41 | } 42 | 43 | public function setMessage($message) { 44 | $this->message = $message; 45 | return $this; 46 | } 47 | 48 | public function getMessage() { 49 | return $this->message; 50 | } 51 | 52 | public function setHeader() { 53 | $headers = 'From: '.$this->getFrom() . "\r\n" . 54 | 'Reply-To: '.$this->getFrom() . "\r\n" . 55 | 'X-Mailer: PHP/' . phpversion(); 56 | 57 | $this->headers = $headers; 58 | return $this; 59 | } 60 | 61 | public function getFrom() { 62 | return $this->sendFrom; 63 | } 64 | 65 | public function send() { 66 | $to = $this->sendTo; 67 | $from = $this->sendFrom; 68 | $subject = $this->subject; 69 | $message = $this->message; 70 | //$headers = $this->headers; 71 | $headers = 'From: '.$this->getFrom() . "\r\n" . 72 | 'Reply-To: '.$this->getFrom() . "\r\n" . 73 | 'X-Mailer: PHP/' . phpversion(); 74 | 75 | mail($to, $subject, $message, $headers); 76 | echo json_encode(array("sent" => true)); 77 | } 78 | } -------------------------------------------------------------------------------- /src/components/form-A.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import axios from "axios"; 3 | 4 | class Form extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | mailSent: false, 9 | error: null, 10 | 11 | }; 12 | } 13 | 14 | handleFormSubmit = e => { 15 | e.preventDefault(); 16 | axios({ 17 | method: "post", 18 | url: 'https://your-website-domain.com/api/contact/index.php', //change this to correct endpoint 19 | headers: { "content-type": "application/json" }, 20 | data: this.state 21 | }) 22 | .then(result => { 23 | if (result.data.sent) { 24 | this.setState({ 25 | mailSent: result.data.sent 26 | }); 27 | this.setState({ error: false }); 28 | } else { 29 | this.setState({ error: true }); 30 | } 31 | }) 32 | .catch(error => this.setState({ error: error.message })); 33 | }; 34 | 35 | //handle changing fields 36 | 37 | handleChange = (e, field) => { 38 | let value = e.target.value; 39 | let updateValue = {}; 40 | updateValue[field] = value; 41 | this.setState(updateValue); 42 | }; 43 | 44 | render() { 45 | 46 | return ( 47 |
48 |

Contact form-A

49 | 50 |
51 | 52 | {/* Name */} 53 | 54 | this.handleChange(e, 'firstName')} 59 | required 60 | /> 61 | 62 | 63 | this.handleChange(e, 'lastName')} 68 | required 69 | /> 70 | 71 | 72 | {/* Email */} 73 | 74 | this.handleChange(e, "email")} 79 | required 80 | /> 81 | 82 | 83 | this.handleFormSubmit(e)} value="Submit" /> 84 | 85 |
86 | 87 | {this.state.mailSent &&
success
} 88 | {this.state.error &&
Error
} 89 |
90 | 91 |
92 |
93 | ); 94 | } 95 | } 96 | 97 | export default Form; 98 | -------------------------------------------------------------------------------- /src/components/form-B.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import axios from "axios"; 4 | 5 | 6 | 7 | class Form extends React.Component { 8 | constructor(props) { 9 | super(props); 10 | this.state = { 11 | mailSent: false, 12 | error: null 13 | }; 14 | } 15 | 16 | 17 | handleFormSubmit = e => { 18 | e.preventDefault(); 19 | axios({ 20 | method: "post", 21 | url: 'https://your-website-domain.com/api/contact/index.php', //change this to correct endpoint 22 | headers: { "content-type": "application/json" }, 23 | data: this.state 24 | }) 25 | .then(result => { 26 | if (result.data.sent) { 27 | this.setState({ 28 | mailSent: result.data.sent 29 | }); 30 | this.setState({ error: false }); 31 | } else { 32 | this.setState({ error: true }); 33 | } 34 | }) 35 | .catch(error => this.setState({ error: error.message })); 36 | }; 37 | 38 | handleChange = (e, field) => { 39 | let value = e.target.value; 40 | let updateValue = {}; 41 | updateValue[field] = value; 42 | this.setState(updateValue); 43 | }; 44 | 45 | render() { 46 | const { title, successMessage, errorMessage, fieldsConfig } = this.props.config; 47 | return ( 48 |
49 |

{title}

50 |
51 |
52 | {fieldsConfig && 53 | fieldsConfig.map(field => { 54 | return ( 55 | 56 | {field.type !== "textarea" ? ( 57 | 58 | 59 | this.handleChange(e, field.fieldName)} 65 | /> 66 | 67 | ) : ( 68 | 69 | 70 |