How to Customize Your Dubsado Date Picker Placeholder Text
Ever wanted to make your Dubsado Date Picker more aligned with your brand? Let’s say you’re a wedding photographer using Dubsado, and you want your clients to select their wedding date from your form. By default, the placeholder text for the Date Picker is “Select Date.” But wouldn’t it feel more inviting and on-brand to say, “Choose your wedding date” instead?
It might seem like a small change, but details like this create a seamless experience that makes clients feel like you’ve thought of everything. And in the world of bookings, small refinements like these can turn a “maybe” into a “heck yes!”
In this tutorial, I’ll show you exactly how to customize the placeholder text in your Dubsado Date Picker, with step-by-step instructions and ready-to-use code snippets.
Default Date Picker placeholder
After adding Dub-ins code (Note: extra styling to the form fields done by Dub-ins’ Genie, our no-code Dubsado form generator).
Change the Date Input Placeholder
To implement this update, follow these simple steps:
Step 1: Add an HTML Block
Open your form in the Dubsado Form Builder.
Drag an HTML Block onto your form.
Remove any example code that appears inside the block.
Step 2: Paste the Custom Code
Copy and paste the following script into the HTML Block:
<script type="application/javascript">
setTimeout(() => {
document.querySelector(".date-input input").placeholder = "Choose your wedding date";
}, 0);
</script>
Step 3: Customize the Placeholder Text
If you’d like different text, simply replace Choose your wedding date with your preferred wording. Just be sure to leave the quotation marks around it!
Change Both Date and Time Placeholders
Want to go a step further and customize the Time Picker placeholder too? You can update both fields at once using this script:
<script type="application/javascript">
setTimeout(() => {
// Change the date input placeholder
document.querySelector(".date-input input").placeholder = "Choose your wedding date";
// Change the time input placeholder
document.querySelector(".time-input").placeholder = "What’s your ceremony time?";
}, 0);
</script>
This will update:
Date Picker Placeholder → “Choose your wedding date”
Time Picker Placeholder → “What’s your ceremony time?”
As before, feel free to adjust the text to match your brand’s voice!
Wrapping It Up
Customizing small details like this helps create a polished and professional experience for your clients. Whether you’re a wedding photographer, planner, or any service provider using Dubsado, personalizing your forms ensures that every interaction with your brand feels intentional.
