<FeedbackForm>
Component<FeedbackFormquestions={[{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 usimprove.</>),},]}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?{' '}<ahref="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))}/>
Name | Description |
---|---|
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. |
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 |