mirror of
https://github.com/formbricks/formbricks.git
synced 2026-01-06 05:40:02 -06:00
261 lines
8.1 KiB
Plaintext
261 lines
8.1 KiB
Plaintext
import { MdxImage } from "@/components/MdxImage";
|
||
|
||
import PreRequisiteImage from "./images/Pre-requisite.webp";
|
||
import StepEight from "./images/StepEight.webp";
|
||
import StepEleven from "./images/StepEleven.webp";
|
||
import StepFive from "./images/StepFive.webp";
|
||
import StepFour from "./images/StepFour.webp";
|
||
import StepNine from "./images/StepNine.webp";
|
||
import StepOne from "./images/StepOne.webp";
|
||
import StepSeven from "./images/StepSeven.webp";
|
||
import StepSix from "./images/StepSix.webp";
|
||
import StepTen from "./images/StepTen.webp";
|
||
import StepThree from "./images/StepThree.webp";
|
||
import StepTwo from "./images/StepTwo.webp";
|
||
|
||
import Doggo from "./images/Doggo.jpg";
|
||
import HipsterLiving from "./images/HipsterLiving.jpg";
|
||
import Mario from "./images/Mario.webp";
|
||
import WindowsXp from "./images/WindowsXp.jpg";
|
||
|
||
export const metadata = {
|
||
title: "Custom Styling in Formbricks Surveys",
|
||
description:
|
||
"Style your surveys effortlessly with Formbricks to match your brand's unique aesthetic, from Super Mario themes to the minimalist Windows XP style. Customize everything from color schemes to adding your logo, all without needing any coding skills.",
|
||
};
|
||
|
||
# Custom Styling
|
||
|
||
Style your surveys effortlessly with Formbricks to match your brand's unique aesthetic, from Super Mario themes to the minimalist Windows XP style. Customize everything from color schemes to adding your logo, all without needing any coding skills. Don’t miss out some of our standout design surveys at the end!
|
||
|
||
### Product Styling
|
||
|
||
Easily apply a consistent style across all your current & future surveys:
|
||
|
||
**Pre-requisites:**
|
||
|
||
1. Navigate to the **Settings** tab on the Formbricks Dashboard.
|
||
2. Select **Look & Feel** under the **Product** section in the left navbar
|
||
|
||
<MdxImage
|
||
src={PreRequisiteImage}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl "
|
||
/>
|
||
|
||
**Switch between Link Survey & App Survey** to preview different styles
|
||
|
||
### **Styling Options**
|
||
|
||
1. **Form Styling:** Customize the survey card using the following settings
|
||
|
||
<MdxImage
|
||
src={StepOne}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl "
|
||
/>
|
||
|
||
- **Brand Color**: Sets the primary color tone of the survey.
|
||
- **Text Color**: This is a single color scheme that will be used across to display all the text on your survey. Ensures all text is readable against the background.
|
||
- **Input Color:** Alters the border color of input fields.
|
||
- **Input Border Color**: This is the color of the border of the form input field.
|
||
|
||
2. **Card Styling:** Adjust the look of the survey card
|
||
|
||
<MdxImage
|
||
src={StepTwo}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl "
|
||
/>
|
||
|
||
- **Roundness**: Adjusts the corner roundness of the survey card and its components (including input boxes, buttons).
|
||
- **Card Background Color**: Sets the card's main background color.
|
||
- **Card Border Color**: Changes the border color of the card
|
||
- **Card Shadow Color**: Adds a shadow effect for depth
|
||
- **Hide Progress Bar**: Optionally remove the progress bar to simplify the survey experience
|
||
- **Add Highlight Border**: Adds a distinct border for emphasis.
|
||
|
||
3. **Background Styling**: Customize the survey background with static colors, animations, or images (upload your own or get from Unsplash)
|
||
|
||
<Note>This is only available for Link Surveys</Note>
|
||
|
||
<MdxImage
|
||
src={StepThree}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl "
|
||
/>
|
||
|
||
- **Color**: Pick any color for the background
|
||
- **Animation**: Add dynamic animations to enhance user experience..
|
||
- **Upload**: Use a custom uploaded image for a personalized touch
|
||
- Image: Choose from Unsplash's extensive gallery. Note that these images will have a link and mention of the author & Unsplash on the bottom right to give them the credit for their awesome work!
|
||
- **Background Overlay**: Adjust the background's opacity
|
||
|
||
### Add Brand Logo:
|
||
|
||
Customize your survey with your brand's logo.
|
||
|
||
<Note>only available for link survyes</Note>
|
||
|
||
1. In the Look & Feel page itself in Product settings, scroll down to see the Logo Upload box.
|
||
|
||
<MdxImage
|
||
src={StepFour}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl "
|
||
/>
|
||
|
||
2. Upload your logo
|
||
|
||
<MdxImage
|
||
src={StepFive}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl "
|
||
/>
|
||
|
||
3. Add a background color: If you’ve uploaded a transparent image and want to add background to it, enable this toggle and select the color of your choice.
|
||
|
||
<MdxImage
|
||
src={StepSix}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl "
|
||
/>
|
||
|
||
4. Remember to save your changes!
|
||
|
||
<MdxImage
|
||
src={StepSeven}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl "
|
||
/>
|
||
|
||
<Note>The logo setting applies across all link surveys</Note>
|
||
|
||
### Overwrite Product Styling
|
||
|
||
Create surveys with specific styles that differ from your general product style.
|
||
|
||
**Pre-requisites**:
|
||
|
||
- Enable the **Custom Styling** toggle in the **Look & Feel** settings
|
||
|
||
<MdxImage
|
||
src={StepEight}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||
/>
|
||
|
||
**Steps:**
|
||
|
||
1. Open the survey editor you want to change the styling of and switch to the Styling tab.
|
||
|
||
<MdxImage
|
||
src={StepNine}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl "
|
||
/>
|
||
|
||
2. Activate the **Add Custom Styles** toggle to override the default product styling.
|
||
|
||
<MdxImage
|
||
src={StepTen}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl "
|
||
/>
|
||
|
||
3. Customize your survey's style as needed!
|
||
|
||
<MdxImage
|
||
src={StepEleven}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl "
|
||
/>
|
||
|
||
Voila! just hit the save button to apply your changes. Your survey is now ready to impress with its unique look!
|
||
|
||
## Overwrite CSS Styles for App & Website Surveys
|
||
|
||
You can overwrite the default CSS styles for the app & website surveys by adding the following CSS to your global CSS file (eg. `globals.css`):
|
||
|
||
Make sure that you do not change the CSS variable names as they are used by Formbricks to identify the CSS variables. You can change the values to your liking. We have filled in some sample values for you to change according to your desired appearance.
|
||
|
||
<Col>
|
||
<CodeGroup title="Overwrite Formbricks CSS">
|
||
|
||
```css
|
||
/* Formbricks CSS */
|
||
--fb-brand-color: red;
|
||
--fb-brand-text-color: white;
|
||
--fb-border-color: green;
|
||
--fb-border-color-highlight: rgb(13, 13, 12);
|
||
--fb-focus-color: red;
|
||
--fb-heading-color: yellow;
|
||
--fb-subheading-color: green;
|
||
--fb-info-text-color: orange;
|
||
--fb-signature-text-color: blue;
|
||
--fb-survey-background-color: black;
|
||
--fb-accent-background-color: rgb(13, 13, 12);
|
||
--fb-accent-background-color-selected: red;
|
||
--fb-placeholder-color: white;
|
||
--fb-shadow-color: var(--fb-brand-color);
|
||
--fb-rating-fill: rgb(13, 13, 12);
|
||
--fb-rating-hover: green;
|
||
--fb-back-btn-border: blue;
|
||
--fb-submit-btn-border: transparent;
|
||
--fb-rating-selected: black;
|
||
```
|
||
|
||
</CodeGroup>
|
||
</Col>
|
||
|
||
We have an example of this in our [Demo project](https://github.com/formbricks/formbricks/blob/main/apps/demo/styles/globals.css) here.
|
||
|
||
### Funky Survey Examples
|
||
|
||
- **Super Mario:** I guess he won't let himself be limited by radio buttons and do all three things
|
||
|
||
<MdxImage
|
||
src={Mario}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl "
|
||
/>
|
||
|
||
- **Hipster Living**: Does your monstera get enough water?
|
||
|
||
<MdxImage
|
||
src={HipsterLiving}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl "
|
||
/>
|
||
|
||
- **Windows XP**: Hach, nostalgia. Made us wanna play Mafia.
|
||
<MdxImage
|
||
src={WindowsXp}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl "
|
||
/>
|
||
- **Whosagooooodbooooy**: Things you've likely said to your dog.
|
||
<MdxImage
|
||
src={Doggo}
|
||
alt="Choose a link survey template"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl "
|
||
/>
|
||
|
||
---
|