React bootstrap 5 form- How to create React Bootstrap 5 Forms

By Emmanuel Chinonso

Web Developer

Last updated: 17 June 2024

React Bootstrap 5 Forms

For today's web developers, understanding how to make forms in React with Bootstrap 5 is a must-have. This guide will teach you step-by-step how to build forms that look good and work well in React with Bootstrap 5, making your apps both easy to use and nice to look at.

How to create React Bootstrap 5 forms using CDBReact.

React Bootstrap forms are versatile components designed to collect user data, such as login, subscription, and contact forms. These forms are highly customizable and essential for many projects.

Contrast, also known as CDBReact, is a React library that provides an elegant UI kit with full Bootstrap support. It includes reusable components for building mobile-first, responsive websites and web apps.

To create responsive forms using Contrast Bootstrap 5, you can utilize predefined templates for logins, registrations, subscriptions, and contact forms. For advanced features, consider downloading the pro version of Contrast.

Prerequisites

Before starting, make sure you have the following:

Basic knowledge of React.js
Familiarity with Bootstrap 5
Node.js and npm installed on your computer

Setup

First Check that you have the node installed. To do this, run the following command in your terminal.

bash

node - v;

This should show you the current version of the node you have installed on your machine. If you don’t have a node installed, download it here.

Installing node also installs npm on your PC, but you can still confirm using npm-v. Now that we have the node installed, we can start up our React project by going to the directory of our choice and running.

bash

npx create-react-app signin-app

I named the project sign in-app, but you can use any name of your choice.

Install CDBReact

Now, we have to install CDBReact in our project

Run the following command to install CBDReact using NPM

bash

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

bash

yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

React boostrap 5 Form Examples

React bootstrap 5 Sign-in Form

Let us go ahead to create a file named signin.js which would contain our signin component. We will be writing our code here. Import the various components that we’ll be using for our signin.

import React from "react";
import {
  CDBInput,
  CDBCard,
  CDBCardBody,
  CDBIcon,
  CDBBtn,
  CDBLink,
  CDBContainer } from "cdbreact-pro";

In the code above, we imported the react from react, and we also imported

CDBInput is used to build the input component
CDBCard is used to build the card structure of the sign in
CDBCardBody used to build the body of the sign in
CDBIcon is a component that allows you to add icons to the sign in
CDBBtn is the component that is used to build buttons in the sign in
CDBLink is the component that is used to build links for the sign in
CDBContainer is a component that holds the entire components used in building the sign in components from contrast.

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="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;

We created the sign-in form in the code above and included some styling in the different components to make them more appealing.

However, we must first render our component before we can see it displayed on our screen.

import './App.css';
import Forms from './signin';
import Reactdom from "react-dom";
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <Forms />
      </div>
    </Router>
  );
}

export default App;

Preview

React bootstrap 5 Sign up form

The sign up form is used in several web apps to register for anything or even to recognize users on a platform. An example of such sign up form is the google form login.

Let's go ahead to create a file named signup.js which would contain our signup component. We will be writing our code here. Import the various signup components that we’ll be using.

import React from "react";
import {
  CDBInput,
  CDBCard,
  CDBCardBody,
  CDBIcon,
  CDBBtn,
  CDBLink,
  CDBContainer } from "cdbreact-pro";

In the code above, we imported the react from react, and we also imported

CDBInput is used to build the input component
CDBCard is used to build the card structure of the sign in
CDBCardBody used to build the body of the sign in
CDBIcon is a component that allows you to add icons to the sign in
CDBBtn is the component that is used to build buttons in the sign in
CDBLink is the component that is used to build links for the sign in
CDBContainer is a component that holds the entire components used in building the sign in components from contrast.

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-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="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;

In the code above, the different components are used to create the body of the signup contact form. We also included some styling and added social media contact on the signup page.

The next step is to render the signup form in our app.js file.

import './App.css';
import Forms from './signup';
import Reactdom from "react-dom";
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
       <Forms  />
      </div>
    </Router>
  );
}

export default App;

Preview

Newsletter subscription

The newsletter subscription page will house your contact information to help business owners easily reach their customers and subscribers.

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

In the code above, we imported the react from react and we also imported

CDBInput is used to build the input component
CDBCard is used to build the card structure of the sign in
CDBCardBody used to build the body of the sign in
CDBIcon is a component that allows you to add icons to the sign in
CDBBtn is the component that is used to build buttons in the sign in
CDBLink is the component that is used to build links for the sign in
CDBContainer is a component that holds the entire components used in building the sign-in components from contrast.

Now, we are going to write the function that will display the newsletter subscription form.

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;

We added some styling to the components of the newsletter contact form and links to the social media contact.

import './App.css';
import Forms from './newsletter';
import Reactdom from "react-dom";
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
       <Forms  />
      </div>
    </Router>
  );
}
Reactdom.render(<App />, document.getElementById('root'));

In the code above, we rendered the newsletter file in app.js. This doesn’t require a pro version.

Preview

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

See the last newsletter

Conclusion

React and Bootstrap 5 make a powerful combination for creating responsive and interactive forms. By following this guide, you can build forms that are both functional and attractive using Contrast to build it faster with less Code.

Resources

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

How to create a React datepicker.

How to create a beautiful React multiselect.