Updated Aug 16, 2023
Dubsado forms are highly customizable, but you can take them even further with custom code! This article covers how to add CSS to your Dubsado form using the CSS editor, best practices, and which selectors we support.
👋 Here's a tip... while we aren't able to guarantee permanent support for all CSS, we can ensure that any of the CSS documented here will be supported long-term. Dubsado cannot guarantee that custom code beyond what is shared in this article will not be impacted by future updates to our form builder and client view.
🛑 Heads up! Due to the complex nature of custom code, our Customer Care team isn’t able to provide support on forms with custom code.
For assistance on a form with custom code, please ask our Facebook community, or reach out to a web developer.
The CSS editor
Here are a few tips to help you get the most out of adding custom code to your Dubsado form:
Use the CSS editor in the Form styling panel to manage all of your styles. If you’ll be adding HTML, use an HTML block.
It’s not necessary to add
<style>tags when adding CSS to the CSS editor. Just add your styles!
You can use your browser to inspect elements while the form is in Preview mode.
Although most CSS should work in the form builder, use Preview mode frequently to review your code. We also recommend doing a final check by opening the form as your client would.
If you'd like to style a specific element, most elements on the form have a unique ID! You can find this using your browser inspector.
🕒 Check that Legacy mode is turned OFF in the Form settings panel before you start inspecting or writing any code. This will ensure that your code will work with the latest version of our builder.
Style priority levels
There are a variety of style settings built into the form builder that may override your custom CSS. Here's a breakdown of priority on how each of these styles are applied, in order of highest to lowest:
Element styling inline - this is the most specific override you can make, by styling text inside the text editor element using the formatting toolbar.
Container style settings - changing a container's text color or background may override your CSS.
Custom CSS - the custom CSS you add in the Form styling panel will override any form style settings.
Form style settings - settings like the Question styling options found in the Form styling panel.
You might see a different result depending on which selectors you use, but in general, styles higher on this list will override styles lower on the list. For example, your custom CSS would override form style settings, but container style settings would override your custom CSS.
The .dubsado-form class
When styling Dubsado forms, please use the .dubsado-form class instead of the general body selector. Using this class will keep your styles restricted to the form itself so that the form builder is not affected.
⛔ For example, instead of changing the border radius on all of your input fields like this:
input { border-radius: 20px; }
✅ Use the .dubsado-form class to make sure you are only selecting the input fields on your form:
.dubsado-form input { border-radius: 20px; }
✅ You can also use the .dubsado-form class as you would use the body selector. The example below would change the background color of the entire form to a light grey (#eeeeef):
.dubsado-form { background-color: #eeeeef; }
👋 Here's a tip... please avoid using the body selector to make general style declarations for the whole page. Generic element selectors without a class for additional specificity, like p to select all paragraphs, or input to select all form fields, should also be avoided.
Typography and text boxes
Here are a few tips for styling text on Dubsado forms:
The text box element allows you to format text as Heading 1, Heading 2, Heading 3, Heading 4, and Paragraph. This setting is in the text editor toolbar under Formatting options (A icon) > Paragraph formatting. Add CSS to define your preferred style for each setting, then use the Paragraph formatting option in the tool bar to apply the styles to your text as you go.
Remove any default font face, size, and color set in the Form styling panel to prevent your CSS from being overridden.
Formatting applied within text boxes can also override your CSS, so we recommend clearing the formatting from your text and then applying paragraph styles (Heading 1, Heading 2, etc.) as needed. There is an option to Clear All Formatting (eraser icon) in the text editor toolbar under Formatting options (A icon).
Text box elements can be selected with the
.form-text-elementclass, although you may notice some differences in appearance between the builder and the preview/public view.
Style text using the .dubsado-form class and the appropriate element selector:
.dubsado-form h1 {}
.dubsado-form h2 {}
.dubsado-form h3 {}
.dubsado-form h4 {}
.dubsado-form p {}
Form fields
Helpful selectors are provided for all of the basic form field elements below. Note that you may need to use !important when declaring certain styles.
All fields
/* All fields label text */
.form-element__input-label {}
/* All fields placeholder text */
.dubsado-form input::placeholder,
.dubsado-form textarea::placeholder,
.dubsado-form .select--placeholder {}
/* All input fields --- use !important */
.dubsado-form input, .dubsado-form textarea, .dubsado-form select {}
Text input fields
If you are using the selectors for all fields above, you don't need to style these elements separately, unless you wish to make specific changes.
/* Short answer */
.form-element__input {}
/* Free response */
.free-response-element__text-area {}
Dropdowns
When styling dropdowns, some styles may not be visible in the form builder. Preview the form or open it as a client to test your code.
The dropdown element, workflow element, and project tracking element will all be selected.
/* Dropdown fields */
.dubsado-form select {}
/* Dropdown caret */
.form-element__select-container::after {}
/* Dropdown selected option text --- use !important for color */
.dubsado-form .form-element__select-container .select--selected-option {}
Checkboxes
These selectors are for the checkboxes element only. Please see the Packages section for package checkboxes.
/* Checkbox option label text */
.form-checkbox-element .checkbox-option label {}
/* Checkbox unchecked */
.form-checkbox-element .checkmark {}
/* Checkbox checked */
.form-checkbox-element .checkbox-option input:checked ~ .checkmark {}
/* Checkbox checked checkmark */
.form-checkbox-element .checkbox-option .checkmark:after {
border-color: ; /* checkmark color */
}
Multiple choice (radio buttons)
/* Multiple choice option label text */
.form-multiple-choice-element .radio-option label {}
/* Multiple choice radio button unselected */
.form-multiple-choice-element .checkmark {}
/* Multiple choice radio button unselected hover */
.form-multiple-choice-element .checkmark:hover {}
/* Multiple choice radio button selected */
.form-multiple-choice-element .radio-option input:checked ~ .checkmark {}
/* Multiple choice radio button selected marker */
.form-multiple-choice-element .radio-option .checkmark:after {
background-color: ; /* inner circle color */
}
Date select
The date select element has many components that can be styled. The appearance of the date select element also changes to include a time field when it is mapped to the project start or end date.
👋 Here’s a tip… you will need to use preview mode or open the form as a client to interact with the date select elements and test out your code.
/* Date select input fields --- use !important for borders */
.dubsado-form .date-input input {}
/* Date select calendar button --- use !important */
.dubsado-form .date-input .icon-button__button {}
/* Date select calendar button icon --- use !important */
.dubsado-form .date-input .icon-button__icon {}
/* Time select input field --- use !important for borders */
.dubsado-form .time-select input {}
/* Time select dropdown menu */
.dubsado-form .time-select .time-select__menu {}
/* Time select dropdown menu hover */
.dubsado-form .time-select .time-select__menu .time-select__option:hover {}
File uploader
The file uploader element appears as a button. Once a file is uploaded, a list appears with a preview of the file, a link to download it, and an option to remove it.
👋 Here’s a tip… you will need to open the form as a client to interact with the file uploader and test out your code. Using a lead capture form will help you test more quickly, because you can open the direct link and refresh after saving your changes in the builder.
/* File uploader button */
.file-element__drop-zone .upload-btn {}
/* File uploader button hover */
.file-element__drop-zone .upload-btn:hover {}
/* File uploader text below button */
.file-element__drop-zone {}
/* File uploader drop zone (appears when a file is dragged to upload) */
.file-element__drop-zone.--dragging {}
/* Uploaded file list (appears when at least one file is uploaded) */
.file-element__file-list {}
/* Uploaded file list row */
.file-element__file-list .uploaded-file {}
/* Uploaded file list odd rows */
.uploaded-file:nth-child(odd) {}
/* Uploaded file list even rows */
.uploaded-file:nth-child(even) {}
/* Uploaded file preview image (image uploads only) */
.uploaded-file__file-preview img {}
/* Uploaded file preview icon (other file type uploads only) */
.uploaded-file__file-preview svg {}
/* Uploaded file name (download link) */
.uploaded-file__file-name {}
/* Uploaded file delete button */
.file-element__file-list .uploaded-file__delete-btn {}
/* Uploading file cancel button (briefly visible during upload) */ .file-element__file-list .uploaded-file__cancel-btn {}
Initials and signature areas
Initials and signature area elements are only available on contracts and sub agreements.
/* Initials element */
.initials-element {}
/* Initials input --- may require !important */
.initials-element__initials-input {}
/* Initials text */
.initials-element__text-label {}
/* Signature area element */
.signature-element {}
/* Signature area text */
.signature-element .form-element__input-label {}
/* Signature area first and last name fields --- may require !important */
.signature-element .signature-name-fields-name {}
/* Signature area first and last name fields placeholder */
.signature-element .signature-name-fields-name::placeholder {}
/* Signature field label */
.signature-input-label {}
/* Signature field --- may require !important */
.signature-element .signature-input-field {}
/* Signature field placeholder */
.signature-element .signature-input-field::placeholder {}
/* Signature information text */
.signature-element .signature-information {}
Required fields
Required fields have some default styles to help your client identify which fields still need to be completed. You can customize these styles using the selectors below, but we recommend making sure the error state is easy to see.
/* Required field asterisk */
.dubsado-form .required-field-indicator {}
/* Required field border */
.form-viewer-element .has-error input,
.form-viewer-element .has-error textarea,
.form-viewer-element .has-error select {}
/* Required field error text */
.form-viewer-element .has-error .required-message {}
Proposals
Proposal navigation tabs
When a proposal is set to show a contract and/or an invoice, navigation tabs will appear at the top of the page.
👋 Here’s a tip… you’ll need to repeat these styles on your contract template, since the styling from the proposal will not carry over. The tabs disappear once the client reaches the invoice.
* Proposal tabs area */
.client-view-tabs {}
/* Proposal tabs text */
.client-view-tabs-col-label {}
/* Proposal tabs underline --- use !important */
.client-view-tabs-col div {
border: /*styles the underline below the tabs*/;
}
Packages
/* Package elements */
.form-package-element {}
/* Package item names and amounts table (generated by smart field) */
.form-package-element table {}
/* Package item names and amounts all table cells */
.form-package-element table thead td,
.form-package-element table tbody td {}
/* Package item names and amounts table header row */
.form-package-element table thead {}
/* Package item names and amounts odd rows */
.form-package-element table tbody tr:nth-child(odd) td {}
/* Package item names and amounts even rows */
.form-package-element table tbody tr:nth-child(even) td {}
/* Package item names and amounts table item name column */
.form-package-element table thead tr td:nth-child(1),
.form-package-element table tr td:nth-child(1) {}
/* Package item names and amounts table description column */
.form-package-element table thead tr td:nth-child(2),
.form-package-element table tr td:nth-child(2) {}
/* Package item names and amounts table description text */
.form-package-element table ul {}
/* Package item names and amounts table quantity column */
.form-package-element table thead tr td:nth-child(3),
.form-package-element table tr td:nth-child(3) {}
/* Package item names and amounts table tax column */
.form-package-element table thead tr td:nth-child(4),
.form-package-element table tr td:nth-child(4) {}
/* Package item names and amounts table subtotal column */
.form-package-element table thead tr td:nth-child(5),
.form-package-element table tr td:nth-child(5) {}
/* Package button unselected */
.form-package-element .packageNotSelected .btn.btn-squared.border-around {}
/* Package button unselected hover */
.form-package-element .packageNotSelected .btn.btn-squared.border-around:hover {}
/* Package button selected --- use !important and repeat any style changes you made to the unselected button */
.form-package-element .packageSelected .btn.btn-squared.border-around {}
/* Package quantity box unselected */
.form-package-element .packageNotSelected .packageQuantity {}
/* Package quantity box selected --- repeat unselected styles here if you don't want the box to change when a qty is entered */
.form-package-element .packageSelected .packageQuantity {}
/* Package large checkbox unselected */
.form-package-element .checkbox label.text-left::before {}
/* Package large checkbox selected */
.form-package-element .packageSelected .clip-check.check-info.check-brand-color label:before {}
/* Package large checkbox selected checkmark */
.form-package-element .packageSelected .clip-check label:after {
color: ; /* checkmark color */
}
/* Package small checkbox unselected */
.form-package-element .roast label:before {}
/* Package small checkbox selected */
.form-package-element .packageSelected .roast label:before {}
/* Package small checkbox selected checkmark */
.form-package-element .packageSelected .roast label:after {
color: ; /* checkmark color */
}
Submit button and footer
The footer contains the submit button, a PDF download button, and a back to portal button (if the portal is active). Some elements, like the proposal total and the save draft button are only shown on certain form types.
/* Footer area */
.form-viewer-footer {}
/* Proposal total */
.proposal-total {}
/* Questionnaire save draft button */
.save-draft-button {}
/* Submit button --- use !important */
.submit-form-button {}
/* PDF download button */
.pdf-button {}
/* PDF download button icon --- use !important */
.pdf-button svg {}
/* Back to portal button */
.back-to-portal-button {}
/* Back to portal button back arrow --- use !important */
.back-to-portal-button svg {}
FAQ
Will Dubsado ever make changes to forms that affect my custom code?
Our team is dedicated to bringing you as many features and updates as possible to empower you to design beautiful forms without needing to know how to code. From time to time, the changes we make to introduce these new features may impact the custom code on your forms.
While we aren't able to guarantee permanent support for all CSS, we can ensure that any of the CSS demonstrated in our cheat sheet will be supported long-term. Dubsado cannot guarantee that custom code beyond what is shared in this article will not be impacted by future updates to our form builder and client view.
Can Dubsado help me write my custom code?
Our Customer Care team is not able to provide any support on writing or troubleshooting custom code, but we are always happy to help you find a solution within the builder or bring your feedback to our Product team to inform future developments!