React Forms:

Cartoon Design Form using React JS

You can view this form to record feedback from your audience and visitors to your website. In this form, the header and the registration button are blue. The corners of the form are curved and not sharp. This form also has a shade of red. The font chosen for the title phrase as well as the title of the button has made this form cartoonish and funny.

Free Cartoon Style Form

Simple Form using React

HTML Cartoon Form

Stylish Beautiful Form Elements

<!-- This script got from frontendfreecode.com -->
<div id="app"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

@import url("https://fonts.googleapis.com/css?family=Pacifico|Signika");
html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #F3E5D3;
  font-family: "Signika";
}
h1, h2, h3, h4, h5 {
  font-family: "Pacifico";
}
.app-container {
  width: 100%;
  box-shadow: 14px 14px 0 #E27362;
  margin: auto;
  overflow: hidden;
  background-color: whitesmoke;
}
@media screen and (min-width: 200px) {
  .app-container {
    width: 500px;
    border-radius: 20px;
    margin: 20px auto;
  }
}
.app-container .title {
  background-color: #256B7C;
  color: #E27362;
  text-shadow: 2px 2px 0 #F3E5D3;
  margin-top: 0;
  text-align: center;
}
.input-group {
  padding: 15px;
  padding-left: 50px;
}
.input-group label {
  display: inline-block;
  float: left;
  box-sizing: border-box;
  padding-right: 10px;
  width: 30%;
  text-align: right;
  font-size: 20px;
  line-height: 20px;
  color: #256B7C;
}
.input-group input {
  border-left: 3px solid #256B7C;
  width: calc(70% - 65px);
  outline: none;
  border: none;
  background-color: transparent;
  font-size: 30px;
  line-height: 40px;
  padding-right: 5px;
  color: #4B9C9C;
  transition: border-color 0.3s;
  border-bottom: 2px solid transparent;
}
.input-group input.input-view {
  border-bottom: none;
}
.input-group input:focus {
  border-color: #4B9C9C;
}
.btn {
  display: block;
  width: calc(100% - 65px);
  margin: 30px auto;
  cursor: pointer;
  border-radius: 15px;
  border: none;
  background-color: #4B9C9C;
  color: #F7BC66;
  font-size: 30px;
  line-height: 60px;
  font-family: "Pacifico";
  text-shadow: 2px 2px 0 #F3E5D3;
  transition: background-color 0.2s linear, color 0.2s linear;
  outline: none;
}
.btn:hover {
  background-color: #65b5b5;
  color: #fad196;
}
.btn:active {
  background-color: #3a7a7a;
  color: #f4a736;
}

class App extends React.Component {
  constructor() {
    super();
    this.submitHandler = this.submitHandler.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }
  submitHandler(data) {
    console.log('Form is submitted', data);
  }
  onSubmit() {
    alert('Hello ' + this.state.name + ' ' + this.state.surname + '. You have "' + this.state.catname + '" cat.');
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "app-container" }, /*#__PURE__*/
      React.createElement("h1", { className: "title" }, "Title here"), /*#__PURE__*/
      React.createElement(Form, { onSubmit: this.onSubmit })));
  }}
class Form extends React.Component {
  constructor(params) {
    super(params);
    this.state = {};
  }
  onValueChangeHandler(paramName) {
    return event => {
      let _tmpState = this.state;
      _tmpState[paramName] = event.target.value;
      this.setState(_tmpState);
    };
  }
  render() {
    console.log(this.state);
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(EditableInput, { name: "name", title: "Name", value: this.state.name, onChange: this.onValueChangeHandler('name') }), /*#__PURE__*/
      React.createElement(EditableInput, { name: "surname", title: "Surname", value: this.state.surname, onChange: this.onValueChangeHandler('surname') }), /*#__PURE__*/
      React.createElement(EditableInput, { name: "catname", title: "Your cat's name", value: this.state.catname, onChange: this.onValueChangeHandler('catname') }), /*#__PURE__*/
      React.createElement("button", { type: "button", className: "btn", onClick: this.props.onSubmit }, "Submit")));
  }}
class EditableInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "input-group" }, /*#__PURE__*/
      React.createElement("label", { for: this.props.name + '_input' }, this.props.title), /*#__PURE__*/
      React.createElement("input", { type: "text", ref: input => this.input = input, value: this.props.value, onChange: this.props.onChange.bind(this), placeholder: 'Type ' + this.props.title.toLowerCase() })));
  }}
ReactDOM.render( /*#__PURE__*/
React.createElement(App, null),
document.getElementById('app'));

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.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/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>
<style>
@import url("https://fonts.googleapis.com/css?family=Pacifico|Signika");
html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #F3E5D3;
  font-family: "Signika";
}
h1, h2, h3, h4, h5 {
  font-family: "Pacifico";
}
.app-container {
  width: 100%;
  box-shadow: 14px 14px 0 #E27362;
  margin: auto;
  overflow: hidden;
  background-color: whitesmoke;
}
@media screen and (min-width: 200px) {
  .app-container {
    width: 500px;
    border-radius: 20px;
    margin: 20px auto;
  }
}
.app-container .title {
  background-color: #256B7C;
  color: #E27362;
  text-shadow: 2px 2px 0 #F3E5D3;
  margin-top: 0;
  text-align: center;
}
.input-group {
  padding: 15px;
  padding-left: 50px;
}
.input-group label {
  display: inline-block;
  float: left;
  box-sizing: border-box;
  padding-right: 10px;
  width: 30%;
  text-align: right;
  font-size: 20px;
  line-height: 20px;
  color: #256B7C;
}
.input-group input {
  border-left: 3px solid #256B7C;
  width: calc(70% - 65px);
  outline: none;
  border: none;
  background-color: transparent;
  font-size: 30px;
  line-height: 40px;
  padding-right: 5px;
  color: #4B9C9C;
  transition: border-color 0.3s;
  border-bottom: 2px solid transparent;
}
.input-group input.input-view {
  border-bottom: none;
}
.input-group input:focus {
  border-color: #4B9C9C;
}
.btn {
  display: block;
  width: calc(100% - 65px);
  margin: 30px auto;
  cursor: pointer;
  border-radius: 15px;
  border: none;
  background-color: #4B9C9C;
  color: #F7BC66;
  font-size: 30px;
  line-height: 60px;
  font-family: "Pacifico";
  text-shadow: 2px 2px 0 #F3E5D3;
  transition: background-color 0.2s linear, color 0.2s linear;
  outline: none;
}
.btn:hover {
  background-color: #65b5b5;
  color: #fad196;
}
.btn:active {
  background-color: #3a7a7a;
  color: #f4a736;
}
</style>

</head>
<body>
<div id="app"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
class App extends React.Component {
  constructor() {
    super();
    this.submitHandler = this.submitHandler.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }
  submitHandler(data) {
    console.log('Form is submitted', data);
  }
  onSubmit() {
    alert('Hello ' + this.state.name + ' ' + this.state.surname + '. You have "' + this.state.catname + '" cat.');
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "app-container" }, /*#__PURE__*/
      React.createElement("h1", { className: "title" }, "Title here"), /*#__PURE__*/
      React.createElement(Form, { onSubmit: this.onSubmit })));
  }}
class Form extends React.Component {
  constructor(params) {
    super(params);
    this.state = {};
  }
  onValueChangeHandler(paramName) {
    return event => {
      let _tmpState = this.state;
      _tmpState[paramName] = event.target.value;
      this.setState(_tmpState);
    };
  }
  render() {
    console.log(this.state);
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(EditableInput, { name: "name", title: "Name", value: this.state.name, onChange: this.onValueChangeHandler('name') }), /*#__PURE__*/
      React.createElement(EditableInput, { name: "surname", title: "Surname", value: this.state.surname, onChange: this.onValueChangeHandler('surname') }), /*#__PURE__*/
      React.createElement(EditableInput, { name: "catname", title: "Your cat's name", value: this.state.catname, onChange: this.onValueChangeHandler('catname') }), /*#__PURE__*/
      React.createElement("button", { type: "button", className: "btn", onClick: this.props.onSubmit }, "Submit")));
  }}
class EditableInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "input-group" }, /*#__PURE__*/
      React.createElement("label", { for: this.props.name + '_input' }, this.props.title), /*#__PURE__*/
      React.createElement("input", { type: "text", ref: input => this.input = input, value: this.props.value, onChange: this.props.onChange.bind(this), placeholder: 'Type ' + this.props.title.toLowerCase() })));
  }}
ReactDOM.render( /*#__PURE__*/
React.createElement(App, null),
document.getElementById('app'));
</script>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS