Initial Commit

Author: ghkobbs

api/processform.php

@@ -0,0 +1,40 @@
+<?php
+header("Access-Control-Allow-Origin: *");
+$rest_json = file_get_contents("php://input");
+
+if (empty($_POST['name']) && empty($_POST['phone']) && empty($_POST['email'])) die();
+
+if ($_POST)
+	{
+
+	// set response code - 200 OK
+
+	http_response_code(200);
+	$name = $_POST['name'];
+	$to = "kay@dispostable.com";
+	$from = $_POST['email'];
+
+	// data
+
+	$msg = $_POST['name'] . $_POST['phone'];
+
+	// Headers
+
+	$headers = "MIME-Version: 1.0\r\n";
+	$headers.= "Content-type: text/html; charset=UTF-8\r\n";
+	$headers.= "From: <" . $from . ">";
+	mail($to, $name, $msg, $headers);
+
+	// echo json_encode( $_POST );
+
+	echo json_encode(array(
+		"sent" => true
+	));
+	}
+  else
+	{
+	// tell the user about error
+	echo json_encode(["sent" => false, "message" => "Something went wrong"]);
+	}
+
+?>

src/App.css

@@ -28,6 +28,13 @@
   color: #61dafb;
 }
 
+input[type="text"], input[type="submit"], input[type="email"] {
+  padding: 10px 15px;
+}
+input[type="text"], input[type="email"] {
+  width: 300px;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

src/App.js

@@ -1,26 +1,50 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+
+class App extends React.Component {
+
+  SubmitForm(event) {
+    event.preventDefault();
+
+    var myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
+
+    var urlencoded = new URLSearchParams();
+    urlencoded.append("name", this.name.value);
+    urlencoded.append("phone", this.phone.value);
+    urlencoded.append("email", this.email.value);
+
+    var requestOptions = {
+      method: 'POST',
+      headers: myHeaders,
+      body: urlencoded,
+      redirect: 'follow'
+    };
+
+    // * Always make sure your php file is located inside an apache server
+    // ? You can decide to put the whole project folder inside an apache server.
+
+    fetch("http://localhost/my-app/api/processform.php", requestOptions)
+      .then(response => response.text())
+      .then(result => console.log(result))
+      .catch(error => console.log('error', error));
+  }
+
+
+  render(){
+    return (
+      <div className="App">
+        <form onSubmit={(e) => this.SubmitForm(e) } >
+          <h2>Message US</h2>
+          <input type="text" placeholder="Name" ref={(input) => {this.name = input}} /><br />
+          <input type="text" placeholder="Phone" ref={(input) => {this.phone = input}} /><br />
+          <input type="email" placeholder="Email" ref={(input) => {this.email = input}} /><br />
+          <input type="submit" value="Send Message" />
+        </form>
+      </div>
+    )
+  }
 }
 
 export default App;