Buttons need to be exciting. They need to make your potential client want to click. By default the Dubsado submit button is a little boring. We can add a little bit of code and elevate our form design massively.

Sometimes you’ll also find that the default Dubsado ‘Submit and Next’ just doesn’t quite make sense with your forms. Keep reading to see how to absolutely everything to do with your Dubasdo submit buttons.

This post will provide you with absolutely every code you will need to style your forms submit, missing fields and totals section. .

Not sure how to add code to your Dubsado forms? Check out this post first!

Submit Form Button Styles

Changing the individual button styles

The code below will take you from off-brand to on-brand in minutes!

/* Submit button --- use !important */
.submit-form-button {
    background-color: #756033!important;
    border-color: #756033!important;
    border-radius: 0px!important;
    border-width: 2px!important;
    color: #fff!important!important;
    padding: 15px 20px!important;
    font-weight: bold!important;
    text-transform: uppercase!important;
    font-size: 12px!important;
    box-shadow: 0px 0px 0px 0px!important;
    line-height: 0;
}

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

.submit-form-button:hover {
    background-color: red!important;
}

/* Proposal total */
.proposal-total {
    color: black;
    text-transform: uppercase;}

/* Questionnaire save draft button */
.save-draft-button {
    background-color: #756033!important;
    line-height: 0;

}

Hide the buttons

Sometimes we want to hide some of the buttons or all of them. There’s a few reasons you may want to do this; creating a price sheet within Dubsado or when you want to show people your form but don’t want a load of test submissions!

If you only want to hide one button, just delete the other codes.

/* Submit button --- use !important */
.submit-form-button {
    display:none;
}

/* Proposal total */
.proposal-total {
   display:none;
}

</style>

Centre the buttons

By default the Dubsado buttons float to the right of the screen. Sometimes you’ll want to centre them. Simply add the following code. If you’ve already added some style using the code above, you can copy below and add it within the <style></style> tags. If you didn’t use the code above, you’ll want to make sure you wrap the center code below in <style></style> tags.

/* ----- Center the buttons ----- */
.proposal-total{
text-align:center;
}

.form-viewer-footer__buttons.hide-in-print {
    justify-content: center;
}

Creating a fixed total & submit bar

If you’ve got a long proposal will lots of add ons, it may be helpful to fix the total price and submit button to the bottom of the screen so that prospects can see the total as they select packages. You can use the code below in conjunction with the styling codes above.

  /* Footer area fixed to bottom */
.form-viewer-footer {
    position: fixed;
     bottom: 0;
     width: 100vw;
     margin: 0rem -50vw;
     left: 50%;
     right: 50%;
     display: flex;
     justify-content: center;
     z-index:99;
     height:50px;
    max-width:100vw!important;
  }
  
  @media print { 
  .form-viewer-footer {
    position: relative!important;
}
    }
  
  .form-viewer-footer-content {
    max-width: 100%!important;
    flex-direction: row;
    justify-content: center;
    padding:0px;
}
  
  .form-viewer-footer__buttons{
    width:auto;
    }
  
  /* Footer area colour*/
.form-viewer-footer {
  background-color: #f2f2f2;
  }

/* Proposal total */
.proposal-total {
     font-weight:bold;
     font-size:16px;
     color:white!important;
  text-transform:uppercase;
  }

/* Questionnaire save draft button */
.save-draft-button {
  background-color:transparent!important;
     border:0px;
     font-weight:bold;
     font-size:16px;
     color:white!important;
  text-transform:uppercase;
}

/* Submit button --- use !important */
.submit-form-button {
  background-color:transparent!important;
     border:0px;
     font-weight:bold;
     font-size:16px;
     color:white!important;
  text-transform:uppercase;}

/* PDF download button */
.pdf-button {
  background-color:transparent!important;
     border:0px;
     font-weight:bold;
     font-size:16px;
     color:white!important;
  text-transform:uppercase;
  }

/* PDF download button icon --- use !important */
.pdf-button svg {
  color:white!important}

/* Back to portal button */
.back-to-portal-button {
  font-weight:bold;
     background-color:transparent!important;
     border:0px;
     font-weight:bold;
     font-size:16px;
     color:white!important;
  text-transform:uppercase;
  }

/* Back to portal button back arrow --- use !important */
.back-to-portal-button svg {
  color:white!important
}
  
    

Changing the buttons text

Changing the submit button text

By default Dubsado’s proposal submit buttons have the text: Submit or Submit and Next, depending on if a contract or invoice follows the form. There is a little Javascript hack that will allow you to update the button text to whatever you like. Simply add the following code and change the highlighted text to whatever you like!

<script type="text/javascript">


function changeSubmitText(){
 var submitButton= document.querySelectorAll('button');
        for (var i = 0; i < submitButton.length; i++) {
               if (submitButton[i].innerHTML == ('Submit and Next')  || submitButton[i].innerHTML == ('Submit')){
              submitButton[i].innerHTML = 'Accept Proposal';
                }
         }
}
changeSubmitText();


</script>

Premade Snippets Styles

Some people love trying out codes, creating their own styles. Other people would rather have them done for them. If that sounds like you, I’d recommend checking out my free course that has loads of ready to go copy & paste code snippets!

Here’s a few examples: