Brand Your Survey Header
Make your surveys look great and stand out with your brand's own design language. Create a custom survey title, description, and logo for your survey header to make the entire form look more professional and increase brand recognition. This demo shows how to add a survey title, description, and your company logo to the survey header. Read more...
Make your surveys look great and stand out with your brand's own design language. Create a custom survey title, description, and logo for your survey header to make the entire form look more professional and increase brand recognition. This demo shows how to add a survey title, description, and your company logo to the survey header.
Add a Title and Description to the Survey Header
To add a short survey title, assign it to SurveyModel
's title
property. You can also display a longer survey description under the title. Use the description
property to specify description text.
If you need to specify title visibility, use the Boolean showTitle
property. Note that this property also specifies description visibility because a description cannot be displayed without a title. Click the "Show survey title" checkbox to show or hide the survey title and description in this demo.
Add Your Logo to the Survey Header
To add your logo to the survey header, assign an image URL or a Base64-encoded image to SurveyModel
's logo
property. You can use the logoWidth
and logoHeight
properties to specify logo dimensions. In this demo, you can use the "Logo width" and "Logo height" settings to change the logoWidth
and logoHeight
property values.
A logo image is positioned on the left side of the survey title. If you want to move it to the right side, set the logoPosition
property to "right"
. The same property can be set to "none"
if you want to hide your logo. This demo allows you to change the logoPosition
property at runtime.
A logo can be automatically resized to fit into its container. Set the logoFit
property to specify the mode used to resize the logo: "contain"
(default), "cover"
, "fill"
, or "none"
. Refer to the object-fit
CSS property description on MDN for more information. Use the "Logo fit" drop-down menu to test these modes in this demo.