Custom CSS for Surveys

The Custom CSS feature lets you inject your own CSS rules into public survey pages. This is ideal for:

• Brand consistency: Match your surveys to your company's visual identity
• Enhanced user experience: Create custom layouts, animations, or interactive elements
• A/B testing: Test different visual styles to improve response rates
• Unique designs: Build survey experiences that stand out

If you are comfortable writing CSS, this feature gives you unlimited creative freedom to style your surveys.

To add custom CSS to a survey:

1. Navigate to Surveys in the left sidebar
2. Select the survey you want to customize
3. Click the Settings tab in the survey builder
4. Scroll down to the Custom CSS section
5. Enter your CSS code in the textarea
6. Click Save Survey to apply your changes

Your CSS will be applied to the public survey page. Note that custom CSS is not shown in the builder preview — to see your changes live, send a test survey to yourself.

demeterrr provides four CSS classes you can target to style different parts of your survey page:

You can also target standard HTML elements like body, button, input, and label, but be aware this may affect other page elements.

Add a gradient background to your survey page:

.survey-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Apply your brand colors to the survey card and header:

.survey-card {
  background-color: #f8f9fa;
  border: 2px solid #0066cc;
}

.survey-header {
  background-color: #0066cc;
  color: white;
  padding: 2rem;
  border-radius: 12px 12px 0 0;
}

.survey-title {
  color: white;
  font-weight: 700;
}

Create a softer look with rounded corners:

.survey-card {
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

Use your brand's custom fonts (make sure to import them first):

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

.survey-card {
  font-family: 'Inter', sans-serif;
}

.survey-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

Create a modern glass effect:

.survey-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

If your survey is part of a sequence, you can also add sequence-level CSS in the sequence editor. When both are present:

• Survey-level CSS is applied first
• Sequence-level CSS is applied second (and can override survey CSS)
• Both stylesheets are merged together on the public page

This allows you to set default styling at the sequence level while still customizing individual surveys as needed. Sequence CSS has a 10,000 character limit.

Always preview your surveys on mobile devices. Custom CSS may affect responsive behavior, so ensure your styles work across all screen sizes.

/* Example: Mobile-responsive padding */
@media (max-width: 640px) {
  .survey-card {
    padding: 1rem;
  }
}

Use your browser's developer tools (right-click → Inspect) on the public survey page to test CSS changes live before adding them to the survey settings. This speeds up the design process significantly.

Complex CSS can slow down page load times and may cause rendering issues. Start with simple styles and add complexity incrementally.

For maximum browser compatibility, use vendor prefixes for newer CSS properties:

.survey-card {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

Always send a test survey to yourself after adding custom CSS to ensure everything displays correctly before sending to real contacts.

The survey builder does not show a live preview of your custom CSS. You must use the Preview button or send a test to see your changes applied.

demeterrr does not validate or sanitize your CSS. Invalid CSS may break your survey's appearance. Always test thoroughly.

Custom CSS is set per-survey (or per-sequence). There is no global organization-level CSS setting. If you want consistent styling across all surveys, consider creating a sequence with default CSS.

Your CSS is injected directly into the page without scoping. Be careful with broad selectors like body or * as they may have unintended effects.

For more information on survey customization, see Survey Settings or Previewing Your Survey.