Available on | ❌ Free | ❌ Basic | ❌ Pro | ✅ Business |
CSS (Cascading Style Sheets), is the language used to style content on the web. By writing CSS code for your funnel, you can define the colors, fonts, and other visual properties of the content elements in your form.
Most parts of your form's appearance can be modified without code, by simply using design options. However, if your business needs a more unique look, you can use custom CSS to create your own aesthetic.
Custom CSS is an advanced feature that requires technical skills and knowledge about website implementation and design. However, if you have the necessary skills, using custom CSS can give your form a personalized and professional touch.
Add Custom CSS to Your Funnel
To add custom CSS to your form, simply open your funnel in the Editor, click the "Design" tab on your right side and pick the "Custom CSS" option.
Doing this will open a new menu which is where you can add your own custom CSS - when you first open this menu, it will show you the supported CSS Classes by default.
Make sure to remove the /*TODO*/ text, which is where your CSS code will go.
You will also have the option to toggle Custom CSS on and off.
ℹ️ At the moment every CSS property should include !important at the end, to make sure the custom CSS is always over-prioritized.
Supported CSS Classes
You can use the supported class names to better target your desired HTML tags, also in combination with any other class names or IDs.
⚠️ The following class names are the only classes that our custom CSS feature officially supports and are guaranteed to be always available. You can use any CSS but our HTML structure is subject to change anytime through product development.
Class Name | Affected Tag |
.iv-body | The full area of your involve.me funnel, perfect for backgrounds or properties that should affect as much as possible |
.iv-content-card-bg | The container for all content elements, perfect for instructions that should only affect the content, it allows additional background options on the content card. Make sure it is visible in your funnel design. |
.iv-text-choice-answer | The container class name for each text based answer choice. |
.iv-image-choice-answer | The container class name for each image based answer choice (incl. optional text) |
.iv-btn | The container class name for all button elements. |
div[data-element-id="xxxxxx"] | This data attribute targets a unique content element in your funnels. You can find the ID by inspecting it. |
Getting Help With Custom CSS
While our support team is here to help clarify any questions you may have about this feature, it is important to bear in mind that they're unable to assist you in creating the CSS you require.
If you need assistance with writing custom CSS for your form, we recommend seeking help from a web developer or designer. They will have the necessary skills and knowledge to help you achieve the look you want for your form.