← Back to Blocks
Surveys
Collect feedback with rating scales, satisfaction surveys, and review displays.
Satisfaction Survey
import { Container, Link, Heading, Section, Text, Tailwind } from 'jsx-email';
<Tailwind>
<Container className="mx-auto max-w-[600px]">
<Section className="rounded-2xl bg-white px-10 py-10">
<Heading as="h2" className="m-0 text-xl font-bold text-gray-900">
How satisfied were you overall with the initial conversation about your claim?
</Heading>
<Text className="m-0 mt-3 text-sm text-gray-500">
Your feedback is important to us and it will be used to better serve our customers.
</Text>
<Section className="mt-10">
<table cellPadding="0" cellSpacing="0" style={{ margin: '0 auto' }}>
<tr>
<td style={{ paddingRight: '60px' }}>
<Text className="m-0 text-xs text-gray-400">Dissatisfied</Text>
</td>
<td style={{ paddingLeft: '60px', textAlign: 'right' }}>
<Text className="m-0 text-xs text-gray-400">Satisfied</Text>
</td>
</tr>
</table>
<table cellPadding="0" cellSpacing="0" style={{ margin: '8px auto 0' }}>
<tr>
<td style={{ padding: '0 3px' }}>
<Link href="https://example.com/rate?score=1" style={{
display: 'inline-block',
width: '44px',
height: '44px',
lineHeight: '44px',
backgroundColor: '#6366f1',
borderRadius: '8px',
textAlign: 'center',
color: '#ffffff',
fontSize: '16px',
fontWeight: '500',
textDecoration: 'none'
}}>1</Link>
</td>
{/* Repeat for 2, 3, 4, 5 */}
</tr>
</table>
</Section>
<Section className="mt-10 border-t border-gray-200 pt-5">
<Text className="m-0 text-center text-xs text-gray-400">
Customer Experience Research Team
</Text>
</Section>
</Section>
</Container>
</Tailwind>Survey Section
import { Container, Link, Heading, Section, Text, Tailwind } from 'jsx-email';
<Tailwind>
<Container className="mx-auto max-w-[600px]">
<Section className="rounded-2xl bg-white px-10 py-10 text-center">
<Text className="m-0 text-sm font-semibold text-indigo-500">Your opinion matters</Text>
<Heading as="h2" className="m-0 mt-2 text-2xl font-bold text-gray-900">
We want to hear you
</Heading>
<Text className="m-0 mt-3 text-sm text-gray-500">
How would you rate your experience using our product in a scale from 1 to 5?
</Text>
<table cellPadding="0" cellSpacing="0" style={{ margin: '24px auto 0' }}>
<tr>
<td style={{ padding: '0 4px' }}>
<Link href="https://example.com/rate?score=1" style={{
display: 'inline-block',
width: '40px',
height: '40px',
lineHeight: '38px',
backgroundColor: '#ffffff',
border: '1px solid #6366f1',
borderRadius: '8px',
textAlign: 'center',
color: '#6366f1',
fontSize: '14px',
fontWeight: '500',
textDecoration: 'none'
}}>1</Link>
</td>
{/* Repeat for 2, 3, 4, 5 */}
</tr>
</table>
</Section>
</Container>
</Tailwind>Customer Reviews
import { Heading, Section, Text, Tailwind } from 'jsx-email';
<Tailwind>
<Section className="mx-auto max-w-[320px] rounded-2xl bg-white px-6 py-8">
<Heading as="h2" className="m-0 text-xl font-bold text-gray-900">Customer Reviews</Heading>
<Section className="mt-8">
{/* Rating row with progress bar */}
<table cellPadding="0" cellSpacing="0" style={{ width: '100%', marginBottom: '12px' }}>
<tr>
<td style={{ width: '24px', verticalAlign: 'middle' }}>
<Text className="m-0 text-sm text-gray-600">5</Text>
</td>
<td style={{ verticalAlign: 'middle', padding: '0 12px' }}>
<div style={{
width: '100%',
height: '10px',
backgroundColor: '#e5e7eb',
borderRadius: '999px',
overflow: 'hidden'
}}>
<div style={{
width: '63%',
height: '10px',
backgroundColor: '#6366f1',
borderRadius: '999px'
}} />
</div>
</td>
<td style={{ width: '40px', verticalAlign: 'middle', textAlign: 'right' }}>
<Text className="m-0 text-sm text-gray-500">63%</Text>
</td>
</tr>
</table>
{/* Repeat for 4, 3, 2, 1 stars */}
</Section>
<Text className="m-0 mt-8 text-center text-xs text-gray-400">
Based on <strong>1624</strong> Reviews
</Text>
</Section>
</Tailwind>