Dubsado proposals have a huge advantage over other CRM platforms — the ability to connect the contract and invoice, so that clients can be automatically directed to the next steps to sign the contract and pay their invoice instantly to work with you — all from sending one single link in your email to your new lead.
This interactive experience really cuts down on the back-and-forth email communication — and is clearly labelled “Proposal Contract Invoice” at the top of Dubsado’s default top navigation bar, so that clients can easily identify the next steps of your process.
It’s one of the first things prospects see when they open your proposal, so let’s customise it with your branding.
20 Free Dubsado Portal Templates for Desktop & Mobile
20 free templates to stay on brand & WOW your clients – it really does add to that 5* client experience.
Watch the tutorial on styling your proposal contract and invoice top navigation bar
How to connect your contract and invoice to Dubsado proposals
First, head over to the “Form Settings” under the gear icon in the left hand side bar.
From here you’ll be able to navigate to “Proposal options” where you will see the “Include contract” tab and turn it on, then you can select your the correct contract to attach.
Under the “Invoice Options” you will see “Include invoice” which you can turn on to include the invoice in your proposal.
Changing the top navigation bar background colour:
.client-view-tabs {
padding: 5px 15px;
background-color:#fff!important;
}
Changing the Proposal, Contract and Invoice top navigation text
Remember to customise with your brand fonts, I have tutorials on both how to upload custom paid fonts and how to upload Google and Adobe fonts.
/* Proposal tabs text */
.client-view-tabs-col-label{
color:#000;
letter-spacing:2px!important;
font-size: 14px!important;
text-transform:uppercase;
font-weight:400;
font-family:YOUR FONT!important;
}
Remove the underline from the Proposal, Contract and Invoice text
By default the Dubsado proposal top navigation bar is styled with an 1px bottom border (underlined) you can remove this by using the below code:
/* Proposal tabs underline */
.client-view-tabs-col div {
display: none;
}
Changing The Proposal, Contract and Invoice Text On Hover
If you want to add a second colour on hover you can do this by adding the below code:
/* Proposal tabs text hover color */
.client-view-tabs-col-label:hover{
color:#000!important;
}
Removing the Proposal Contract and Invoice Top Navigation Bar
If you want to completely remove this navigation bar you can do that by adding the below CSS:
/* Remove the Top Bar Navigation */
.client-view-tabs-content {
display:none!important;
}
/* remove the form warning message */
.form-banner--warning{
display:none!important;
}
Dubsado Proposal Templates
Win more clients by upgrading your Dubsado proposal design with the elegance and convenience of my mobile-friendly proposal template with just one click!
Want to find out about my Dubsado proposal templates simply click here. Please remember you will need to have a Dubsado account. You can create an account for free and if you decide to purchase the monthly or yearly subscription you can get 30% off by clicking here.
