Skip to content

Commit a82b6c9

Browse files
malithmcrmalithmcr
authored
Merge pull request #8 from malithmcr/dev
Dev
2 parents b10d86f + 285f6d7 commit a82b6c9

File tree

15 files changed

+2573
-914
lines changed

15 files changed

+2573
-914
lines changed

‎.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
REACT_APP_API = http://localhost:80/react-contact-form/api/contact/index.php

‎README.md

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
1+
## Contact form React Component with PHP mail api.
2+
13
This is code for tutorial in my blog post [Create Contact form with react and php](https://blog.bitsrc.io/how-to-build-a-contact-form-with-react-js-and-php-d5977c17fec0).
4+
25
[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)
36

4-
## How to start
7+
## Usage of complete project.
8+
9+
Please clone this repo and in the project root directory, Please run:
10+
11+
### `npm install`
512

6-
In the project directory, you can run:
13+
please go to the root fo the project and run npm install to install all the nessery npm modules.
714

815
### `npm start`
916

@@ -14,14 +21,29 @@ The page will reload if you make edits.<br>
1421
You will also see any lint errors in the console.
1522

1623

17-
![Alt text](/screenshot.png?raw=true "Screenshot")
1824

25+
## Usage only the component
26+
27+
Please download 'src/components/Form/' folder.
28+
29+
You can use the form component like this `<Form config={config} />`
30+
31+
####props
32+
33+
`config - object`
1934

35+
Example of config prop
2036

2137
<div align="center">
22-
<a href="https://www.paypal.me/craftcode"><img alt="Header" src="https://cdn-images-1.medium.com/max/806/1*G95uyokAH4JC5Ppvx4LmoQ.png" width="40%"></a>
38+
<a href="https://www.paypal.me/craftcode"><img alt="Header" src="/config-obj.png?raw=true" width="70%"></a>
2339
</div>
2440

41+
42+
<div align="center">
43+
<a href="https://www.paypal.me/craftcode"><img alt="Header" src="/screenshot.png?raw=true" width="80%"></a>
44+
</div>
45+
46+
2547
## Contributors
2648

2749
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
@@ -32,4 +54,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
3254

3355
<!-- ALL-CONTRIBUTORS-LIST:END -->
3456

35-
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
57+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
58+
59+
60+
<div align="center">
61+
<a href="https://www.paypal.me/craftcode"><img alt="Header" src="https://cdn-images-1.medium.com/max/806/1*G95uyokAH4JC5Ppvx4LmoQ.png" width="20%"></a>
62+
</div>

‎api/contact/index.php

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,4 @@
2929
"message" => "Something went wrong"
3030
]
3131
);
32-
}
33-
?>
32+
}

‎config-obj.png

260 KB
Loading

‎package-lock.json

Lines changed: 2427 additions & 647 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"react": "^16.8.6",
7+
"react-dom": "^16.6.3"
8+
},
9+
"devDependencies": {
610
"axios": "^0.18.0",
7-
"react": "^16.6.3",
8-
"react-dom": "^16.6.3",
11+
"prop-types": "^15.7.2",
912
"react-scripts": "2.1.1"
1013
},
1114
"scripts": {

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
work correctly both with client-side routing and a non-root public URL.
2020
Learn how to configure a non-root public URL by running `npm run build`.
2121
-->
22-
<title>React App</title>
22+
<title>React PHP Contact form | Tutorial</title>
2323
</head>
2424
<body>
2525
<noscript>

‎src/App.js

Lines changed: 0 additions & 83 deletions
This file was deleted.

‎src/App.test.js

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎src/components/Form/index.js

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import axios from "axios";
4+
import "./styles.css";
5+
6+
/**
7+
* @component Form
8+
* @props
9+
*/
10+
class Form extends React.Component {
11+
constructor(props) {
12+
super(props);
13+
this.state = {
14+
fname: "",
15+
lname: "",
16+
email: "",
17+
message: "",
18+
mailSent: false,
19+
error: null
20+
};
21+
}
22+
23+
handleFormSubmit = e => {
24+
e.preventDefault();
25+
axios({
26+
method: "post",
27+
url: `${process.env.REACT_APP_API}`,
28+
headers: { "content-type": "application/json" },
29+
data: this.state
30+
})
31+
.then(result => {
32+
this.setState({
33+
mailSent: result.data.sent
34+
});
35+
console.log(this.state);
36+
})
37+
.catch(error => this.setState({ error: error.message }));
38+
};
39+
40+
render() {
41+
const { title, successMessage, errorMessage, fields } = this.props.config;
42+
return (
43+
<div className="App">
44+
<h2>{title}</h2>
45+
<div>
46+
<form action="#">
47+
{fields &&
48+
fields.map(fields => {
49+
return (
50+
<React.Fragment>
51+
{fields.type !== "textarea" ? (
52+
<React.Fragment>
53+
<label>{fields.label}</label>
54+
<input
55+
type={fields.type}
56+
className={fields.klassName}
57+
placeholder={fields.placeholder}
58+
value={this.state.fname}
59+
onChange={e => this.setState({ fname: e.target.value })}
60+
/>
61+
</React.Fragment>
62+
) : (
63+
<React.Fragment>
64+
<label>{fields.label}</label>
65+
<textarea
66+
className={fields.klassName}
67+
placeholder={fields.placeholder}
68+
onChange={e => this.setState({ message: e.target.value })}
69+
value={this.state.message}
70+
/>
71+
</React.Fragment>
72+
)}
73+
</React.Fragment>
74+
);
75+
})}
76+
<input type="submit" onClick={e => this.handleFormSubmit(e)} value="Submit" />
77+
<div>
78+
{this.state.mailSent && <div className="sucsess">{successMessage}</div>}
79+
{this.state.error && <div className="error">{errorMessage}</div>}
80+
</div>
81+
</form>
82+
</div>
83+
</div>
84+
);
85+
}
86+
}
87+
88+
export default Form;
89+
//propTypes for the component
90+
Form.propTypes = {
91+
config: PropTypes.object.isRequired
92+
};

‎src/App.css renamed to ‎src/components/Form/styles.css

File renamed without changes.

‎src/index.css

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/index.js

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
5-
import * as serviceWorker from './serviceWorker';
3+
import Form from '../src/components/Form';
64

7-
ReactDOM.render(<App />, document.getElementById('root'));
8-
9-
// If you want your app to work offline and load faster, you can change
10-
// unregister() to register() below. Note this comes with some pitfalls.
11-
// Learn more about service workers: http://bit.ly/CRA-PWA
12-
serviceWorker.unregister();
5+
const config = {
6+
api: `${process.env.REACT_APP_API}`,
7+
title: 'Contact Me',
8+
successMessage: 'Thank you for contcting me.',
9+
errorMessage: 'Sorry we have some problems.',
10+
fields: [
11+
{ id: 1, label: 'First Name', type: 'text',placeholder:'Your First Name', isRequired: true , klassName:'first-name-field'},
12+
{ id: 2, label: 'Last Name', type: 'text', placeholder: 'Your Last Name', isRequired: true , klassName:'last-name-field'},
13+
{ id: 3, label: 'Email', type: 'email', placeholder: ' Your Email', isRequired: true , klassName:'email-field'},
14+
{ id: 4, label: 'Message', type: 'textarea',placeholder:'Write something.....', isRequired: true , klassName:'message-field'}
15+
]
16+
}
17+
ReactDOM.render(<Form config={config} />, document.getElementById('root'));

‎src/logo.svg

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)