How To Style The Submit Button On Your Dubsado Lead Capture Form

By default, the submit button on Dubsado is pretty rubbish, isn’t it? Well, I think so. That’s why today I’m going to show you how to style your submit button on your lead capture form with some CSS.

If you haven’t done so yet make sure to upload your fonts into Dubsado.

I have two separate tutorial that you can watch that will show you exactly how to upload:

1. Google and Adobe Fonts Into Dubsado
2. Custom Paid Fonts Into Dubsado

Make sure to watch the full YouTube tutorial which walks you through the css:

Submit Button Styling CSS

/*==== SUBMIT BUTTON STYLING ====*/

/* Submit button --- use !important */

.submit-form-button {
 font-family: ; /* add your font family */
  border-radius:0px; /* add your radius */
  background-color: !important;
  text-transform: ; /* uppercase / captialize */
  letter-spacing: ; /* add letter spacing */
  font-size: !important; /* font size */
color:#000!important; /* text colour */
padding: 12px 35px!important;
}

/* Submit button hover --- use !important */

.submit-form-button:hover {
  background-color: !important; /* background color on hover */
  color: !important; /* text colour on hover */
  border:1px solid black!important; /* border colour on hover */
border-radius:0px!important;
}

CSS to left align or center align

Copy and paste this code into the ‘Edit CSS’ button under form styling

/* Aligning Button - Right / Left / Center */

.form-viewer-footer__buttons.hide-in-print {

justify-content: center; /* Left / Center */

}

CSS button examples

Copy and paste the below css to style your submit buttons

 .submit-form-button
  {
     background-color:#EFECEA;
    padding:12px 35px;
    font-weight:800
    border:1px solid black;
    color:black;
    font-family:montserrat;
    font-size:13px!important;
    text-transform:uppercase;
letter-spacing:1px;
  }
  
  .submit-form-button:hover{
     background-color:black;
    color:white;
    border:1px solid #EFECEA;
    box-shadow: 5px 5px #EFECEA;
    }

.submit-form-button
  {
     background-color:#EFECEA;
    padding:12px 35px;
    font-weight:800
    border:1px solid black;
    color:black;
    font-family:montserrat;
    font-size:13px!important;
border-radius:0px!important;
   box-shadow: 5px 5px 5px black!important;
  }
  
   .submit-form-button:hover{
    background-color:black;
    color:white;
    border:1px solid #EFECEA!important;
box-shadow: 5px 5px 5px #EFECEA!important;
  
 
    }

.submit-form-button
  {
   background-color:#EFECEA;
    padding:12px 35px;
    font-weight:800
    border:1px solid black;
    color:black;
    font-family:montserrat;
    font-size:13px!important;
    text-transform:uppercase;
letter-spacing:1px;
border-radius:50%;


  }
  
  .submit-form-button:hover{
     background-color:black;
    color:white;
    border:1px solid #EFECEA;
    box-shadow: 5px 5px #EFECEA;
    }

.submit-form-button
  {
     background-color:#EFECEA;
    padding:12px 35px;
    font-weight:800
     color:black;
    font-family:montserrat;
    font-size:13px!important;
    text-transform:uppercase;
border-radius:50px;
  }
  
 .submit-form-button:hover{
     background-color:black;
    color:white;
    border:1px solid #EFECEA;
  
    }

Final Thoughts

Dubsado is one of the best CRMs out there for service based businesses that work with clients one to one. It keeps all your clients (known as projects) in one place so you can streamline onboarding & offboarding processes. This includes booking in consultations, sending call reminder emails, sending contracts, invoices, proposals, recurring payments and more.

If you are looking for Dubsado proposal inspiration check out my Dubsado proposal templates by clicking here.

Not yet started your Dubsado journey and looking to get signed up? Get 30% off your first month or year with my discount code.