Integrating component

Before we start

Make sure you created form and added field to it. If you didn't do that yet start with creating form.

Setup

💡

In beta only React is supported. Please let me know with what framework you want to use feedback forms.

Add Form component from @happyreact/react package. Component is written in Stencil (opens in a new tab) so you need to run defineCustomeElements() before using it.

Feedback.tsx

import { Widget, Form, defineCustomElements } from '@happyreact/react';
 
defineCustomElements();
 
interface FeedbackProps {
  resource: string;
}
 
const Feedback: React.FC<FeedbackProps> = ({ resource }) => {};

Add <Form /> after Widget component.

<Form />

When you add <Form /> component <Widget /> automatically detects this and reveal feedback form when you click on reaction. You should see something like this after you click on the reaction you connected feedback form with.

Next you need to add styling to the form. You can make it in 2 ways. Both are giving the same results:

I'm using tailwind so I choose to add classes props. Feedback form component code:

<Form
  classes={{
    root: 'flex justify-center text-primary mt-6',
    container: 'w-full container',
    content: 'mb-4',
    label: 'mb-2',
    labelText: 'text-lg',
    formHeader: 'hidden',
    field: 'flex flex-wrap',
    input:
      'w-full h-48 min-h-full mb-1 p-2 rounded-md border border-gray-400 hover:border-black dark:hover:border-white dark:bg-transparent',
    inputHint: 'text-gray-600 mb-2 w-1/2 dark:text-gray-400',
    inputError: 'text-red w-1/2 text-right',
    submit:
      'mt-4 px-3 py-1 text-primary rounded-md border border-gray-400 hover:border-black dark:hover:border-white',
    success:
      'flex flex-col px-4 py-8 items-center rounded-md border border-black dark:border-white',
    successIcon: 'text-4xl mb-2'
  }}
/>

Result:

In next chapter you will learn how to check feedback form submission.

Was this page helpful?

Success content Submissions