A really simple way to elevate your Dubsado forms and proposals is through styling the form fields. Simply by adding a bit of style to your forms you can make your forms more dynamic and on-brand in minutes. This post will provide you with absolutely every CSS code you will need to style your forms.
Not sure how to add CSS to your Dubsado forms? Check out this post first!
Here at Forms & Flows, we’re obsessed with branding. Everything has to match. As a brand and web developer the importance of branding has always been highlighted through every aspect of my work. When I moved my CRM to Dubsado I loved everything about the workflows and automation, but I was somewhat frustrated with my forms – they just didn’t provide my clients with that polished user experience I strive to deliver. Then I discovered the code block – that’s when my forms completely changed. Finally I could provide my clients with a top-notch design and experience that completely matched the rest of my brand.
The Look
Dubsado Form Fields CSS Cheat Sheet
Use this code to style every aspect of your Dubsado form fields.
/* All fields label text */
.form-element__input-label {
font-weight: 800;
text-transform: capitalize;
letter-spacing: 2px;
}
/* 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 {
margin-bottom:15px;
border-width: 0px 0px 4px 0px;
border-bottom-color: #d6b981;
box-shadow: none;
background-color: #f8f0e1;
height: 40px;
}
/* Short answer */
.form-element__input {
}
/* Free response */
.free-response-element__text-area {
min-height:100px;
}
/* Dropdown fields */
.dubsado-form select {
margin-bottom:15px;
border-width: 0px 0px 4px 0px;
border-bottom-color: #d6b981;
box-shadow: none;
background-color: #f8f0e1;
height: 40px;
}
/* Dropdown caret */
.form-element__select-container::after {
color: #d6b981;
}
/* Dropdown selected option text --- use !important for color */
.dubsado-form .form-element__select-container .select--selected-option {
}
/* Checkbox option label text */
.form-checkbox-element .checkbox-option label {
font-weight: 300;
text-transform: capitalize;
letter-spacing: 2px;
}
/* Checkbox unchecked */
.form-checkbox-element .checkmark {
border-width: 0px 0px 4px 0px;
border-bottom-color: #d6b981;
box-shadow: none;
background-color: #f8f0e1;
}
/* Checkbox checked */
.form-checkbox-element .checkbox-option input:checked ~ .checkmark {
background-color: #d6b981;
color: #ffffff;}
/* Checkbox checked checkmark */
.form-checkbox-element .checkbox-option .checkmark:after {
border-color: ; /* checkmark color */
}
/* Multiple choice option label text */
.form-multiple-choice-element .radio-option label {
font-weight: 300;
text-transform: capitalize;
letter-spacing: 2px;
}
/* Multiple choice radio button unselected */
.form-multiple-choice-element .checkmark {
border-width: 2px 2px 2px 2px;
border-color: #d6b981;
background-color: #ffffff;
}
/* Multiple choice radio button unselected hover */
.form-multiple-choice-element .checkmark:hover {
background-color: #d6b981;
color: #ffffff;
border-width: 0px 0px 0px 0px;
}
/* Multiple choice radio button selected */
.form-multiple-choice-element .radio-option input:checked ~ .checkmark {
background-color: #d6b981;
border-width: 0px 0px 0px 0px;
}
/* Multiple choice radio button selected marker */
.form-multiple-choice-element .radio-option .checkmark:after {
background-color: color: #ffffff; /* inner circle color */
}
/* Date select input fields --- use !important for borders */
.dubsado-form .date-input input {
margin-bottom:15px;
border-width: 1px 1px 4px 1px;
border-bottom-color: #d6b981;
box-shadow: none;
background-color: #ffffff;
height: 40px!important;
}
/* Date select calendar button --- use !important */
.dubsado-form .date-input .icon-button__button {
margin-bottom:15px;
border-width: 0px 0px 4px 0px;
border-bottom-color: #d6b981;
box-shadow: none;
background-color: #f8f0e1;
height: 36px!important;
}
/* 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 {
color:#d6b981;
}
/* 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 {
background-color:#d6b981;
}
/* 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 button */
.file-element__drop-zone .upload-btn {
margin-bottom:15px;
border-width: 0px 0px 4px 0px;
border-bottom-color: #d6b981;
box-shadow: none;
background-color: #f8f0e1;
height: 40px!important;
font-weight: 800;
letter-spacing: 2px;
}
/* File uploader button hover */
.file-element__drop-zone .upload-btn:hover {}
/* File uploader text below button */
.file-element__drop-zone {
letter-spacing: 2px;}
/* 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 {
font-weight: 800;
text-transform: capitalize;
letter-spacing: 2px;
color:black;
}
/* Uploaded file delete button */
.file-element__file-list .uploaded-file__delete-btn {
background-color:#d6b981;
}
/* Uploading file cancel button (briefly visible during upload) */ .file-element__file-list .uploaded-file__cancel-btn {
background-color:#d6b981;
}
/* Initials element */
.initials-element {
}
/* Initials input --- may require !important */
.initials-element__initials-input {
border-width: 0px 0px 4px 0px!important;;
border-bottom-color: #d6b981!important;
background-color: #f8f0e1!important;
}
/* Initials text */
.initials-element__text-label {
}
/* Signature area element */
.signature-element {
}
/* Signature area text */
.signature-element .form-element__input-label {
font-weight: 800;
text-transform: capitalize;
letter-spacing: 2px;
}
/* Signature area first and last name fields --- may require !important */
.signature-element .signature-name-fields-name {
border-width: 0px 0px 4px 0px!important;;
border-bottom-color: #d6b981!important;
background-color: #f8f0e1!important;
height:40px;
}
/* Signature area first and last name fields placeholder */
.signature-element .signature-name-fields-name::placeholder {}
/* Signature field label */
.signature-input-label {
font-weight: 800;
text-transform: capitalize;
letter-spacing: 2px;
}
/* Signature field --- may require !important */
.signature-element .signature-input-field {
border-width: 0px 0px 4px 0px!important;;
border-bottom-color: #d6b981!important;
background-color: #f8f0e1!important;
}
/* Signature field placeholder */
.signature-element .signature-input-field::placeholder {}
/* Signature information text */
.signature-element .signature-information {
}
/*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 {}
You can use this cheat sheet as a starting point to style your Dubsado form field styles. You can choose your background colour, add a border or perhaps change fonts or style your calendar module. Whilst there is a lot of code above and may feel overwhelming, there’s not actually too much that you’ll need to change. The main bits you’ll want to focus on are the colours and the borders.
More Styles
You can use the above code to customise and style your form fields however you like with your own CSS declarations. However, if you’d like to save some time we’ve gone ahead and created some free styles for you that you can simply copy and paste into your Dubsado forms and proposals.
