//import React from "react";
'use strict';

class PersonalContact extends React.Component {
    constructor(props) {
        super(props);
        this.submitForm = this.submitForm.bind(this);
        this.state = {
            status: ""
        };
    }
    render() {
        const { status } = this.state;
        return(
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <form name="sentMessage" id="contactForm" onSubmit={this.submitForm} action="https://formspree.io/xpzypzqk" method="POST">
                        <div class="row control-group">
                            <div class="form-group col-xs-12 floating-label-form-group controls">
                                <label>Name</label>
                                <input type="text" name="name" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name."></input>
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="row control-group">
                            <div class="form-group col-xs-12 floating-label-form-group controls">
                                <label>Email Address</label>
                                <input type="email" name="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address."></input>
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="row control-group">
                            <div class="form-group col-xs-12 floating-label-form-group controls">
                                <label>Phone Number</label>
                                <input type="tel" name="telephone" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number."></input>
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="row control-group">
                            <div class="form-group col-xs-12 floating-label-form-group controls">
                                <label>Message</label>
                                <textarea rows="5" name="message" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <button>Submit</button>
                        {status === "SUCCESS" && <p>Thanks!</p> }
                        {status === "ERROR"  && <p>There appears to be a problem. Try disabling lastpass on this page. </p>}
                    </form>
                </div>
            </div>
        );
    }
    submitForm(ev) {
        ev.preventDefault();
        const form = ev.target;
        const data = new FormData(form);
        const xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action);
        xhr.setRequestHeader("Accept", "application/json");
        xhr.onreadystatechange = () => {
            if (xhr.readyState !== XMLHttpRequest.DONE) return;
            if (xhr.status === 200) 
            {
                form.reset();
                this.setState({ status: "SUCCESS" });
            }
            else 
            {
                this.setState({ status: "ERROR" });
            }
        };
        xhr.send(data);
    }
}
//el = () => (<p>hi</p>);
const domContainer = document.getElementById('contactDiv');
ReactDOM.render(<PersonalContact/>, domContainer);
@@ -2782,29 +2782,30 @@
    %3C
-button%3ESubmit%3C/button
+div id=%22success%22%3E%3C/div
 %3E%0A  
@@ -2848,18 +2848,17 @@
 UCCESS%22 
-&&
+?
  %3Cp%3EThan
@@ -2865,16 +2865,41 @@
 ks!%3C/p%3E 
+: %3Cbutton%3ESubmit%3C/button%3E
 %7D%0A      

split files