# Feedback

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

Web: https://vuemail.dev/components/feedback

Paste any snippet into an email built with Vuemail. The snippets are single file components that use the primitives from `@vuemaildev/vuemail`.

## Simple rating survey

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/simple-rating-survey

### Tailwind

```vue
<script setup lang="ts">
import {
  Body,
  Button,
  Column,
  Container,
  Head,
  Heading,
  Hr,
  Html,
  Preview,
  Row,
  Section,
  Text,
} from '@vuemaildev/vuemail';
</script>

<template>
  <Html>
    <Head />
    <Body>
      <Preview>
        How satisfied were you overall with the initial conversation about your
        claim?
      </Preview>
      <Container
        class="mx-auto max-w-[600px] rounded-[8px] bg-white px-[42px] py-[24px]"
      >
        <Heading class="mb-[16px] text-[24px] leading-[32px]">
          How satisfied were you overall with the initial conversation about
          your claim?
        </Heading>
        <Text class="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 class="max-w-[300px]">
          <Row>
            <Column class="w-[100px] text-center">
              <Text
                class="ml-[12px] text-left text-[rgb(68,68,68)] text-[12px] leading-none"
              >
                Dissatisfied
              </Text>
            </Column>
            <Column class="w-[100px] text-center">
              <Text
                class="mr-[12px] text-right text-[rgb(68,68,68)] text-[12px] leading-none"
              >
                Satisfied
              </Text>
            </Column>
          </Row>
        </Section>
        <Section class="mt-[12px] mb-[24px]" align="center">
          <Row :width="undefined">
            <Column
              v-for="rating in 5"
              :key="rating"
              width="51"
              height="43"
              class="w-[51px] h-[43px] px-[4px]"
              align="center"
              valign="middle"
            >
              <Button
                :href="`?rating=${rating}`"
                class="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"
              >{{ rating }}</Button>
            </Column>
          </Row>
        </Section>
        <Section>
          <Hr />
          <Text
            class="mt-[30px] text-center font-medium text-gray-500 text-[12px] leading-[16px]"
          >
            Customer Experience Research Team
          </Text>
        </Section>
      </Container>
    </Body>
  </Html>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import {
  Body,
  Button,
  Column,
  Container,
  Head,
  Heading,
  Hr,
  Html,
  Preview,
  Row,
  Section,
  Text,
} from '@vuemaildev/vuemail';
</script>

<template>
  <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">
            <Column
              v-for="rating in 5"
              :key="rating"
              width="51"
              height="43"
              :style="{
                width: '51px',
                height: '43px',
                paddingLeft: '4px',
                paddingRight: '4px',
              }"
              align="center"
              valign="middle"
            >
              <Button
                :href="`?rating=${rating}`"
                :style="{
                  backgroundColor: 'rgb(79,70,229)',
                  borderRadius: '6px',
                  boxSizing: 'border-box',
                  color: 'rgb(255,255,255)',
                  fontSize: '16px',
                  fontWeight: '600',
                  height: '43px',
                  lineHeight: '1',
                  margin: '0px',
                  padding: '12px',
                  textAlign: 'center',
                  width: '43px',
                }"
              >{{ rating }}</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>
</template>
```

## Survey section

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/survey-section

### Tailwind

```vue
<script setup lang="ts">
import {
  Button,
  Column,
  Heading,
  Row,
  Section,
  Text,
} from '@vuemaildev/vuemail';
</script>

<template>
  <Section class="py-[16px] text-center">
    <Text
      class="my-[8px] font-semibold text-[18px] text-indigo-600 leading-[28px]"
    >
      Your opinion matters
    </Text>
    <Heading
      as="h1"
      class="m-0 mt-[8px] font-semibold text-[30px] text-gray-900 leading-[36px]"
    >
      We want to hear you
    </Heading>
    <Text class="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>
          <tbody>
            <tr>
              <td
                v-for="number in 5"
                :key="number"
                align="center"
                class="p-[4px]"
              >
                <!-- Replace with the proper URL that saves the selected number -->
                <Button
                  class="h-[20px] w-[20px] rounded-[8px] border border-indigo-600 border-solid p-[8px] font-semibold text-indigo-600"
                  href="https://vuemail.dev"
                >{{ number }}</Button>
              </td>
            </tr>
          </tbody>
        </table>
      </Column>
    </Row>
  </Section>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import {
  Button,
  Column,
  Heading,
  Row,
  Section,
  Text,
} from '@vuemaildev/vuemail';
</script>

<template>
  <Section
    :style="{ textAlign: 'center', paddingTop: '16px', paddingBottom: '16px' }"
  >
    <Text
      :style="{
        marginTop: '8px',
        marginBottom: '8px',
        fontSize: '18px',
        lineHeight: '28px',
        fontWeight: 600,
        color: 'rgb(79,70,229)',
      }"
    >
      Your opinion matters
    </Text>
    <Heading
      as="h1"
      :style="{
        margin: '0px',
        marginTop: '8px',
        fontSize: '30px',
        lineHeight: '36px',
        fontWeight: 600,
        color: 'rgb(17,24,39)',
      }"
    >
      We want to hear you
    </Heading>
    <Text
      :style="{ fontSize: '16px', 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>
          <tbody>
            <tr>
              <td
                v-for="number in 5"
                :key="number"
                align="center"
                :style="{ padding: '4px' }"
              >
                <!-- Replace with the proper URL that saves the selected number -->
                <Button
                  href="https://vuemail.dev"
                  :style="{
                    height: '20px',
                    width: '20px',
                    borderRadius: '8px',
                    borderWidth: '1px',
                    borderStyle: 'solid',
                    borderColor: 'rgb(79,70,229)',
                    padding: '8px',
                    fontWeight: 600,
                    color: 'rgb(79,70,229)',
                  }"
                >{{ number }}</Button>
              </td>
            </tr>
          </tbody>
        </table>
      </Column>
    </Row>
  </Section>
</template>
```

## Customer reviews

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/customer-reviews

### Tailwind

```vue
<script setup lang="ts">
import {
  Body,
  Button,
  Column,
  Container,
  Head,
  Heading,
  Hr,
  Html,
  Preview,
  Row,
  Section,
  Text,
} from '@vuemaildev/vuemail';

const ratings = [
  { rating: 5, count: 1019 },
  { rating: 4, count: 162 },
  { rating: 3, count: 97 },
  { rating: 2, count: 199 },
  { rating: 1, count: 147 },
];
</script>

<template>
  <Html>
    <Head />
    <Body>
      <Preview>Customer Reviews</Preview>
      <Container
        class="mx-auto max-w-[400px] rounded-[8px] bg-white px-[42px] py-[24px]"
      >
        <Section>
          <Heading as="h1" class="text-[24px] leading-[32px]">
            Customer Reviews
          </Heading>
          <div class="mt-[12px] flex flex-col">
            <Text class="hidden">4 out of 5 stars</Text>
          </div>
          <Section class="my-[24px]">
            <Heading as="h2" class="hidden">Review data</Heading>
            <dl class="m-0">
              <Row
                v-for="{ count, rating } in ratings"
                :key="rating"
                class="text-[14px] leading-[20px]"
                align="center"
              >
                <Column align="center" valign="middle">
                  <Row>
                    <Column>
                      <dt>
                        <Row>
                          <Column :width="undefined">
                            <Text class="w-[12px] font-medium text-gray-500">
                              {{ rating }}<span class="hidden"> star reviews</span>
                            </Text>
                          </Column>
                          <Column
                            width="264"
                            height="12"
                            class="w-[264px] h-[12px] pl-[12px]"
                            aria-hidden="true"
                            valign="middle"
                          >
                            <Row
                              width="264"
                              class="w-[264px] h-[12px] bg-gray-100 border-gray-200 border border-solid rounded-[6px]"
                            >
                              <Column
                                height="12"
                                class="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%" class="w-full">
                      <dd
                        class="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
              class="mt-[14px] text-center text-gray-500 text-[12px] leading-[24px]"
            >
              Based on <span class="font-semibold">1624</span> Reviews
            </Text>
          </Section>
          <Hr />
          <Section class="mt-[30px]">
            <Heading
              as="h3"
              class="mb-[12px] font-medium text-gray-900 text-[18px] leading-[24px]"
            >
              Share your thoughts
            </Heading>
            <Text class="m-0 text-gray-500 text-[14px] leading-[20px]">
              If you’ve used this product, share your thoughts with other
              customers
            </Text>
            <Button
              href="#"
              class="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>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import {
  Body,
  Button,
  Column,
  Container,
  Head,
  Heading,
  Hr,
  Html,
  Preview,
  Row,
  Section,
  Text,
} from '@vuemaildev/vuemail';

const ratings = [
  { rating: 5, count: 1019 },
  { rating: 4, count: 162 },
  { rating: 3, count: 97 },
  { rating: 2, count: 199 },
  { rating: 1, count: 147 },
];
</script>

<template>
  <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' }">
              <Row
                v-for="{ count, rating } in ratings"
                :key="rating"
                align="center"
                :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: '264px',
                              height: '12px',
                              paddingLeft: '12px',
                            }"
                            aria-hidden="true"
                            valign="middle"
                          >
                            <Row
                              aria-hidden="true"
                              width="264"
                              :style="{
                                width: '264px',
                                height: '12px',
                                backgroundColor: 'rgb(243,244,246)',
                                border: '1px solid rgb(229,231,235)',
                                borderRadius: '6px',
                              }"
                            >
                              <Column
                                height="12"
                                :style="{
                                  backgroundColor: 'rgb(79,70,229)',
                                  borderRadius: '6px',
                                  height: '12px',
                                  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: '12px',
                          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>
</template>
```
