Ever wished for a more seamless way to manage your questionnaires, contracts, or sub-contracts in Dubsado? Whether you’re a creative entrepreneur or service provider, having a “Create a Fixed Submit Button & Save Draft” that stays visible as clients fill out your forms can transform the user experience. Plus, wouldn’t it be brilliant if clients could save their progress and come back later?
Good news: you don’t need to splurge on fancy third-party tools to make this happen. In this guide, we’ll walk you through how to create a fixed submit button and add a save draft function in Dubsado—for free. This simple hack will boost client satisfaction and make your workflows even smoother.
Watch the full tutorial here ⬇️
1. Fix the Submit Button (So Clients Don’t Have to Scroll Forever)
By default, Dubsado places the submit button way at the bottom – which means clients might miss it or get frustrated scrolling.
Fix: Add a floating submit bar so clients always see it – no endless scrolling!
Step-by-step tutorial here → How to create a fixed submit bar in Dubsado forms
1. Create a fixed bar for the save draft & submit button
/* Footer Area - Positioning and layout of the footer */
.form-viewer-footer {
position: fixed; /* Fix the footer at the bottom of the screen */
bottom: 0; /* Position it at the very bottom of the viewport */
width: 100vw; /* Set the footer's width to 100% of the viewport width */
margin: 0rem -50vw; /* Adjust the margin to center the footer */
left: 50%; /* Position the footer horizontally centered */
right: 50%; /* Align the right side of the footer */
display: flex; /* Use flexbox for layout */
justify-content: center; /* Center the content inside the footer */
z-index: 99; /* Ensure the footer appears above other elements */
height: 70px; /* Set the height of the footer */
max-width: 100vw !important; /* Ensure the footer doesn’t exceed the viewport width */
}
/* Footer Content Styling */
.form-viewer-footer-content {
max-width: 100% !important; /* Allow content to stretch to 100% width */
flex-direction: row; /* Arrange footer content in a row */
justify-content: center; /* Center the content */
padding: 0px; /* Remove any padding */
}
/* Footer Buttons - Styling for buttons inside the footer */
.form-viewer-footer__buttons {
width: auto; /* Set buttons to have automatic width */
}
@media (max-width: 700px) {
.submit-form-button {
width: auto; /* Adjust the width of the submit button */
padding: 10px 15px; /* Adjust padding for mobile view */
}
.save-draft-button {
width: auto; /* Adjust the width of the save draft button */
padding: 5px 15px !important; /* Adjust padding for mobile view */
}
}
2. Add a background colour to your fixed bar
Use this css to add a background colour to your fixed footer:
/* Footer Background Color */
.form-viewer-footer {
background-color: ; /* Set background color using a CSS variable */
}
3. Customise your save draft button
Use the below snippet to style your “Save Draft” button:
/* Save Draft Button Styles */
.save-draft-button {
background-color:; /* Set background color using a CSS variable */
border-radius: 0px !important; /* Remove rounded corners */
color:!important; /* Set text color */
border: 1px solid !important; /* Set border color to match background */
font-family: Your-Font; /* Use the Bicyclette font family */
font-weight: 400; /* Set font weight */
font-size: 14px !important; /* Set font size */
text-transform: uppercase; /* Make the text uppercase */
letter-spacing: 2px; /* Add spacing between letters */
}
.save-draft-button:disabled {
opacity: 0.9; /* Reduce opacity when the button is disabled */
}
.save-draft-button:hover:enabled{
background-color:; /* Set background color on hover */
color:; /* Set text color on hover */
}
4. Customise your Dubsado questionnaire submit button
Use the below snippet to style your “Submit” button:
/* Submit Button Styles */
.submit-form-button {
background-color:# !important; /* Set background color using a CSS variable */
border: 1px solid #; /* Add border */
border-radius: 0px !important; /* Remove rounded corners */
letter-spacing: 2px; /* Add spacing between letters */
font-weight: 400; /* Set font weight */
font-size: 14px; /* Set font size */
color: #; /* Set text color */
text-transform: uppercase; /* Make the text uppercase */
font-family: YOUR-FONT; /* Use the font family */
margin-top: 5px; /* Add space above the button */
}
4. Customise your PDF Download Button & Back To Portal
Use the below code to hide the PDF Download Button and Back To Portal Button:
/* PDF Download Button - Hidden */
.pdf-button {
display: none !important; /* Hide the PDF download button */
}
.pdf-button svg {
color: white !important; /* Set icon color to white */
display: none !important; /* Hide the SVG icon */
}
/* Back to Portal Button - Hidden */
.back-to-portal-button {
font-weight: bold; /* Make the font bold */
background-color: transparent !important; /* Make the background transparent */
border: 0px; /* Remove border */
font-size: 16px; /* Set font size */
color: white !important; /* Set text color to white */
text-transform: uppercase; /* Make the text uppercase */
display: none !important; /* Hide the button */
}
.back-to-portal-button svg {
color: white !important; /* Set icon color to white */
display: none !important; /* Hide the SVG icon */
}
Adding buttons for external links into your Dubsado Questionnaires
The file uploader by default only allows you to upload files under 8MB so, if you are wanting clients to upload video content sometimes this just doesn’t work with the questionnaires so in this case you can link Google Folders or Dropbox – whichever you prefer.
If you don’t want to have to go into every single form to do this you can use the custom mapped fields to create additional fields within your client projects so that it’s easier to access.
If you are looking to customise the buttons within the questionnaire that link to external URLs then check our my blog with the css snippets – How To Use Custom-Mapped Fields To Link Client Folders (like Google Folders, Dropbox etc) In Dubsado Questionnaires.
Final Thoughts
By adding a fixed submit button and enabling the save draft functionality in your Dubsado forms, you’re not just improving usability—you’re creating a more professional and client-friendly experience. These small yet impactful adjustments can make all the difference when it comes to client satisfaction and streamlining your processes.
The best part? You’ve achieved this without spending a penny on extra tools or plugins. It’s proof that with a little creativity and know-how, Dubsado can be customised to fit your exact needs.
Give this a try on your next questionnaire, contract, or sub-contract, and watch how it transforms the way clients interact with your forms. Have any questions or tips of your own? Share them in the comments below—I’d love to hear how you’re optimising Dubsado for your business!
