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.
/* =========================
GENERAL FORM FIELDS
========================= */
/* ----- Add space below the form fields ----- */
.form-group {
margin-bottom: 30px;
}
/* ----- Form Labels ----- */
.jb-form label {
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
}
/* ----- Form Required Astrix ----- */
.jb-form span.text-danger {
color: #e8546b;
}
/* ----- Form Field Box ----- */
.jb-form .form-control {
border-width: 0px 0px 4px 0px;
border-color: #e8546b;
box-shadow: none;
background-color: #fdf0f2;
height: 40px;
}
/* ----- Form Field when focused ----- */
.jb-form .form-control:focus {
border-color: #e8546b!important;
box-shadow: none!important;
border: solid;
border-width: 0px 0px 4px 0px!important;
}
/* ----- Form Fields if an error ----- */
.jb-form .has-error .form-control {
border-color: red;
}
/* =========================
TEXT FORM FIELDS
========================= */
/* ----- Single line Text Field ----- */
.jb-form input{
}
/* ----- Large Description Text Field ----- */
.jb-form textarea {
height:100px!important;
}
/* =========================
CHECKBOX FORM FIELDS
========================= */
/* ----- Unselected Checkbox ----- */
.jb-form .clip-check label:before {
background-color:#fdf0f2;
border-radius: 0!important;
border-width: 2px;
border-color: #e8546b;
}
/* ----- Selected Checkbox - the border colour actually results as the background colour on this one----- */
.jb-form .packageSelected .clip-check.check-info.check-brand-color label:before,
.jb-form .clip-check input[type="checkbox"]:checked+label:before {
border-color: #e8546b;
}
/* ----- Selected Checkbox - Tick Colour ----- */
.jb-form .clip-check input[type="checkbox"]:checked+label:after {
color: white;
}
/* ----- Checkbox after text ----- */
.checkbox label{
font-weight:normal;
}
/* =========================
RADIO (YES/NO) FORM FIELDS
========================= */
/* ----- Radio Vertical ----- */
.jb-form .radio {
display: block; /* display yes/no on separate lines - remove display:block to keep on the same line*/
}
/* ----- Radio Labels ----- */
.jb-form div.radio label {
font-weight: normal;
padding-left: 40px !important;
}
/* ----- Radio Border - Unselected ----- */
.jb-form .clip-radio label:after {
border: 2px solid #e8546b;
}
/* ----- Radio Border - Selected ----- */
.jb-form .clip-radio.radio-primary.radio-brand-color input[type="radio"]:checked+label:before {
background-color: #e8546b!important;
}
/* =========================
CALENDAR SELECT FIELDS
========================= */
/* ----- Month Numbers (On Click Month Text and Years) ----- */
.jb-form .uib-day button, .jb-form .uib-month button, .jb-form .uib-year button{
font-size:14px;
}
/* ----- Main Month & Year Title ----- */
.jb-form .btn.btn-default.uib-title{
color:black;
font-size:20px;
}
/* ----- Week Days Titles ----- */
.jb-form .uib-datepicker th{
font-size:18px;
color:black;
}
/* ----- Arrows ----- */
.jb-form .btn.btn-default.uib-left, .jb-form .btn.btn-default.uib-right{
color:#e8546b;
}
/* ----- Today's Date ----- */
.jb-form .text-info, .jb-form .btn-info{
color: black;
}
/* ----- Selected Date Background ----- */
.jb-form .btn-info.active, .jb-form .btn-info:active, .jb-form .open > .dropdown-toggle.btn-info{
background-color: #e8546b;
}
/* ----- Selected Date Text ----- */
button.btn.btn-default.btn-sm.btn-info.active span {
color:white!important;
}
/* ----- Date when hovered ----- */
.jb-form .btn-default:hover{
}
/* ----- Calendar Icon ----- */
.jb-form button.btn.btn-default.btn-cal {
border-radius: 00px;
border-width: 0px 0px 4px 0px;
border-color: #e8546b;
box-shadow: none;
background-color: #fdf0f2;
height: 40px;
}
/* ----- Overall Calendar (Make calendar same width as the form field) ----- */
.jb-form .uib-datepicker-popup.dropdown-menu,
.uib-datepicker-popup.dropdown-menu table {
width: 100%;
}
/* =========================
FILE UPLOADS
========================= */
/* ----- File Upload Button ----- */
.jb-form .btn-file {
border-color: #e8546b;
background-color: #fdf0f2;
box-shadow: none!important;
border-width: 0px 0px 4px 0px;
border-radius: 0px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
height: 40px;
}
/* ----- File Upload Button on Hover ----- */
.jb-form .btn-file:hover {
background-color:#e8546b;
border-color: #e8546b;
}
/* =========================
Placeholder Text
========================= */
/* ----- Placeholder text ----- */
.jb-form textarea::placeholder, .jb-form input::placeholder {
color: black;
}
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.
