Feedback form

The feedback form allows multiple custom fields to be captured in the same UI element, all submitted at the same time. For example, it can be used to confirm information collected throughout the conversation.

1const FeedbackForm = () => {
2  const handler = useConversationHandler();
3  const [firstName, setFirstName] = useState("");
4  const [lastName, setLastName] = useState("");
5  const [email, setEmail] = useState("");
6  const [feedback, setFeedback] = useState("");
7
8  const [submitted, setSubmitted] = useState<boolean>(false);
9
10  return html`
11    <form
12      className="chat-feedback-form"
13      onSubmit=${(event) => {
14        event.preventDefault();
15        setSubmitted(true);
16        handler?.sendSlots({
17          firstName,
18          lastName,
19          email,
20          feedback,
21        });
22      }}
23    >
24      <input
25        placeholder="First name"
26        required
27        disabled=${submitted}
28        value=${firstName}
29        onInput=${(ev: any) => {
30          setFirstName(ev.target.value);
31        }}
32      />
33      <input
34        placeholder="Last name"
35        required
36        disabled=${submitted}
37        value=${lastName}
38        onInput=${(ev: any) => {
39          setLastName(ev.target.value);
40        }}
41      />
42      <input
43        type="email"
44        required
45        placeholder="Email"
46        disabled=${submitted}
47        value=${email}
48        onInput=${(ev: any) => {
49          setEmail(ev.target.value);
50        }}
51      />
52      <textarea
53        placeholder="Feedback"
54        required
55        disabled=${submitted}
56        value=${feedback}
57        onInput=${(ev: any) => {
58          setFeedback(ev.target.value);
59        }}
60      />
61      ${!submitted &&
62        html`
63          <button type="submit">Submit</button>
64        `}
65    </form>
66  `;
67};