# Feedback

> Feedback components for collecting user feedback with forms and ratings.

Web: https://react.email/components/feedback

Paste any snippet into an email built with React Email. The snippets use the primitives from `@react-email/components`.

## Simple rating survey

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/simple-rating-survey

### Tailwind

```tsx
<Html>
  <Head />
  <Body>
    <Preview>
      How satisfied were you overall with the initial conversation about your
      claim?
    </Preview>
    <Container className="mx-auto max-w-[600px] rounded-[8px] bg-white px-[42px] py-[24px]">
      <Heading className="mb-[16px] text-[24px] leading-[32px]">
        How satisfied were you overall with the initial conversation about
        your claim?
      </Heading>
      <Text className="mb-[42px] text-gray-500 text-[14px] leading-[24px]">
        Your feedback is important to us and it will be used to better serve
        our customers.
      </Text>
      <Section className="max-w-[300px]">
        <Row>
          <Column className="w-[100px] text-center">
            <Text className="ml-[12px] text-left text-[rgb(68,68,68)] text-[12px] leading-none">
              Dissatisfied
            </Text>
          </Column>
          <Column className="w-[100px] text-center">
            <Text className="mr-[12px] text-right text-[rgb(68,68,68)] text-[12px] leading-none">
              Satisfied
            </Text>
          </Column>
        </Row>
      </Section>
      <Section className="mt-[12px] mb-[24px]" align="center">
        <Row width={undefined}>
          {Array.from({ length: 5 }).map((_, i) => (
            <Column
              key={i}
              width="51"
              height="43"
              className="w-[51px] h-[43px] px-[4px]"
              align="center"
              valign="middle"
            >
              <Button
                href={`?rating=${i + 1}`}
                className="box-border w-[43px] h-[43px] rounded-[6px] bg-indigo-600 p-[12px] m-0 text-center font-semibold text-[16px] text-white leading-none"
              >
                {i + 1}
              </Button>
            </Column>
          ))}
        </Row>
      </Section>
      <Section>
        <Hr />
        <Text className="mt-[30px] text-center font-medium text-gray-500 text-[12px] leading-[16px]">
          Customer Experience Research Team
        </Text>
      </Section>
    </Container>
  </Body>
</Html>
```

### Inline styles

```tsx
<Html>
  <Head />
  <Body>
    <Preview>
      How satisfied were you overall with the initial conversation about your
      claim?
    </Preview>
    <Container
      style={{
        backgroundColor: 'rgb(255,255,255)',
        borderRadius: '8px',
        marginLeft: 'auto',
        marginRight: 'auto',
        maxWidth: '600px',
        paddingLeft: '42px',
        paddingRight: '42px',
        paddingTop: '24px',
        paddingBottom: '24px',
      }}
    >
      <Heading
        style={{
          fontSize: '24px',
          lineHeight: '32px',
          marginBottom: '16px',
        }}
      >
        How satisfied were you overall with the initial conversation about
        your claim?
      </Heading>
      <Text
        style={{
          color: 'rgb(107,114,128)',
          fontSize: '14px',
          lineHeight: '24px',
          marginBottom: '42px',
        }}
      >
        Your feedback is important to us and it will be used to better serve
        our customers.
      </Text>
      <Section style={{ maxWidth: '300px' }}>
        <Row>
          <Column style={{ width: '100px', textAlign: 'center' }}>
            <Text
              style={{
                color: 'rgb(68,68,68)',
                fontSize: '12px',
                lineHeight: '1',
                marginLeft: '12px',
                textAlign: 'left',
              }}
            >
              Dissatisfied
            </Text>
          </Column>
          <Column style={{ width: '100px', textAlign: 'center' }}>
            <Text
              style={{
                color: 'rgb(68,68,68)',
                fontSize: '12px',
                lineHeight: '1',
                marginRight: '12px',
                textAlign: 'right',
              }}
            >
              Satisfied
            </Text>
          </Column>
        </Row>
      </Section>
      <Section
        style={{ marginTop: '12px', marginBottom: '24px' }}
        align="center"
      >
        <Row width={undefined}>
          {Array.from({ length: 5 }).map((_, i) => (
            <Column
              key={i}
              width="51"
              height="43"
              style={{
                width: 51,
                height: 43,
                paddingLeft: 4,
                paddingRight: 4,
              }}
              align="center"
              valign="middle"
            >
              <Button
                href={`?rating=${i + 1}`}
                style={{
                  backgroundColor: 'rgb(79,70,229)',
                  borderRadius: '6px',
                  boxSizing: 'border-box',
                  color: 'rgb(255,255,255)',
                  fontSize: '16px',
                  fontWeight: '600',
                  height: 43,
                  lineHeight: '1',
                  margin: '0px',
                  padding: '12px',
                  textAlign: 'center',
                  width: 43,
                }}
              >
                {i + 1}
              </Button>
            </Column>
          ))}
        </Row>
      </Section>
      <Section>
        <Hr />
        <Text
          style={{
            color: 'rgb(107,114,128)',
            fontSize: '12px',
            lineHeight: '16px',
            fontWeight: '500',
            marginTop: '30px',
            textAlign: 'center',
          }}
        >
          Customer Experience Research Team
        </Text>
      </Section>
    </Container>
  </Body>
</Html>
```

## Survey section

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/survey-section

### Tailwind

```tsx
<Section className="py-[16px] text-center">
  <Text className="my-[8px] font-semibold text-[18px] text-indigo-600 leading-[28px]">
    Your opinion matters
  </Text>
  <Heading
    as="h1"
    className="m-0 mt-[8px] font-semibold text-[30px] text-gray-900 leading-[36px]"
  >
    We want to hear you
  </Heading>
  <Text className="text-[16px] text-gray-700 leading-[24px]">
    How would you rate your experience using our product in a scale from 1 to
    5?
  </Text>
  <Row>
    <Column align="center">
      <table>
        <tr>
          {[1, 2, 3, 4, 5].map((number) => (
            <td align="center" className="p-[4px]" key={number}>
              <Button
                className="h-[20px] w-[20px] rounded-[8px] border border-indigo-600 border-solid p-[8px] font-semibold text-indigo-600"
                // Replace with the proper URL that saves the selected number
                href="https://react.email"
              >
                {number}
              </Button>
            </td>
          ))}
        </tr>
      </table>
    </Column>
  </Row>
</Section>
```

### Inline styles

```tsx
<Section
  style={{
    textAlign: 'center',
    paddingTop: 16,
    paddingBottom: 16,
  }}
>
  <Text
    style={{
      marginTop: 8,
      marginBottom: 8,
      fontSize: 18,
      lineHeight: '28px',
      fontWeight: 600,
      color: 'rgb(79,70,229)',
    }}
  >
    Your opinion matters
  </Text>
  <Heading
    as="h1"
    style={{
      margin: '0px',
      marginTop: 8,
      fontSize: 30,
      lineHeight: '36px',
      fontWeight: 600,
      color: 'rgb(17,24,39)',
    }}
  >
    We want to hear you
  </Heading>
  <Text
    style={{
      fontSize: 16,
      lineHeight: '24px',
      color: 'rgb(55,65,81)',
    }}
  >
    How would you rate your experience using our product in a scale from 1 to
    5?
  </Text>
  <Row>
    <Column align="center">
      <table>
        <tr>
          {[1, 2, 3, 4, 5].map((number) => (
            <td align="center" key={number} style={{ padding: 4 }}>
              <Button
                // Replace with the proper URL that saves the selected number
                href="https://react.email"
                style={{
                  height: 20,
                  width: 20,
                  borderRadius: 8,
                  borderWidth: 1,
                  borderStyle: 'solid',
                  borderColor: 'rgb(79,70,229)',
                  padding: 8,
                  fontWeight: 600,
                  color: 'rgb(79,70,229)',
                }}
              >
                {number}
              </Button>
            </td>
          ))}
        </tr>
      </table>
    </Column>
  </Row>
</Section>
```

## Customer reviews

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/customer-reviews

### Tailwind

```tsx
<Html>
  <Head />
  <Body>
    <Preview>Customer Reviews</Preview>
    <Container className="mx-auto max-w-[400px] rounded-[8px] bg-white px-[42px] py-[24px]">
      <Section>
        <Heading as="h1" className="text-[24px] leading-[32px]">
          Customer Reviews
        </Heading>
        <div className="mt-[12px] flex flex-col">
          <Text className="hidden">4 out of 5 stars</Text>
        </div>
        <Section className="my-[24px]">
          <Heading as="h2" className="hidden">
            Review data
          </Heading>
          <dl className="m-0">
            {[
              { rating: 5, count: 1019 },
              { rating: 4, count: 162 },
              { rating: 3, count: 97 },
              { rating: 2, count: 199 },
              { rating: 1, count: 147 },
            ].map(({ count, rating }) => (
              <Row
                key={rating}
                className="text-[14px] leading-[20px]"
                align="center"
              >
                <Column align="center" valign="middle">
                  <Row>
                    <Column>
                      <dt>
                        <Row>
                          <Column width={undefined}>
                            <Text className="w-[12px] font-medium text-gray-500">
                              {rating}
                              <span className="hidden"> star reviews</span>
                            </Text>
                          </Column>
                          <Column
                            width="264"
                            height="12"
                            className="w-[264px] h-[12px] pl-[12px]"
                            aria-hidden="true"
                            valign="middle"
                          >
                            <Row
                              width="264"
                              className="w-[264px] h-[12px] bg-gray-100 border-gray-200 border border-solid rounded-[6px]"
                            >
                              <Column
                                height="12"
                                className="h-[12px] bg-indigo-600 rounded-[6px]"
                                width={(count / 1624) * 264}
                                style={{
                                  width: `${(count / 1624) * 264}px`,
                                }}
                              />
                              <Column
                                width={(1 - count / 1624) * 264}
                                style={{
                                  width: `${(1 - count / 1624) * 264}px`,
                                }}
                              />
                            </Row>
                          </Column>
                        </Row>
                      </dt>
                    </Column>
                    <Column width="100%" className="w-full">
                      <dd className="ml-[12px] text-right font-medium text-gray-500 text-[12px] [font-variant-numeric:tabular-nums] leading-none">
                        {Math.round((count / 1624) * 100)}%
                      </dd>
                    </Column>
                  </Row>
                </Column>
              </Row>
            ))}
          </dl>
          <Text className="mt-[14px] text-center text-gray-500 text-[12px] leading-[24px]">
            Based on <span className="font-semibold">1624</span> Reviews
          </Text>
        </Section>
        <Hr />
        <Section className="mt-[30px]">
          <Heading
            as="h3"
            className="mb-[12px] font-medium text-gray-900 text-[18px] leading-[24px]"
          >
            Share your thoughts
          </Heading>
          <Text className="m-0 text-gray-500 text-[14px] leading-[20px]">
            If you’ve used this product, share your thoughts with other
            customers
          </Text>
          <Button
            href="#"
            className="mt-[26px] mb-[24px] inline-block w-full rounded-[8px] bg-indigo-600 p-[12px] text-center box-border font-semibold text-white"
          >
            Write a review
          </Button>
        </Section>
      </Section>
    </Container>
  </Body>
</Html>
```

### Inline styles

```tsx
<Html>
  <Head />
  <Body>
    <Preview>Customer Reviews</Preview>
    <Container
      style={{
        backgroundColor: 'rgb(255,255,255)',
        borderRadius: '8px',
        marginLeft: 'auto',
        marginRight: 'auto',
        maxWidth: '400px',
        paddingLeft: '42px',
        paddingRight: '42px',
        paddingTop: '24px',
        paddingBottom: '24px',
      }}
    >
      <Section>
        <Heading as="h1" style={{ fontSize: '24px', lineHeight: '32px' }}>
          Customer Reviews
        </Heading>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            marginTop: '12px',
          }}
        >
          <Text style={{ display: 'none' }}>4 out of 5 stars</Text>
        </div>
        <Section style={{ marginTop: '24px', marginBottom: '24px' }}>
          <Heading as="h2" style={{ display: 'none' }}>
            Review data
          </Heading>
          <dl style={{ margin: '0px' }}>
            {[
              { rating: 5, count: 1019 },
              { rating: 4, count: 162 },
              { rating: 3, count: 97 },
              { rating: 2, count: 199 },
              { rating: 1, count: 147 },
            ].map(({ count, rating }) => (
              <Row
                align="center"
                key={rating}
                style={{
                  fontSize: '14px',
                  lineHeight: '20px',
                }}
              >
                <Column align="center" valign="middle">
                  <Row>
                    <Column>
                      <dt>
                        <Row>
                          <Column width={undefined}>
                            <Text
                              style={{
                                color: 'rgb(107,114,128)',
                                fontWeight: '500',
                                width: '12px',
                              }}
                            >
                              {rating}
                              <span style={{ display: 'none' }}>
                                {' '}
                                star reviews
                              </span>
                            </Text>
                          </Column>
                          <Column
                            width="264"
                            height="12"
                            style={{
                              width: 264,
                              height: 12,
                              paddingLeft: 12,
                            }}
                            aria-hidden="true"
                            valign="middle"
                          >
                            <Row
                              aria-hidden="true"
                              width="264"
                              style={{
                                width: 264,
                                height: 12,
                                backgroundColor: 'rgb(243,244,246)',
                                border: '1px solid rgb(229,231,235)',
                                borderRadius: 6,
                              }}
                            >
                              <Column
                                height="12"
                                style={{
                                  backgroundColor: 'rgb(79,70,229)',
                                  borderRadius: 6,
                                  height: 12,
                                  width: `${(count / 1624) * 264}px`,
                                }}
                                width={(count / 1624) * 264}
                              />
                              <Column
                                width={(1 - count / 1624) * 264}
                                style={{
                                  width: `${(1 - count / 1624) * 264}px`,
                                }}
                              />
                            </Row>
                          </Column>
                        </Row>
                      </dt>
                    </Column>
                    <Column width="100%" style={{ width: '100%' }}>
                      <dd
                        style={{
                          color: 'rgb(107,114,128)',
                          fontSize: '12px',
                          fontVariantNumeric: 'tabular-nums',
                          fontWeight: '500',
                          lineHeight: '1',
                          marginLeft: 12,
                          textAlign: 'right',
                        }}
                      >
                        {Math.round((count / 1624) * 100)}%
                      </dd>
                    </Column>
                  </Row>
                </Column>
              </Row>
            ))}
          </dl>
          <Text
            style={{
              color: 'rgb(107,114,128)',
              fontSize: '12px',
              lineHeight: '24px',
              marginTop: '14px',
              textAlign: 'center',
            }}
          >
            Based on <span style={{ fontWeight: '600' }}>1624</span> Reviews
          </Text>
        </Section>
        <Hr />
        <Section style={{ marginTop: '30px' }}>
          <Heading
            as="h3"
            style={{
              color: 'rgb(17,24,39)',
              fontSize: '18px',
              fontWeight: '500',
              lineHeight: '24px',
              marginBottom: '12px',
            }}
          >
            Share your thoughts
          </Heading>
          <Text
            style={{
              color: 'rgb(107,114,128)',
              fontSize: '14px',
              lineHeight: '20px',
              margin: '0px',
            }}
          >
            If you’ve used this product, share your thoughts with other
            customers
          </Text>
          <Button
            href="#"
            style={{
              backgroundColor: 'rgb(79,70,229)',
              borderRadius: '8px',
              boxSizing: 'border-box',
              color: 'rgb(255,255,255)',
              display: 'inline-block',
              fontWeight: '600',
              marginTop: '26px',
              marginBottom: '24px',
              maxWidth: '100%',
              padding: '12px',
              textAlign: 'center',
              width: '100%',
            }}
          >
            Write a review
          </Button>
        </Section>
      </Section>
    </Container>
  </Body>
</Html>
```
