For code-savvy Upsales users, your only restriction when designing an Upsales form is the web browser. This is done by adding your own CSS (Cascading Style Sheet) on top of the original Upsales one.
This article covers:
- How to activate CSS styling
- How to publish forms with custom CSS
- "Will custom CSS affect other website elements?"
- "My CSS isn't showing in my form"
How to activate CSS styling
- Click the Design tab of a created form:
- Click the Custom styling tab, or scroll down to find Custom styling (CSS)
- Click Edit custom CSS. This button is only shown until you click it once in your browser. After that, the CSS editor opens directly:
- Commence code hacking:
How to publish forms with custom CSS
Your custom CSS is included in every publishing option except Raw code.
The Raw code option copies the form's HTML and scripts, but not your custom CSS or the form's default CSS. If you publish with raw code, add your CSS to your own website and start each selector with #up-form, so it only affects the form.
"Will custom CSS affect other website elements?"
Short answer: no.
All your custom CSS will be restricted inside of #up-form. This means any elements outside the element containing that ID won't be affected. This is the utmost id of an Upsales form.
Upsales adds #up-form in front of each selector, so you can leave it out. Inside a @media rule, always leave it out: a selector there that already starts with #up-form will not match anything.
"My CSS isn't showing in my form"
- If you published the form with Raw code, your custom CSS is not part of the code. Add it to your own website, as described above.
- Try adding the keyword !important at the end of your CSS statement:
#up-form {
background-color: white !important;
box-shadow: none !important;
}In some cases, the default form CSS is more nested and therefore needs to be overruled this way.