Survey form
React Bootstrap 5 Survey component
React Survey forms built with Bootstrap 5 and HTML. A variety of pre-made surveys, including multiple choice, questionnaire, checkbox survey, modal survey & more.
Basic examples
Single choice survey
Allow respondents to select a single option from a list of answers that you define using radio buttons.
import React from "react";
import { MDBBtn, MDBCol, MDBContainer, MDBRadio, MDBRow } from "mdb-react-ui-kit";
export default function Basic() {
return (
<MDBContainer>
<MDBRow className="justify-content-center">
<MDBCol size="5">
<form className="bg-white mt-3" action="">
<p className="fw-bold">How satisfied are you with our product?</p>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault1"
label="Option 1"
defaultChecked
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault2"
label="Option 2"
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault3"
label="Option 3"
/>
</form>
<div className="text-end">
<MDBBtn>Submit</MDBBtn>
</div>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
Multiple choice / Checkbox survey
Allow respondents to select one or more options from a list of answers that you define using checkboxes.
import React from "react";
import { MDBBtn, MDBCheckbox, MDBCol, MDBContainer, MDBRow } from "mdb-react-ui-kit";
export default function MultipleChoice() {
return (
<MDBContainer>
<MDBRow className="justify-content-center">
<MDBCol size="5">
<form className="bg-white mt-3" action="">
<p className="fw-bold">How satisfied are you with our product?</p>
<MDBCheckbox
name="flexRadioDefault"
id="flexRadioDefault1"
label="Option 1"
defaultChecked
/>
<MDBCheckbox
name="flexRadioDefault"
id="flexRadioDefault2"
label="Option 2"
/>
<MDBCheckbox
name="flexRadioDefault"
id="flexRadioDefault3"
label="Option 3"
/>
</form>
<div className="text-end">
<MDBBtn>Submit</MDBBtn>
</div>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
Survey within a card
You can put your survey inside of a card to make it stand out.
Your opinion matters
Have some ideas how to improve our product? Give us your feedback.
import React from "react";
import {
MDBBtn,
MDBCard,
MDBCardBody,
MDBCardFooter,
MDBCol,
MDBContainer,
MDBIcon,
MDBRadio,
MDBRow,
} from "mdb-react-ui-kit";
export default function Card() {
return (
<MDBContainer>
<MDBRow className="justify-content-center">
<MDBCol size="6">
<MDBCard>
<MDBCardBody>
<div className="text-center">
<MDBIcon far icon="file-alt mb-3 text-primary" size="4x" />
<p>
<strong>Your opinion matters</strong>
</p>
<p>
Have some ideas how to improve our product?
<strong>Give us your feedback.</strong>
</p>
</div>
<hr />
<form className="px-4" action="">
<p className="text-center">
<strong>Your rating:</strong>
</p>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault1"
label="Very good"
defaultChecked
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault2"
label="Good"
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault3"
label="Medicore"
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault4"
label="Bad"
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault5"
label="Very bad"
/>
</form>
</MDBCardBody>
<MDBCardFooter>
<div className="text-end">
<MDBBtn>Submit</MDBBtn>
</div>
</MDBCardFooter>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
Customer satisfaction survey
Customer satisfaction questionnaires are usually used to gather reviews, and sometimes at the end of a payment process.
We recommend you to add a textarea input to your survey, to let your users send more in-depth feedback.
Feedback request
Your opinion matters
Have some ideas how to improve our product? Give us your feedback.
import React from "react";
import {
MDBBtn,
MDBCard,
MDBCardBody,
MDBCardFooter,
MDBCol,
MDBContainer,
MDBIcon,
MDBRadio,
MDBRow,
MDBTextArea,
} from "mdb-react-ui-kit";
export default function CardWithFeedback() {
return (
<MDBContainer>
<MDBRow className="justify-content-center">
<MDBCol size="6">
<MDBCard>
<MDBCardBody>
<div className="text-center">
<MDBIcon far icon="file-alt mb-3 text-primary" size="4x" />
<p>
<strong>Your opinion matters</strong>
</p>
<p>
Have some ideas how to improve our product?
<strong>Give us your feedback.</strong>
</p>
</div>
<hr />
<form className="px-4" action="">
<p className="text-center">
<strong>Your rating:</strong>
</p>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault1"
label="Very good"
className="mb-2"
defaultChecked
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault2"
label="Good"
className="mb-2"
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault3"
label="Medicore"
className="mb-2"
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault4"
label="Bad"
className="mb-2"
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault5"
label="Very bad"
className="mb-2"
/>
<p className="text-center">
<strong>What could we improve?</strong>
</p>
<MDBTextArea className="mb-4" label='Message' id='textAreaExample' rows={4} />
</form>
</MDBCardBody>
<MDBCardFooter>
<div className="text-end">
<MDBBtn>Submit</MDBBtn>
</div>
</MDBCardFooter>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
Modal survey
Survey in a pop-up window using the modal component.
import React, { useState } from "react";
import {
MDBBtn,
MDBContainer,
MDBIcon,
MDBModal,
MDBModalBody,
MDBModalContent,
MDBModalDialog,
MDBModalFooter,
MDBModalHeader,
MDBModalTitle,
MDBRadio,
MDBTextArea,
} from "mdb-react-ui-kit";
export default function Modal() {
const [basicModal, setBasicModal] = useState(false);
const toggleShow = () => setBasicModal(!basicModal);
return (
<MDBContainer>
<div className="d-flex justify-content-center mt-5">
<MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
<MDBModal show={basicModal} setShow={setBasicModal} tabIndex="-1">
<MDBModalDialog>
<MDBModalContent>
<MDBModalHeader className="bg-primary">
<MDBModalTitle className="text-white">
Feedback request
</MDBModalTitle>
<MDBBtn
className="btn-close text-white"
color="none"
onClick={toggleShow}
></MDBBtn>
</MDBModalHeader>
<MDBModalBody>
<div className="text-center">
<MDBIcon far icon="file-alt mb-3 text-primary" size="4x" />
<p>
<strong>Your opinion matters</strong>
</p>
<p>
Have some ideas how to improve our product?
<strong>Give us your feedback.</strong>
</p>
</div>
<hr />
<form className="px-4" action="">
<p className="text-center">
<strong>Your rating:</strong>
</p>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault1"
label="Very good"
className="mb-2"
defaultChecked
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault2"
label="Good"
className="mb-2"
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault3"
label="Medicore"
className="mb-2"
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault4"
label="Bad"
className="mb-2"
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault5"
label="Very bad"
className="mb-2"
/>
<p className="text-center">
<strong>What could we improve?</strong>
</p>
<MDBTextArea
className="mb-4"
label="Message"
id="textAreaExample"
rows={4}
/>
</form>
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="primary" outline onClick={toggleShow}>
Close
</MDBBtn>
<MDBBtn>Submit</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</div>
</MDBContainer>
);
}
Stepper survey
Survey that displays content as a process with defined by user milestones. Check out more in the stepper documentation.
-
step1
-
step2
-
step3
import React from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBInput,
MDBTextArea,
MDBBtn,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper type='vertical'>
<MDBStepperStep headIcon={1} headText='step 1' itemId={1}>
<MDBInput
wrapperClass='mb-4'
type='email'
label='Your e-mail'
required
/>
</MDBStepperStep>
<MDBStepperStep headIcon={2} headText='step 2' itemId={2}>
<MDBTextArea label='Your feedback' id='textAreaExample' rows={4} />
</MDBStepperStep>
<MDBStepperStep headIcon={3} headText='step 3' itemId={3}>
<MDBBtn>Submit</MDBBtn>
</MDBStepperStep>
</MDBStepper>
);
}
Rating survey
Survey in which you give the user an option to rate using a star rating or different icons.
import React from "react";
import {
MDBBtn,
MDBCard,
MDBCardBody,
MDBCardFooter,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBTextArea,
} from "mdb-react-ui-kit";
export default function Rating() {
return (
<MDBContainer>
<MDBRow className="justify-content-center">
<MDBCol size="3">
<MDBCard className="mt-5">
<MDBCardBody>
<form action="">
<p className="text-center">
<strong>How do you rate customer support:</strong>
</p>
<div className="d-flex justify-content-center my-4">
<MDBIcon far icon="star" size="lg" className="text-primary mx-1" />
<MDBIcon far icon="star" size="lg" className="text-primary mx-1" />
<MDBIcon far icon="star" size="lg" className="text-primary mx-1" />
<MDBIcon far icon="star" size="lg" className="text-primary mx-1" />
<MDBIcon far icon="star" size="lg" className="text-primary mx-1" />
</div>
<p className="text-center">
<strong>What could we improve?</strong>
</p>
<MDBTextArea label="Your feedback" rows={4} />
</form>
</MDBCardBody>
<MDBCardFooter>
<div className="text-end">
<MDBBtn>Submit</MDBBtn>
</div>
</MDBCardFooter>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
Linear scale survey
Survey with horizontaly aligned radio buttons in a form of a scale.
How do you rate customer support
Bad
Excellent
import React from "react";
import { MDBBtn, MDBContainer, MDBRadio } from "mdb-react-ui-kit";
export default function Scale() {
return (
<MDBContainer className="d-flex justify-content-center">
<div className="mx-0 mx-sm-auto">
<form className="bg-white mt-3" action="">
<p className="fw-bold text-center">
How satisfied are you with our product?
</p>
<div className="text-center">
<div className="d-inline mx-3">Bad</div>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault1"
label="1"
inline
defaultChecked
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault2"
label="2"
inline
defaultChecked
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault3"
label="3"
inline
defaultChecked
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault4"
label="4"
inline
defaultChecked
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault5"
label="5"
inline
defaultChecked
/>
<MDBRadio
name="flexRadioDefault"
id="flexRadioDefault6"
label="6"
inline
defaultChecked
/>
<div className="d-inline mx-3">Excellent</div>
</div>
</form>
<div className="text-end">
<MDBBtn>Submit</MDBBtn>
</div>
</div>
</MDBContainer>
);
}
Ranking survey
Ranking survey built using a buttons group.
How likely if it that you would recommend MDB to a friend or colleague?
import React from "react";
import { MDBBtn, MDBBtnGroup, MDBContainer } from "mdb-react-ui-kit";
export default function Ranking() {
return (
<MDBContainer className="d-flex justify-content-center">
<div className="mx-0 mx-sm-auto">
<p className="fw-bold text-center">
How likely if it that you would recommend MDB to a friend or
colleague?
</p>
<MDBBtnGroup aria-label="Basic example" className="me-2">
<MDBBtn color="light">0</MDBBtn>
<MDBBtn color="light">2</MDBBtn>
<MDBBtn color="light">3</MDBBtn>
<MDBBtn color="light">4</MDBBtn>
<MDBBtn color="light">5</MDBBtn>
<MDBBtn color="light">6</MDBBtn>
<MDBBtn color="light">7</MDBBtn>
<MDBBtn color="light">8</MDBBtn>
<MDBBtn color="light">9</MDBBtn>
<MDBBtn color="light">10</MDBBtn>
</MDBBtnGroup>
<div className="text-end mt-3">
<MDBBtn>Submit</MDBBtn>
</div>
</div>
</MDBContainer>
);
}
Range survey
Slide to choose the appropriate number that can represent the score on a range slider.
Drag the slider to select the number
import React from "react";
import { MDBBtn, MDBContainer, MDBRange } from "mdb-react-ui-kit";
export default function Range() {
return (
<MDBContainer style={{ maxWidth: "800px" }}>
<div className="mx-0 mx-sm-auto">
<p className="fw-bold text-center">
Drag the slider to select the number
</p>
<label htmlFor="customRange3" className="form-label">
Bad
</label>
<label htmlFor="customRange3" className="form-label float-end">
Excellent
</label>
<MDBRange min="0" max="6" step="1" id="customRange3" />
<div className="text-end mt-3">
<MDBBtn>Submit</MDBBtn>
</div>
</div>
</MDBContainer>
);
}