content logo

React Forms:

Responsive and Simple React Contact us Form

You can use this form to create a contact form with us. This form has a red background and an outer shadow. The corners of this form have a slightly radius border and are not sharp. The message button in this form turns orange after completing all the information and can be clicked.

#

Contact us Form Code

#

React Form Shadow

#

React Responsive Form Code

#

Simple HTML Form Code

<!-- This script got from frontendfreecode.com -->
<main class='container'>
    <section id='root'></section>
</main><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
html{
  height:100%;
  background-color: #ff591a;
}
html *{
  box-sizing:border-box;
  font-family:Sans-serif;
}
h1{
  display:inline-block;
  font-weight:100;
}
ul{
  margin:0;
  padding:0;
}
::placeholder{
  color: #d8d8d8;
}
.app-container{
  width:40%;
  margin: 0 auto;
  margin-top: 5%;
  background-color:white;
  border-radius:4px;
  box-shadow: 2px 5px 9px 2px rgba(88, 88, 88, 0.62);
  padding:20px 40px;
}
.app-container li{
  list-style: none;
  margin:0;
}
li input{
  border:none;
  border-bottom:1px solid #d8d8d8;
  height:30px;
  width:100%;
  font-size:20px;
  font-weight:200;
  margin-bottom:5px;
}
li input:focus{
  outline:none;
}
li:last-child input {
  border:none;
}
button{
  margin-top: 10px;
  width: 100px;
  height:30px;
  background-color: white;
  border: 1px solid #d8d8d8;
  color: #d8d8d8;
  border-radius: 20px;
  font-size:10px;
  transition:0.75s all;
}
button:focus{
  outline:none;
}
button.transition{
  background-color:#ff591a;
  color:white;
}
class AppContainer extends React.Component {
  constructor() {
    super();
    this.state = {
      title: 'We love email',
      name: '',
      email: '',
      message: '',
      submit: false,
      errors: [] };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
  }
  handleChange(e) {
    const inputName = e.target.name;
    const value = e.target.value.trim();
    switch (inputName) {
      case 'name':
        this.setState({ name: value });
        break;
      case 'email':
        this.setState({ email: value });
        break;
      case 'message':
        this.setState({ message: value });
        break;}
  }
  handleBlur(e) {
    let count = 0;
    let errors = [];
    for (let prop in this.state) {
      switch (prop) {
        case 'name':
          this.state[prop].length > 2 ? count++ : this.state[prop] != '' ? errors.push('Name must be longer than 2 characters') : false;
          break;
        case 'email':
          this.state[prop].length > 5 && this.state[prop].match(/.+@.+\..+/) ? count++ : this.state[prop] != '' ? errors.push('A valid email must be submitted ') : false;
          break;
        case 'message':
          this.state[prop].length > 2 ? count++ : this.state[prop] != '' ? errors.push('A message must contain more than two characters') : false;
          break;}
    }
    console.log(count);
    if (count == 3) {
      this.setState({ submit: true });
    } else {
      this.setState({ submit: false });
    }
    if (errors.length) {
      this.setState({ errors: errors });
    }
  }
  handleSubmit(e) {
    if (this.state.submit) {
      this.setState({ title: 'Your email has been sent!' });
    }
  }
  render() {
    let errors = this.state.errors.map(err => {
      return /*#__PURE__*/React.createElement("li", null, err);
    });
    return /*#__PURE__*/(
      React.createElement("div", { className: "app-container" }, /*#__PURE__*/
      React.createElement("h1", null,
      this.state.title), /*#__PURE__*/
      React.createElement("ul", null,
      errors.length > 0 ? errors : false), /*#__PURE__*/
      React.createElement("form", null, /*#__PURE__*/
      React.createElement("ul", { onBlur: this.handleBlur }, /*#__PURE__*/
      React.createElement("li", null, /*#__PURE__*/
      React.createElement("input", { type: "text", placeholder: "name", name: "name", value: this.state.name, onChange: this.handleChange })), /*#__PURE__*/
      React.createElement("li", null, /*#__PURE__*/
      React.createElement("input", { type: "text", placeholder: "email", name: "email", value: this.state.email, onChange: this.handleChange })), /*#__PURE__*/
      React.createElement("li", null, /*#__PURE__*/
      React.createElement("input", { type: "text", placeholder: "message", name: "message", value: this.state.message, onChange: this.handleChange })))), /*#__PURE__*/
      React.createElement("button", { className: this.state.submit ? 'transition' : false, onClick: this.handleSubmit }, "SEND")));
  }}
const rootElement = document.querySelector('#root');
React.render( /*#__PURE__*/React.createElement(AppContainer, null), rootElement);
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js'></script>
<style>
html{
  height:100%;
  background-color: #ff591a;
}
html *{
  box-sizing:border-box;
  font-family:Sans-serif;
}
h1{
  display:inline-block;
  font-weight:100;
}
ul{
  margin:0;
  padding:0;
}
::placeholder{
  color: #d8d8d8;
}
.app-container{
  width:40%;
  margin: 0 auto;
  margin-top: 5%;
  background-color:white;
  border-radius:4px;
  box-shadow: 2px 5px 9px 2px rgba(88, 88, 88, 0.62);
  padding:20px 40px;
}
.app-container li{
  list-style: none;
  margin:0;
}
li input{
  border:none;
  border-bottom:1px solid #d8d8d8;
  height:30px;
  width:100%;
  font-size:20px;
  font-weight:200;
  margin-bottom:5px;
}
li input:focus{
  outline:none;
}
li:last-child input {
  border:none;
}
button{
  margin-top: 10px;
  width: 100px;
  height:30px;
  background-color: white;
  border: 1px solid #d8d8d8;
  color: #d8d8d8;
  border-radius: 20px;
  font-size:10px;
  transition:0.75s all;
}
button:focus{
  outline:none;
}
button.transition{
  background-color:#ff591a;
  color:white;
}
</style>

</head>
<body>
<main class='container'>
    <section id='root'></section>
</main><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
class AppContainer extends React.Component {
  constructor() {
    super();
    this.state = {
      title: 'We love email',
      name: '',
      email: '',
      message: '',
      submit: false,
      errors: [] };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
  }
  handleChange(e) {
    const inputName = e.target.name;
    const value = e.target.value.trim();
    switch (inputName) {
      case 'name':
        this.setState({ name: value });
        break;
      case 'email':
        this.setState({ email: value });
        break;
      case 'message':
        this.setState({ message: value });
        break;}
  }
  handleBlur(e) {
    let count = 0;
    let errors = [];
    for (let prop in this.state) {
      switch (prop) {
        case 'name':
          this.state[prop].length > 2 ? count++ : this.state[prop] != '' ? errors.push('Name must be longer than 2 characters') : false;
          break;
        case 'email':
          this.state[prop].length > 5 && this.state[prop].match(/.+@.+\..+/) ? count++ : this.state[prop] != '' ? errors.push('A valid email must be submitted ') : false;
          break;
        case 'message':
          this.state[prop].length > 2 ? count++ : this.state[prop] != '' ? errors.push('A message must contain more than two characters') : false;
          break;}
    }
    console.log(count);
    if (count == 3) {
      this.setState({ submit: true });
    } else {
      this.setState({ submit: false });
    }
    if (errors.length) {
      this.setState({ errors: errors });
    }
  }
  handleSubmit(e) {
    if (this.state.submit) {
      this.setState({ title: 'Your email has been sent!' });
    }
  }
  render() {
    let errors = this.state.errors.map(err => {
      return /*#__PURE__*/React.createElement("li", null, err);
    });
    return /*#__PURE__*/(
      React.createElement("div", { className: "app-container" }, /*#__PURE__*/
      React.createElement("h1", null,
      this.state.title), /*#__PURE__*/
      React.createElement("ul", null,
      errors.length > 0 ? errors : false), /*#__PURE__*/
      React.createElement("form", null, /*#__PURE__*/
      React.createElement("ul", { onBlur: this.handleBlur }, /*#__PURE__*/
      React.createElement("li", null, /*#__PURE__*/
      React.createElement("input", { type: "text", placeholder: "name", name: "name", value: this.state.name, onChange: this.handleChange })), /*#__PURE__*/
      React.createElement("li", null, /*#__PURE__*/
      React.createElement("input", { type: "text", placeholder: "email", name: "email", value: this.state.email, onChange: this.handleChange })), /*#__PURE__*/
      React.createElement("li", null, /*#__PURE__*/
      React.createElement("input", { type: "text", placeholder: "message", name: "message", value: this.state.message, onChange: this.handleChange })))), /*#__PURE__*/
      React.createElement("button", { className: this.state.submit ? 'transition' : false, onClick: this.handleSubmit }, "SEND")));
  }}
const rootElement = document.querySelector('#root');
React.render( /*#__PURE__*/React.createElement(AppContainer, null), rootElement);
</script>

</body>
</html>
Preview