Use CSS for Survey Customization
- 08 Oct 2024
- 3 Minutes To Read
-
Print
-
DarkLight
-
PDF
Use CSS for Survey Customization
- Updated On 08 Oct 2024
- 3 Minutes To Read
-
Print
-
DarkLight
-
PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
The code view gives access to the Survey template’s CSS code. Use the code view to make detailed visual tweaks that aren't possible using the UI options. The code view is available for any Survey template that you select.
Your title goes here
The CSS code for Surveys cannot be deleted; it can only be modified or added to with a new code. If the current CSS is deleted, it will be overridden by the default CSS settings.
Before you customize your template, as a best practice, create a backup copy of the code. This prevents any unexpected content loss.
Access the code View of the template
Access the Code View of the template
Use the following steps to access the code view of the Survey template:
On the Whatfix Guidance dashboard, click Widgets.
.png?sv=2022-11-02&spr=https&st=2024-12-23T14%3A07%3A21Z&se=2024-12-23T14%3A17%3A21Z&sr=c&sp=r&sig=K8b%2FI13v7nnFOOxtQeKtP%2B4NRvN8BXykt50I9AZlO6I%3D "image(322).png")
Click Surveys.
.png?sv=2022-11-02&spr=https&st=2024-12-23T14%3A07%3A21Z&se=2024-12-23T14%3A17%3A21Z&sr=c&sp=r&sig=K8b%2FI13v7nnFOOxtQeKtP%2B4NRvN8BXykt50I9AZlO6I%3D "image(323).png")
Hover your cursor over the Survey you want to customize, and then click the Edit icon.
.png?sv=2022-11-02&spr=https&st=2024-12-23T14%3A07%3A21Z&se=2024-12-23T14%3A17%3A21Z&sr=c&sp=r&sig=K8b%2FI13v7nnFOOxtQeKtP%2B4NRvN8BXykt50I9AZlO6I%3D "image(324).png")
On the top right corner, click the Code view icon.
Your title goes here
Use the following steps to find the HTML class name for the element you want to edit:
Right-click the element you want to edit and click Inspect.
In the Elements panel, locate the element and copy its class name.
To search for this class name in the code view, open the search bar by pressing
Ctrl + F(On Windows) orCmd + F(on Mac).
Once you've edited the code, click the Run to preview the changes.
Your title goes here
If you click Reset, all unsaved changes will be discarded, and the code will revert to its last saved state.
Click Save to save the changes.
Use Cases
Change the size of the Survey template
To change the size of the survey, go to the code view, find the CSS class .survey-iframe-Container , and adjust the width and height.
.png?sv=2022-11-02&spr=https&st=2024-12-23T14%3A07%3A21Z&se=2024-12-23T14%3A17%3A21Z&sr=c&sp=r&sig=K8b%2FI13v7nnFOOxtQeKtP%2B4NRvN8BXykt50I9AZlO6I%3D "ChangeSurveysize(2).png")
For example, the following CSS code sets the height and width of the Survey to 500px:
.survey-iframe-container {
width: 500px;
height: 500px;
}Change the font style
To change the font style for all the text elements in the Survey, go to the code view, and find the * selector.
Your title goes here
The styles applied using the Universal Selector (
*) will affect all text elements throughout the Survey. This means that all headings, paragraphs, buttons, and other text display in the specified font. If you wish to customize the font for specific elements, do so by targeting those particular elements (for example,h1,p,button) in the CSS code.
For example, the following CSS code changes the font style of all the text elements from ‘Inter, sans-serif’ to ‘Georgia, serif’:
* {
font-family: 'Georgia', serif; /* Changed from 'Inter' to 'Arial' */
}Customize the Submit button
To customize the Submit button, go to the code view, find the CSS class .button-root , and change the height, width, and border-radius.
For example, the following CSS code sets the height to 50px, width to 120px, and border-radius to 10px:
.button-root {
width: 120px;
height: 50px;
border-radius: 10px;
}Customize the Survey background color
To customize the background color of the Survey, go to the code view, find the CSS selector .survey-container .content-container , and change the background.
.png?sv=2022-11-02&spr=https&st=2024-12-23T14%3A07%3A21Z&se=2024-12-23T14%3A17%3A21Z&sr=c&sp=r&sig=K8b%2FI13v7nnFOOxtQeKtP%2B4NRvN8BXykt50I9AZlO6I%3D "Surveybackground (1).png")
For example, the following CSS code changes the background color from grey (#f6f6f9) to white (#ffffff):
.survey-container .content-container {
overscroll-behavior: contain;
overflow-y: auto;
padding: 16px 24px;
background: #ffffff;
flex-basis: 70%;
flex-grow: 1;
height: 100%;
}Resize the Survey Header
To resize the Survey header, go to the code view, find the CSS class .header , and adjust the min-height.
.png?sv=2022-11-02&spr=https&st=2024-12-23T14%3A07%3A21Z&se=2024-12-23T14%3A17%3A21Z&sr=c&sp=r&sig=K8b%2FI13v7nnFOOxtQeKtP%2B4NRvN8BXykt50I9AZlO6I%3D "Survey_header(1).png")
For example, the following CSS code reduces the min-height of the Survey header from 92px to 75px:
.header {
width: 100%;
height: auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
background: #ffffff;
padding: 12px 24px;
border-radius: 5px 5px 0px 0px;
min-height: 75px;
background-color: #C74900;
color: #ffffff;
}Was this article helpful?