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.