All Collections
Publishing feedback
Styling widgets with custom CSS
Styling widgets with custom CSS
Cory Brown avatar
Written by Cory Brown
Updated over a week ago

Plan availability: βœ“ Pro βœ“ Elite βœ“ Enterprise

Custom CSS gives you full control over your web survey's styling, including background images, colors, fonts, and all the other little things that make your brand unique.

To customize the CSS, edit any widget and find the Custom CSS section:

Then, add any CSS rules as you normally would to stylize a web page.

For example, let's say you wanted testimonials to have this funky linear gradient background:

To achieve that effect, you'd target the .testimonial class and add the rule:

.testimonial {
background-image: linear-gradient(64deg, #dcf9e6, #ddcbff);
}

The easiest way to find which classes target is usually to inspect elements using Chrome or Firefox:

Here's a list of classes to help get you started quicker. πŸ˜‰

.testimonials {
width: 600px;
}

.testimonial {
padding: 40px;
}

.header {
margin-top: 30px;
}

.icons {
transform: rotate(20deg);
}

.body {
font-family: monospace;
}

.footer {
margin-top: 20px;
}

.source {
text-decoration: underline;
}

.customer {
font-family: cursive;
}

.date {
transform: rotate(358deg);
}

If you have any questions or need help styling your widgets, just let us know and we'll be happy to help! πŸ˜‰

Did this answer your question?