woops i forgot to commit these files lul

1 files changed, 64 insertions, 0 deletions

diff --git a/src/components/contact/Form.js b/src/components/contact/Form.js
new file mode 100644
index 0000000..ec398fa
--- /dev/null
+++ b/src/components/contact/Form.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+
+const encode = (data) => {
+    return Object.keys(data)
+        .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
+        .join("&");
+}
+
+export default class Form extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { name: '', method: '', message: '' };
+    }
+
+    handleSubmit = e => {
+        fetch('/', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+            body: encode({ 'form-name': 'contact-form', ...this.state })
+        });
+        
+        e.preventDefault();
+    }
+    
+    handleChange = e => this.setState({ [e.target.name]: e.target.value });
+
+    render() {
+        const { name, method, message } = this.state;
+        return(
+            <div className="container-fluid">
+                <div className="row">
+                    <div className="col-lg-8">
+                        <form name="contact-form" id="contact-form" action="/contact" onSubmit={this.handleSubmit} netlify>
+                            <ul>
+                                <li className="wow fadeInUp" data-wow-delay="1.4s">
+                                    <label htmlFor="name">Name:</label>
+                                    <div className="textarea">
+                                        <input type="text" name="name" id="name" defaultValue={name} onChange={this.handleChange} required />
+                                    </div>
+                                </li>
+                                <li className="wow fadeInUp" data-wow-delay="1.6s">
+                                    <label htmlFor="method">Email/ Discord:</label>
+                                    <div className="textarea">
+                                        <input type="text" name="method" id="method" defaultValue={method} onChange={this.handleChange} required />
+                                    </div>
+                                </li>
+                                <li className="wow fadeInUp" data-wow-delay="1.6s">
+                                    <label htmlFor="message">Message:</label>
+                                    <div className="textarea">
+                                        <input type="text" name="message" id="message" defaultValue={message} onChange={this.handleChange} required />
+                                    </div>
+                                </li>
+                            </ul>
+                            
+                            <button type="submit" name="contact-form" id="contact-form" className="send wow fadeInUp">
+                                Send Message
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file