<FeedbackForm> Component

Share
Code Editor
<FeedbackForm
questions={[
{
id: 'helpful',
type: 'choice',
text: 'Was this tutorial helpful?',
answers: [
{
value: 'yes',
display: 'Yes',
nextQuestion: 'reasonForVisit',
},
{
value: 'no',
display: 'No',
nextQuestion: 'suggestedImprovements',
},
],
},
{
id: 'reasonForVisit',
type: 'text',
text: (
<>
<strong>Why did you visit this tutorial?</strong> (optional)
</>
),
buttonText: 'Complete Feedback',
},
{
id: 'suggestedImprovements',
type: 'text',
text: (
<>
<strong>How could this tutorial be more helpful?</strong> (optional)
</>
),
buttonText: 'Complete Feedback',
followupMessage: (
<>
<strong>We're sorry to hear that.</strong> Your feedback will help us
improve.
</>
),
},
]}
finished={
<>
<div className="g-callout alert alert-success">
<strong>Thank You! </strong>
Your feedback will help us improve our websites.
</div>
<div>
Are you interested in providing ongoing feedback to HashiCorp?{' '}
<a
href="https://hashicorp.sjc1.qualtrics.com/jfe/form/SV_9mXDsXs20OS2sCx"
rel="noreferrer"
target="_blank"
>
Join our User Research Group
</a>
</div>
</>
}
onQuestionSubmit={() => new Promise((resolve) => setTimeout(resolve, 1000))}
/>

Where it's used

0.x.x
Loading 0.x.x releases...

Props

NameDescription
questions*
array
The list of questions which are displayed to the user.
Array members must be of the type below:
questions[x]
object
Object contains nested props, see below:
questions[x].id*
string
A unique ID for the question. Referenced in other questions to control the flow of the form.
questions[x].type*
string
The type of question being declared, controls what props are needed and how the question is rendered.
Options: "choice", "text"
questions[x].text
React.Element
Text displayed immediately above the question input.
questions[x].buttonText
string
If type text, the text displayed on the submit button.
questions[x].followupMessage
React.Element
An optional message which is displayed above the question input.
questions[x].answers
array
Required if type is choice. Renders a button for each option.
Array members must be of the type below:
questions[x].answers[x]
object
Object contains nested props, see below:
questions[x].answers[x].value
string
questions[x].answers[x].display
string
questions[x].answers[x].nextQuestion
string
The id of the next question to render. If none, the form will transition to finished.
finished
React.element
Renders after all questions have been answered
onQuestionSubmit
function
Called each time a question is submitted