🎉 This article is written for our new form builder! If you are still using the old form builder, check out this article to make the switch to the new form builder.
🕒 This article is for forms with legacy mode turned OFF.
⛔ Heads up! This article references adding custom code to Dubsado forms and should be used at your own risk. Dubsado does not handle any support questions regarding custom code and is not responsible for errors resulting from improper use. If you have any questions, it is best to reach out to your web developer or ask our Facebook Community. This information is provided as a courtesy only.
👋 Here’s a tip… the examples provided in this article are not meant to be an exhaustive list of everything that you can customize with CSS on a Dubsado form! They are just examples to help get you started. You can use your browser inspector on the public view of a form or while in preview mode to help select elements and states that aren’t listed here.
In this article...
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.
The .dubsasdo-form class
When writing CSS for a regular webpage, you might use the body selector to make general style declarations for the whole page. Or you might use a generic element selector, like p to select all paragraphs, or input to select all form fields.
When styling Dubsado forms, we recommend that you use the .dubsado-form class. 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; }
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 {}
Text boxes can also contain tables. You can use the built-in table formatting options for alternating rows, thick cells, and highlighted cells, and then customize the styles:
/* Table */
.form-text-element.text-editor table {}
/* All table cells --- use !important for borders */
.form-text-element.text-editor table thead tr th,
.form-text-element.text-editor table td {}
/* Table header row */
.form-text-element .fr-view table th {}
/* Alternating rows table style odd rows */
.form-text-element .froala-alternate-rows tr:nth-child(odd) td {}
/* Alternating rows table style even rows */
.form-text-element .froala-alternate-rows tr:nth-child(even) td {}
/* Highlighted cell style --- use !important */
.form-text-element .fr-highlighted {}
/* Thick cell style --- use !important */
.form-text-element .fr-thick {}
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, including a dropdown calendar. 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 {}
/* Date select calendar */
.dubsado-form .rdtPicker {}
/* Date select calendar month and year */
.dubsado-form .rdtPicker th.rdtSwitch {}
/* Date select calendar month and year hover */
.dubsado-form .rdtPicker th.rdtSwitch:hover {}
/* Date select calendar arrows */
.dubsado-form .rdtPicker th.rdtPrev,
.dubsado-form .rdtPicker th.rdtNext {}
/* Date select calendar arrows hover */
.dubsado-form .rdtPicker th.rdtPrev:hover,
.dubsado-form .rdtPicker th.rdtNext:hover {}
/* Date select calendar days of the week */
.dubsado-form .rdtPicker .dow {}
/* Date select calendar dates current month */
.dubsado-form .rdtPicker .rdtDay,
.dubsado-form .rdtPicker .rdtMonth,
.dubsado-form .rdtPicker .rdtYear {}
/* Date select calendar dates previous and next month */
.dubsado-form .rdtPicker .rdtOld,
.dubsado-form .rdtPicker .rdtNew {}
/* Date select calendar current date */
.dubsado-form .rdtPicker .rdtToday {}
/* Date select calendar dates hover */
.dubsado-form .rdtPicker td.rdtDay:hover,
.dubsado-form .rdtPicker td.rdtMonth:hover,
.dubsado-form .rdtPicker td.rdtYear:hover {}
/* Date select calendar selected date */
.dubsado-form .rdtPicker td.rdtActive {}
/* 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 {}
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 {}