Survey form

React 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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

1 step1

Your e-mail
2 step2

Feedback
3 step3

Show code

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.

Show code

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

Show code

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?

Show code

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

Bad Excellent

Show code

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>
  );
}

Survey form

React Survey component

Basic examples

Single choice survey

Multiple choice / Checkbox survey

Survey within a card

Customer satisfaction survey

Feedback request

Modal survey

Stepper survey

Rating survey

Linear scale survey

Ranking survey

Range survey

Related resources