Search...
graphql
react

Forms

React Bootstrap Forms

React Bootstrap 5 forms are input-based components which are designed to collect users data. Used as login, subscribe or contact form, all can be easily customized.

The Contrast React Bootstrap 5 forms have predefined form logins, form registers, form subscriptions or form contacts and other layout forms varying in their design are all at your disposal. Each of them offers a different type of functionality.

Creating a Contrast React Bootstrap form

To create a form with Contrast React Bootstrap 5, we use input fields. To use that in our project you have to import CDBInput.

js
import { CDBInput } from 'cdbreact';

Alongside the CDBInput component we use the CDBCard component for the form body, the CDBBtn for creating the form button and CDBLink component for navigation.

js
import { CDBInput, CDBCard, CDBBtn } from 'cdbreact';

CDBLink Component

The CDBLink component is built on react-router-dom@6. It provides a smooth user navigation experience in your web applications. To use CDBLink for navigation in your projects, first step is to wrap your App component with BrowerRouter as shown below to enable client side routing in your web projects.

js
import React from 'react';
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";


import App from './App'


ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>
);

Default Form Login

Use the CDBIcon component to put icons in your form and the CDBLink for creating links in your form.

Sign in

Remember me

Forgot Password ?

Not a member? Register

or sign in with

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBLink, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4"> Sign in </p>
          </div>
          <CDBInput material hint="E-mail" type="email" />
          <CDBInput material hint="Password" type="password" />
          <div className="d-flex flex-wrap justify-content-center align-items-center">
            <CDBInput type="Checkbox" />
            <p className="m-0">Remember me</p>
            <CDBLink to="#">Forgot Password ?</CDBLink>
          </div>
          <CDBBtn color="dark" className="btn-block my-3 mx-0">
            Sign in
          </CDBBtn>
          <p className="text-center">
            Not a member?{' '}
            <CDBLink className="d-inline p-0" to="#">
              Register
            </CDBLink>
          </p>
          <p className="text-center"> or sign in with</p>
          <div className="flex-row my-3 d-flex justify-content-center">
            <CDBBtn color="white" style={{ boxShadow: 'none' }}>
              <CDBIcon fab icon="facebook-f" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" style={{ boxShadow: 'none' }}>
              <CDBIcon fab icon="twitter" />
            </CDBBtn>
            <CDBBtn color="white" style={{ boxShadow: 'none' }}>
              <CDBIcon fab icon="google-plus-g" />
            </CDBBtn>
          </div>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Contrast Form Login

Sign in

Remember me

Forgot Password ?

Not a member? Register

or sign in with

js
import React from 'react';
import {
  CDBInput,
  CDBCheckbox,
  CDBCard,
  CDBCardBody,
  CDBIcon,
  CDBBtn,
  CDBLink,
  CDBContainer,
} from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <div style={{ background: 'black' }} className="text-center text-white">
          <p className="h5 mt-2 py-4 font-weight-bold">Sign in</p>
        </div>
        <CDBCardBody className="mx-4">
          <CDBInput label="Email" type="email" />
          <CDBInput label="Password" type="password" />
          <div className="mt-5 d-flex flex-wrap justify-content-center align-items-center">
            <CDBCheckbox className="me-2" />
            <p className="m-0">Remember me</p>
            <CDBLink to="#">Forgot Password ?</CDBLink>
          </div>
          <CDBBtn color="dark" outline className="btn-block my-3 mx-0">
            Sign in
          </CDBBtn>
          <p className="text-center">
            Not a member?{' '}
            <CDBLink className="d-inline p-0" to="#">
              Register
            </CDBLink>
          </p>
          <p className="text-center"> or sign in with</p>
          <div className="flex-row my-3 d-flex justify-content-center">
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="facebook-f" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="twitter" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="linkedin-in" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="github" />
            </CDBBtn>
          </div>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Default Form Register

Sign up

At least 8 characters and 1 digit

Optional - for two step authentication

Subscribe to our newsletter

or sign up with

Already have an account? Sign In

By clicking Sign up you agree to our terms of service

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBLink, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4"> Sign up </p>
          </div>
          <div className="form-flex-row mb-n4">
            <div className="col">
              <CDBInput material hint="First name" type="text" />
            </div>
            <div className="col">
              <CDBInput material hint="Last name" type="text" />
            </div>
          </div>
          <CDBInput material hint="E-mail" type="email" />
          <p className="text-muted text-center small mt-n4">At least 8 characters and 1 digit</p>
          <CDBInput material hint="Password" type="password" />
          <CDBInput material hint="Phone number" type="text" />
          <p className="text-muted text-center small mt-n4">
            Optional - for two step authentication
          </p>
          <div className="d-flex justify-content-center align-items-center mt-4">
            <CDBInput type="Forms" />
            <p className="m-0">Subscribe to our newsletter</p>
          </div>
          <CDBBtn color="dark" className="btn-block my-3 mx-0">
            Sign up
          </CDBBtn>
          <p className="text-center"> or sign up with</p>
          <div className="flex-row mb-3 d-flex justify-content-center">
            <CDBBtn color="white" className="m-0" style={{ boxShadow: 'none' }}>
              <CDBIcon fab icon="facebook-f" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" style={{ boxShadow: 'none' }}>
              <CDBIcon fab icon="twitter" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" style={{ boxShadow: 'none' }}>
              <CDBIcon fab icon="google-plus-g" />
            </CDBBtn>
          </div>
          <p className="text-center m-0">
            Already have an account?{' '}
            <CDBLink className="d-inline p-0" to="#">
              Sign In
            </CDBLink>
          </p>
          <hr />
          <p className="text-center">
            By clicking <em>Sign up</em> you agree to our{' '}
            <CDBLink className="d-inline p-0" to="#">
              terms of service
            </CDBLink>
          </p>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Contrast Form Register

Sign up

At least 8 characters and 1 digit

Optional - for two step authentication

Subscribe to our newsletter

or sign up with

Already have an account? Sign In

By clicking Sign up you agree to our terms of service

js
import React from 'react';
import {
  CDBInput,
  CDBCheckbox,
  CDBCard,
  CDBCardBody,
  CDBIcon,
  CDBBtn,
  CDBLink,
  CDBContainer,
} from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <div className="text-center text-white" style={{ background: 'black' }}>
          <p className="h5 mt-2 py-4 font-weight-bold"> Sign up </p>
        </div>
        <CDBCardBody className="mx-4">
          <div className="form-row mb-n4">
            <div className="col">
              <CDBInput label="First name" type="text" />
            </div>
            <div className="col">
              <CDBInput label="Last name" type="text" />
            </div>
          </div>
          <CDBInput label="E-mail" type="email" />
          <p className="text-muted text-center small mt-n4">At least 8 characters and 1 digit</p>
          <CDBInput label="Password" type="password" />
          <CDBInput label="Phone number" type="text" />
          <p className="text-muted text-center small mt-n4">
            Optional - for two step authentication
          </p>
          <div className="d-flex justify-content-center align-items-center mt-4">
            <CDBCheckbox className="me-2" />
            <p className="m-0">Subscribe to our newsletter</p>
          </div>
          <CDBBtn color="dark" outline className="btn-block my-3 mx-0">
            Sign up
          </CDBBtn>
          <p className="text-center"> or sign up with</p>
          <div className="flex-row mb-3 d-flex justify-content-center">
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="facebook-f" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="twitter" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="linkedin-in" />
            </CDBBtn>
            <CDBBtn color="white" className="m-0" outline>
              <CDBIcon fab icon="github" />
            </CDBBtn>
          </div>
          <p className="text-center m-0">
            Already have an account?{' '}
            <CDBLink className="d-inline p-0" to="#">
              Sign In
            </CDBLink>
          </p>
          <hr />
          <p className="text-center">
            By clicking <em>Sign up</em> you agree to our{' '}
            <CDBLink className="d-inline p-0" to="#">
              terms of service
            </CDBLink>
          </p>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Default Form Subscription

Subscribe

Join our mailing list. We write rarely, but only the best content.

See the last newsletter

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBLink, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4">Subscribe</p>
          </div>
          <p className="text-center mt-4 font-weight-light">
            Join our mailing list. We write rarely, but only the best content.
          </p>
          <CDBLink className="text-center p-0 font-weight-light" to="#">
            See the last newsletter
          </CDBLink>
          <CDBInput material hint="Name" type="text" />
          <CDBInput material hint="E-mail" type="email" />
          <CDBBtn color="dark" className="btn-block my-3 mx-0">
            Subscribe
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Contrast Form Subscription

Subscribe

Join our mailing list. We write rarely, but only the best content.

See the last newsletter

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBLink, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <div className="text-center text-white" style={{ background: 'black' }}>
          <p className="h5 mt-2 py-4 font-weight-bold">Subscribe</p>
        </div>
        <CDBCardBody className="mx-4">
          <p className="text-center mt-2">
            Join our mailing list. We write rarely, but only the best content.
          </p>
          <CDBLink className="text-center p-0" to="#">
            See the last newsletter
          </CDBLink>
          <CDBInput label="Name" type="text" />
          <CDBInput label="E-mail" type="email" />
          <CDBBtn color="dark" outline className="btn-block my-3 mx-0">
            Subscribe
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Default Form Contact

Contact us

Subject

Send me a copy of this message

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBSelect, CDBContainer } from 'cdbreact';


const Forms = () => {
  const option = [
    {
      text: 'Feature request',
      value: '1',
    },
    {
      text: 'Report a bug',
      value: '2',
    },
    {
      text: 'Help',
      value: '3',
      icon: 'question-circle',
    },
  ];
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4"> Contact us </p>
          </div>
          <CDBInput material hint="Name" type="text" />
          <CDBInput material hint="E-mail" type="email" />
          <p className="text-center m-0">Subject</p>
          <CDBSelect options={option} selected="Feedback" />
          <CDBInput hint="Message" type="textarea" />
          <div className="d-flex justify-content-center align-items-center mt-4">
            <CDBInput material type="Checkbox" />
            <p className="m-0">Send me a copy of this message</p>
          </div>
          <CDBBtn color="dark" className="btn-block my-3 mx-0">
            Send
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Contrast Form Contact

Contact Us

Subject

Send me a copy of this message

js
import React from 'react';
import { CDBInput, CDBSelect2, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  const option = [
    {
      text: 'Feature request',
      value: '1',
    },
    {
      text: 'Report a bug',
      value: '2',
    },
    {
      text: 'Help',
      value: '3',
      icon: 'question-circle',
    },
  ];
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <div style={{ background: 'black' }} className="text-center text-white">
          <p className="h5 mt-2 py-4 font-weight-bold">Contact Us</p>
        </div>
        <CDBCardBody className="mx-4">
          <CDBInput label="Name" type="text" />
          <CDBInput label="E-mail" type="email" />
          <p className="text-center m-0 text-muted">Subject</p>
          <CDBSelect2 color="white" options={option} selected="Feedback" />
          <CDBInput label="Message" type="textarea" />
          <div className="d-flex justify-content-center align-items-center mt-4">
            <CDBInput type="Checkbox" />
            <p className="m-0">Send me a copy of this message</p>
          </div>
          <CDBBtn color="dark" outline className="btn-block my-3 mx-0">
            Send
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Login Form with Icons

Sign in

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4 font-weight-bold"> Sign in </p>
          </div>
          <CDBInput label="E-mail" type="email" icon="envelope" iconClass="text-muted" />
          <CDBInput label="Password" type="password" icon="lock" iconClass="text-muted" />
          <CDBBtn color="success" style={{ width: '40%' }} className="btn-block mt-5 mx-auto">
            Login
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Login Form with Outside Label

Sign in

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-4">
            <p className="h4"> Sign in </p>
          </div>
          <label htmlFor="defaultLoginEmail" className="text-muted m-0">
            Your email
          </label>
          <CDBInput id="defaultLoginEmail" className="mt-n3" type="email" />
          <label htmlFor="defaultLoginPassword" className="text-muted m-0">
            Your password
          </label>
          <CDBInput id="defaultLoginPassword" className="mt-n3" type="password" />
          <CDBBtn color="primary" style={{ width: '40%' }} className="btn-block mt-5 mx-auto">
            Login
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Sign Up Form with Icon

Sign in

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4 font-weight-bold"> Sign up </p>
          </div>
          <CDBInput label="Your name" type="text" icon="user" iconClass="text-muted" />
          <CDBInput label="Your email" type="email" icon="envelope" iconClass="text-muted" />
          <CDBInput
            label="Confirm your email"
            type="email"
            icon="exclamation-triangle"
            iconClass="text-muted"
          />
          <CDBInput label="Your Password" type="password" icon="lock" iconClass="text-muted" />
          <CDBBtn color="primary" style={{ width: '40%' }} className="btn-block mt-5 mx-auto">
            Register
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Sign Up Form Outside Label

Sign in

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4"> Sign up </p>
          </div>
          <label htmlFor="defaultRegisterName" className="text-muted m-0">
            Your name
          </label>
          <CDBInput id="defaultRegisterName" className="mt-n3" type="text" />
          <label htmlFor="defaultRegisterEmail" className="text-muted m-0">
            Your email
          </label>
          <CDBInput id="defaultRegisterEmail" className="mt-n3" type="email" />
          <label htmlFor="defaultRegisterEmailConfirm" className="text-muted m-0">
            Confirm your email
          </label>
          <CDBInput id="defaultRegisterEmailConfirm" className="mt-n3" type="email" />
          <label htmlFor="defaultRegisterPassword" className="text-muted m-0">
            Your password
          </label>
          <CDBInput id="defaultRegisterPassword" className="mt-n3" type="password" />
          <CDBBtn color="danger" style={{ width: '40%' }} className="btn-block mt-5 mx-auto">
            Register
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Subscription Form with Icon

Subscribe

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4 font-weight-bold"> Subscribe </p>
          </div>
          <CDBInput label="Your name" type="text" icon="user" iconClass="text-muted" />
          <CDBInput label="Your email" type="email" icon="envelope" iconClass="text-muted" />
          <CDBBtn
            outline
            color="primary"
            style={{ width: '40%' }}
            className="btn-block mt-5 mx-auto"
          >
            Send
            <CDBIcon far icon="paper-plane" />
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default Forms;

Subscription Form with Outside Label

Subscribe

js
import React from 'react';
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from 'cdbreact';


const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: '30rem' }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4"> Subscribe </p>
          </div>
          <label htmlFor="defaultSubscribeName" className="text-muted m-0">
            Your name
          </label>
          <CDBInput id="defaultSubscribeName" className="mt-n3" type="text" />
          <label htmlFor="defaultSubscribeEmail" className="text-muted m-0">
            Your email
          </label>
          <CDBInput id="defaultSubscribeEmail" className="mt-n3" type="email" />
          <CDBBtn
            outline
            color="danger"
            style={{ width: '40%' }}
            className="btn-block mt-5 mx-auto"
          >
            Send
            <CDBIcon far icon="paper-plane" />
          </CDBBtn