content logo

React Forms:

React Create Account Form with Gradient Background

The form you see in this post has a section for entering email, username and password. This form has a relatively clear gradient background. The button of this form is used to record information and its title is white. The button itself is a blue color. This is a responsive form and is made using React.

#

React Sign up Form Code

#

React Registration Form

#

HTML Registration Form Code

#

CSS Form Gradient Background

<!-- This script got from frontendfreecode.com -->
<div id="root"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
p, div {
  font-family: Lato;
}
.wrapper {
  height: 97vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%);
}
.form-wrapper {
  display: flex;
  flex-direction: column;
  width: 280px;
  max-width: 80%;
  min-width: 100px;
  min-height: 400px;
  padding: 20px 40px;
  border-radius: 6px;
  box-shadow: 0px 8px 36px #222;
  background-color: #fefefe;
}
.form-wrapper > h2 {
  display: flex;
  justify-content: center;
  font-family: "Segoe UI", "Ubuntu", "Roboto", "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 2em;
  font-weight: lighter;
  margin-top: 0.25em;
  color: #222;
}
form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.info {
  padding-bottom: 1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
label {
  margin-bottom: 0.5em;
  color: #444;
  font-weight: lighter;
}
input {
  padding: 10px 10px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #d6d1d5;
}
input::placeholder {
  font-size: 1.2em;
  font-weight: lighter;
  color: #bbb;
}
button {
  min-width: 100%;
  cursor: pointer;
  margin-right: 0.25em;
  margin-top: 0.5em;
  padding: 	0.938em;
  border: none;
  border-radius: 4px;
  background-color: #22223B;
  color: #fefefe;
}
button:hover {
  background-color: #4A4E69;
  color: #fefefe;
}
input.error {
  border: 1px solid #EADAE4;
}
.error {
  color:#db2269;
  font-size: 0.625em;
  display: relative;
}
.fullName {
  margin-right: 1%;
}
.fullName,
.email,
.password {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}
.fullName {
  width: 100%;
}
.email,
.password {
  width: 100%;
}
.submit {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}
const validEmailRegex = RegExp(
/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i);
const validateForm = errors => {
  let valid = true;
  Object.values(errors).forEach(val => val.length > 0 && (valid = false));
  return valid;
};
class App extends React.Component {
  constructor(props) {
    super(props);_defineProperty(this, "handleChange",
    event => {
      event.preventDefault();
      const { name, value } = event.target;
      let errors = this.state.errors;
      switch (name) {
        case 'fullName':
          errors.fullName =
          value.length < 5 ?
          'Full Name must be at least 5 characters long!' :
          '';
          break;
        case 'email':
          errors.email =
          validEmailRegex.test(value) ?
          '' :
          'Email is not valid!';
          break;
        case 'password':
          errors.password =
          value.length < 8 ?
          'Password must be at least 8 characters long!' :
          '';
          break;
        default:
          break;}
      this.setState({ errors, [name]: value });
    });_defineProperty(this, "handleSubmit",
    event => {
      event.preventDefault();
      if (validateForm(this.state.errors)) {
        console.info('Valid Form');
      } else {
        console.error('Invalid Form');
      }
    });this.state = { fullName: null, email: null, password: null, errors: { fullName: '', email: '', password: '' } };}
  render() {
    const { errors } = this.state;
    return /*#__PURE__*/(
      React.createElement("div", { className: "wrapper" }, /*#__PURE__*/
      React.createElement("div", { className: "form-wrapper" }, /*#__PURE__*/
      React.createElement("h2", null, "Create Account"), /*#__PURE__*/
      React.createElement("form", { onSubmit: this.handleSubmit, noValidate: true }, /*#__PURE__*/
      React.createElement("div", { className: "fullName" }, /*#__PURE__*/
      React.createElement("label", { htmlFor: "fullName" }, "Full Name"), /*#__PURE__*/
      React.createElement("input", { type: "text", name: "fullName", onChange: this.handleChange, noValidate: true }),
      errors.fullName.length > 0 && /*#__PURE__*/
      React.createElement("span", { className: "error" }, errors.fullName)), /*#__PURE__*/
      React.createElement("div", { className: "email" }, /*#__PURE__*/
      React.createElement("label", { htmlFor: "email" }, "Email"), /*#__PURE__*/
      React.createElement("input", { type: "email", name: "email", onChange: this.handleChange, noValidate: true }),
      errors.email.length > 0 && /*#__PURE__*/
      React.createElement("span", { className: "error" }, errors.email)), /*#__PURE__*/
      React.createElement("div", { className: "password" }, /*#__PURE__*/
      React.createElement("label", { htmlFor: "password" }, "Password"), /*#__PURE__*/
      React.createElement("input", { type: "password", name: "password", onChange: this.handleChange, noValidate: true }),
      errors.password.length > 0 && /*#__PURE__*/
      React.createElement("span", { className: "error" }, errors.password)), /*#__PURE__*/
      React.createElement("div", { className: "submit" }, /*#__PURE__*/
      React.createElement("button", null, "Create"))))));
  }}
ReactDOM.render( /*#__PURE__*/
React.createElement(React.StrictMode, null, /*#__PURE__*/
React.createElement(App, null)),
document.getElementById('root'));
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.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/16.13.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script>
<style>
p, div {
  font-family: Lato;
}
.wrapper {
  height: 97vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%);
}
.form-wrapper {
  display: flex;
  flex-direction: column;
  width: 280px;
  max-width: 80%;
  min-width: 100px;
  min-height: 400px;
  padding: 20px 40px;
  border-radius: 6px;
  box-shadow: 0px 8px 36px #222;
  background-color: #fefefe;
}
.form-wrapper > h2 {
  display: flex;
  justify-content: center;
  font-family: "Segoe UI", "Ubuntu", "Roboto", "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 2em;
  font-weight: lighter;
  margin-top: 0.25em;
  color: #222;
}
form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.info {
  padding-bottom: 1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
label {
  margin-bottom: 0.5em;
  color: #444;
  font-weight: lighter;
}
input {
  padding: 10px 10px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #d6d1d5;
}
input::placeholder {
  font-size: 1.2em;
  font-weight: lighter;
  color: #bbb;
}
button {
  min-width: 100%;
  cursor: pointer;
  margin-right: 0.25em;
  margin-top: 0.5em;
  padding: 	0.938em;
  border: none;
  border-radius: 4px;
  background-color: #22223B;
  color: #fefefe;
}
button:hover {
  background-color: #4A4E69;
  color: #fefefe;
}
input.error {
  border: 1px solid #EADAE4;
}
.error {
  color:#db2269;
  font-size: 0.625em;
  display: relative;
}
.fullName {
  margin-right: 1%;
}
.fullName,
.email,
.password {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}
.fullName {
  width: 100%;
}
.email,
.password {
  width: 100%;
}
.submit {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
</style>

</head>
<body>
<div id="root"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}
const validEmailRegex = RegExp(
/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i);
const validateForm = errors => {
  let valid = true;
  Object.values(errors).forEach(val => val.length > 0 && (valid = false));
  return valid;
};
class App extends React.Component {
  constructor(props) {
    super(props);_defineProperty(this, "handleChange",
    event => {
      event.preventDefault();
      const { name, value } = event.target;
      let errors = this.state.errors;
      switch (name) {
        case 'fullName':
          errors.fullName =
          value.length < 5 ?
          'Full Name must be at least 5 characters long!' :
          '';
          break;
        case 'email':
          errors.email =
          validEmailRegex.test(value) ?
          '' :
          'Email is not valid!';
          break;
        case 'password':
          errors.password =
          value.length < 8 ?
          'Password must be at least 8 characters long!' :
          '';
          break;
        default:
          break;}
      this.setState({ errors, [name]: value });
    });_defineProperty(this, "handleSubmit",
    event => {
      event.preventDefault();
      if (validateForm(this.state.errors)) {
        console.info('Valid Form');
      } else {
        console.error('Invalid Form');
      }
    });this.state = { fullName: null, email: null, password: null, errors: { fullName: '', email: '', password: '' } };}
  render() {
    const { errors } = this.state;
    return /*#__PURE__*/(
      React.createElement("div", { className: "wrapper" }, /*#__PURE__*/
      React.createElement("div", { className: "form-wrapper" }, /*#__PURE__*/
      React.createElement("h2", null, "Create Account"), /*#__PURE__*/
      React.createElement("form", { onSubmit: this.handleSubmit, noValidate: true }, /*#__PURE__*/
      React.createElement("div", { className: "fullName" }, /*#__PURE__*/
      React.createElement("label", { htmlFor: "fullName" }, "Full Name"), /*#__PURE__*/
      React.createElement("input", { type: "text", name: "fullName", onChange: this.handleChange, noValidate: true }),
      errors.fullName.length > 0 && /*#__PURE__*/
      React.createElement("span", { className: "error" }, errors.fullName)), /*#__PURE__*/
      React.createElement("div", { className: "email" }, /*#__PURE__*/
      React.createElement("label", { htmlFor: "email" }, "Email"), /*#__PURE__*/
      React.createElement("input", { type: "email", name: "email", onChange: this.handleChange, noValidate: true }),
      errors.email.length > 0 && /*#__PURE__*/
      React.createElement("span", { className: "error" }, errors.email)), /*#__PURE__*/
      React.createElement("div", { className: "password" }, /*#__PURE__*/
      React.createElement("label", { htmlFor: "password" }, "Password"), /*#__PURE__*/
      React.createElement("input", { type: "password", name: "password", onChange: this.handleChange, noValidate: true }),
      errors.password.length > 0 && /*#__PURE__*/
      React.createElement("span", { className: "error" }, errors.password)), /*#__PURE__*/
      React.createElement("div", { className: "submit" }, /*#__PURE__*/
      React.createElement("button", null, "Create"))))));
  }}
ReactDOM.render( /*#__PURE__*/
React.createElement(React.StrictMode, null, /*#__PURE__*/
React.createElement(App, null)),
document.getElementById('root'));
</script>

</body>
</html>
Preview