Elevate Your Dubsado Buttons

✨ Buttons aren’t just functional—they’re an invitation. They should captivate your prospects, making them eager to click and engage. Unfortunately, the default Dubsado buttons in forms and proposals can feel a bit uninspiring. But don’t worry! With a little CSS magic, you can transform your buttons into standout elements that reflect your brand and elevate your client experience.

Sometimes, Dubsado’s default button and field names might not align perfectly with your form’s flow. Want to tweak your top bar links or button text for a more tailored fit? We’ve got you covered.

In this guide, you’ll find every CSS code snippet you need to style your buttons, plus JavaScript hacks for fully customizing button text.

🌟 Not sure how to add CSS to your Dubsado forms? Head over to this guide for a step-by-step walkthrough before diving in.

Package Select Button Styling

Let’s start with design. Here’s how to make your buttons pop while keeping them on-brand:

Unselected Button Style

/* Package Select Button when unselected */
.btn.btn-squared.border-around {
    color: #D4B984;
    text-transform: uppercase;
    font-weight: bold;
    padding: 15px 25px;
    border-color: #D4B984;
    border-width:4px;
    border-radius:0px;
    transition: 0.5s;
}

Hover Effect

/* Package Select Button when hovered */
.btn.btn-squared.border-around:hover {
   background-color: #D4B984!important;
   border-color:#D4B984!important;
   color:white!important;
}

Selected Button Style

/* Package Select Button when selected */
.packageSelected .btn.btn-squared.border-around{
   background-color: BD9C5E!important;
   border-color:BD9C5E!important;
   color:white!important;
}

These styles ensure your buttons look polished and interactive, creating a seamless experience for your clients.

Customizing Button Text

Sometimes, you need more than a stylish button. You need the text to resonate with your clients’ journey. Here’s how you can achieve that with CSS and JavaScript:

Changing the text to selected

By default, Dubsado’s package buttons display the text Select EVEN once the package has been selected.

Want the button to say Selected once clicked? Simply add the following CSS code to your form:

/* Change button text to selected */
.packageSelected .btn:after{
       content: "ED";
}

Completely Change the Button Text

For Static Text (Same for Selected and Unselected)

You may want to change the text completely. The best way to do this is with a little Javascript. Use the following JavaScript to update the button text globally:

Use the code below if you’d like to change the text to be the same both selected and unselected.

<img class="hide-on-front" src="https://formsandflows.com/wp-content/uploads/2020/07/FF-Logo.png" onload = "
function changeSelectText(){

	var selectButton=document.getElementsByClassName('btn');
	for (var i = 0; i < selectButton.length; i++) {
		if (selectButton[i].innerHTML == 'Select'){
			selectButton[i].innerHTML = 'Yes Please!';
		}
	}
}
changeSelectText();
" width="10"/>

For Dynamic Text (Different for Selected and Unselected)

To set unique text for selected and unselected states, extend the logic using conditional statements or separate functions.

Use the code below if you’d like to change the text to be the different for selected and unselected.

<img class="hide-on-front" src="https://formsandflows.com/wp-content/uploads/2020/07/FF-Logo.png" onload="
function updateButtonText() {
    // Select all buttons with the class 'btn'
    var buttons = document.getElementsByClassName('btn');

    // Loop through each button
    for (var i = 0; i < buttons.length; i++) {
        (function(button) {
            // Check if the button is selected or not
            var isSelected = button.classList.contains('packageSelected');
            
            // Set the initial text based on the selected state
            button.innerHTML = isSelected ? 'Selected' : 'Select';

            // Add an event listener to update text when the state changes
            button.addEventListener('click', function() {
                var isNowSelected = button.classList.toggle('packageSelected');
                button.innerHTML = isNowSelected ? 'Selected' : 'Select';
            });
        })(buttons[i]);
    }
}

// Run the function when the page loads
updateButtonText();
" width="10" />

Why Styled Buttons Matter

Well-designed buttons go beyond aesthetics. They:

• Reinforce Your Brand: Align button styles and text with your brand’s voice and personality.
• Boost Engagement: A well-placed and beautifully styled button can encourage more clicks.
• Improve User Experience: Clear, customized text helps clients navigate your forms with ease.

---

At Forms & Flows, we’re all about turning “good enough” into “exceptional.” Whether it’s crafting seamless workflows, designing stunning forms, or tweaking small details like buttons, we help entrepreneurs create a client experience they can be proud of.

Ready to elevate your forms? Explore our Form Kits and Code Snippets to get started.

✨ Your forms deserve to shine—let’s make it happen!