How to Create a Fixed Bottom Navigation in Dubsado

Dubsado Customizations
Written By Colin Tierney

A fixed (or sticky) bottom navigation bar keeps the subtotal and submit button anchored at the bottom of the screen as your prospective clients scroll through your proposal.

This is particularly useful for longer forms, allowing clients to easily track their total as they select packages and add-ons. Additionally, it serves as a constant reminder for them to submit the form, reducing the likelihood of abandoned proposals.

Here’s a preview of what that looks like.

Dub-ins template with a bottom navigation bar showing submit buttons and package total that remains in view.

Make Your Dubsado Submit Buttons Display While Scrolling

To implement this feature, follow these steps:

Step 1: Add the CSS

  1. In the form builder, click on Form styling > Scroll down > click the Edit CSS button

  2. Copy and paste the following code into the CSS:

/* FIXED BOTTOM SUBMISSION BAR */
.form-viewer-footer {
    position: fixed;
    background-color: #092540; /* Change bar background color */
    bottom: 0;
    width: 100vw;
    margin: 0rem -50vw;
    left: 50%;
    right: 50%;
    display: flex;
    justify-content: center;
    z-index:99;
    padding:10px;
}
.form-viewer-footer-content {
    max-width: 100%;
    flex-direction: row;
    justify-content: center;
    padding:0px;
}
.form-viewer-footer__buttons{
    width:auto;
}

Looking for a more advanced submission bar? One that lets you place your submit buttons anywhere on your form—complete with a scroll-to-top arrow—all without touching a single line of code? Check out our Submission Bar plugin using Genie 4.0!

Step 2: Customize (Optional)

You shouldn’t need to make any changes to the code above, but if you want to tweak the background color or spacing, feel free to adjust the CSS properties accordingly.

If you’d like to update the style of your buttons (e.g., fonts, colors, shapes), check out How to Style, Hide & Edit All Dubsado Buttons.

And there you have it! A sleek, fixed navigation bar in seconds. Now your clients will always have easy access to their subtotal and submit button—making the booking process smoother and more intuitive.

Final Thoughts

Implementing a fixed bottom navigation in your Dubsado forms is a quick and effective way to enhance your client’s experience. By ensuring that critical actions like viewing the subtotal and submitting the form are always accessible, you not only improve usability but also increase the chances of conversion.

This straightforward tweak reinforces a professional look and offers the flexibility to be further customized to match your brand’s style. Whether you're happy with the default setup or eager to experiment with additional features, this guide serves as a foundation for boosting user engagement.

Ready for more? Check out our advanced Submission Bar plugin powered by Genie 4.0 for even greater customization—allowing you to place submit buttons anywhere on your form, along with a handy scroll-to-top arrow, all without writing a single line of code.

Happy designing!

TABLE OF CONTENTS
Colin Tierney http://www.tierneystudio.com