How to Create a Dubsado Questionnaire That Actually Looks Good (And Works Even Better!)

Right now, your Dubsado questionnaire is a hot mess! The clunky layout. The default fonts. The endless scrolling just to hit submit. It’s giving ‘default template with zero effort’ – not exactly the vibe you want for your client experience.

They sigh. They skim. They put it off. They close the tab halfway through. And now you’re stuck chasing them for answers like some admin assistant instead of running your business.

Your brand? Sleek, pro, and put-together. Your questionnaire? A clunky mess from the depths of 2012.

And guess what? Clients notice (even though they tell you “it’s great”).

A messy form = instant dread.

🚩 They put it off.

🚩 They forget about it.

🚩 You end up chasing them like a desperate ex in their DMs.

A well-designed form, on the other hand?

✔ Looks pro AF 

✔ Guides them through smoothly (no brainpower needed)

✔ Makes you look like the organised queen you actually are

And best of all? Clients actually complete it. On time. Without you having to send yet another “Just checking in!” email that makes you wanna scream.

But you’ve taken the first step – you’re here! So let’s sort it out together…

How to Create a Custom Questionnaire in Dubsado

Prefer watching instead of reading? Here’s a quick walkthrough of the whole process!

Step 1: Plan a Questionnaire That Clients Actually Finish

Before we get to the fun stuff we need to get the basics in place.

Here’s how to get your questionnaire off to a solid start:

1. Decide on Your Structure (Before You End Up With a CVS Receipt-Length Form)

First things first – what do you actually need to ask?

Throwing in every possible question just because you can is how you end up with a form longer than a CVS receipt or Terms & Conditions you’ll never read.

Personally, I like to draft my questions in a doc first, as it’s easier to edit, and I can use it to just copy and paste into Dubsado. 

2. Use a Template (Or Go Rogue, I Won’t Judge)

Dubsado does have pre-made questionnaire templates. 

If you just need something quick and functional, you can tweak one of theirs. If you want something that actually feels like YOUR brand, starting from scratch is the way to go – or you can purchase one of my pre-made Dubsado templates that look anything but look but default. 

Either way, we’re not stopping at basic. We’re about to make this thing look polished AF!

**Note before we start: Because Dubsado loves to keep things ‘fun’ (read: frustrating), you can’t preview your questionnaire in the template editor. But don’t worry, I’ve got a cheeky little workaround for you.

1. Create a dummy project – just a test project for previewing.

2. Attach your questionnaire (once you’ve created it) to that project.

3. Open the project & view the form – Now you can see exactly what your clients will see.

Step 2: Make It Flow & Keep Clients Engaged

Now that you know what the form will be used for and what questions you need to ask, it’s time to get started.

A well-designed questionnaire should:

• Feel on-brand (not like a stock Dubsado template).
• Be clear and easy to complete (no walls of text or weird formatting).
• Guide clients seamlessly through each section so they don’t abandon it halfway through.

Here’s how I like to set mine and my clients up…

1. Create Your Questionnaire in Dubsado

• Go to: Templates → Forms → Questionnaires
• Click ➕ to create a new one
• Give it a clear title (e.g., “Onboarding Questionnaire”)

Right now, don’t stress too much about styling – just get the form created so we can start structuring it properly, and I’ll cover the design elements at the end. 

2. The Hero Section (First Impressions Matter)

Nothing gives me the ick faster than opening a form and getting slapped with 50+ questions, zero context.

No warm-up. No “hey, here’s what this is for!” Just: QUESTION 1: PLEASE ENTER YOUR LIFE STORY BELOW.

Let’s not do that to our clients, yeah? Instead, let’s ease them in like a proper host.

How to Build It:

• Start by clicking ➕ and select Container (one column)

• Set container width to 100% and content width to 80% (keeps text readable)

• Upload a background image (or use a solid colour)
• Adjust opacity and add a background colour if needed to keep text legible

Add a title & intro:

• Click ➕ and select Text Box
• Add a headline (e.g., “Onboarding Questionnaire”)
• I usually add in a second Text Box underneath so that I can add in some personalisation using the smart fields

Fix the padding issue

By default, Dubsado adds 60px of unwanted padding at the top – fix it by:

• Design Tab → General Styling → Set Top Padding to 0

This keeps the section clean and professional instead of looking like a weirdly spaced-out template.

Here’s what my draft hero section looks like: 

3. The Intro Section (Set Expectations & Keep It Friendly)

Now that the hero section is in place, let’s tell the reader what to expect from this Dubsado questionnaire. 

How to Build It:

• Add another section below your hero by clicking in the white space below the hero to open up the toolbar. 

• Add a Text Box inside the container (this will be for your heading)
• Use the ➕ inside the text box to add a two-column container underneath
  • Left side: add in your intro message
  • Right side: An image of you, your team, or something on-brand

• Go to Element Styling to tweak the padding, text alignment, and image size.

If the text and image feel too close together, click the ➕ button and select Spacer to add some breathing room. Or you can add top and bottom margins to the text box (start with 25px for balance).

Here’s what my example looks like:

Instead of an image, you could embed a welcome video or tutorial at the top of your questionnaire. This keeps the form warm and personal, rather than feeling like a generic admin task. I’ve written a whole step-by-step guide on this to help → Creating a custom client experience and embedding welcome videos into Dubsado questionnaires

4. The Banner Section (For Clear Section Breaks)

If your questionnaire covers multiple topics, banner sections help break it up so it’s easy to scan.

How to build it:

• Click ➕ and add a one-column container
  • Set container width to 100% and content width to 80%
  • Adjust top & bottom padding to 40px for spacing
• Add a Text Box inside for a section title (e.g., “Tell Us About Your Business”)

This helps keep things more structured, so clients don’t feel like they’re wading through an endless form.

Step 3: Ask the Right Questions

Now that your questionnaire has a clean layout, it’s time to add the actual questions – but without making it feel like an interrogation.

How to build it:

• Click ➕ and select Container (one column)
• Set container width to 100%, content width to 80%
• Adjust top & bottom padding to 40px for spacing

Add your questions using the right format

• Short answer – for quick responses (e.g., “What’s your Instagram handle?”)
• Long answer – use sparingly; people hate writing essays (e.g., “Tell me about your ideal client.”)
• Checkboxes – perfect for multiple-choice (e.g., “What services are you interested in?”)
• Dropdowns – best when only one answer applies (e.g., “How did you hear about us?”)
• File Uploads – ideal for collecting logos, inspiration images, or brand guidelines, etc. 

Oh and here’s a little hot tip for you: You know that annoying back-and-forth email that goes:

“Hey, where should I upload my files?”

“Oh, here’s your Google Drive link!”

You can eliminate that by embedding each client’s folder link directly inside the questionnaire.

Wanna know how to do it? Check out my guide on how to use custom-mapped fields to link client folders in Dubsado questionnaires.

Step 4: Keep them Moving

Most people hit ‘submit’ and instantly feel like they just sent a risky text. Did it go through? Will I get a reply? Are they ghosting me already? Let’s fix that.

1. Add a Next Steps Section

You have two options for this:

Option 1: Add a simple text box

• Click ➕ and select Container (one column)
  • Set container width to 100%, content width to 80%
  • Adjust top & bottom padding to 40px for spacing
• Click ➕ inside the container and add a Text Box
  • Write a short, clear message letting them know what happens next

Option 2: Use custom CSS for a styled next steps section

Want a more polished look? Use my custom CSS to style this section properly.

• Click ➕ and add an HTML Block
• Paste in the Next Steps CSS snippet

<div class="text-box">
  <div class="box">
    <h5>01.</h5>
    <h2>Complete The Questionnaire</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, dolor eget tempor interdum, nisi tortor pellentesque ex, eget porta purus ante suscipit magna.</p>
  </div>

  <div class="box">
    <h5>02.</h5>
    <h2>Preparations For The Day</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, dolor eget tempor interdum, nisi tortor pellentesque ex, eget porta purus ante suscipit magna.</p>
  </div>

  <div class="box">
    <h5>03.</h5>
    <h2>Your Big Day</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet, dolor eget tempor interdum, nisi tortor pellentesque ex, eget porta purus ante suscipit magna.</p>
  </div>
</div>

<style>
/* Number Styling */
.box h5 {
  font-size: 15px;
  color: ;
 text-align:center;
}

/* Paragraph Text Styling */
.box p {
  font-size: 18px;
  color:;
        text-align:center;
}
  
  /* Paragraph Text Styling */
.box h2 {
  font-size: 28px!important;
  color:!important;
    text-align:center;
}

/* Box Styling */
.box {
  flex: 1;
  padding: 20px;
  margin: 10px;
  background-color: transparent; /* Box background color */
  border-radius: 0px; /* the higher the number the rounder it will be */
  border-right: 0.5px solid white; /* Right border for divider line */
}

/* Remove right border for the last box */
.box:last-child {
  border-right: none;
}

/* Container Flexbox Styling */
.text-box {
  display: flex;
  flex-wrap: wrap;
}

/* Responsive Design */
@media (max-width: 768px) {
  .text-box {
    display: block;
  }

  .box {
    margin: 10px 0;
    border-right: none; /* Remove border on small screens */
  }
}
</style>

If you’re uncomfortable editing code (I promise it’s not that scary), watch my YouTube video (I’ve skipped it to 29:50 for you :)), and I’ll show you exactly how to edit the text, colours, and fonts in the CSS to match your branding.

Step 5: Make it look 🔥

Now for the final polish – because ‘meh, that’ll do’ is NOT the vibe when you’re trying to impress clients.

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

2. Improve the Design & Functionality with Custom CSS

Dubsado’s built-in design options are painfully limited, but with a little CSS magic, you can:

✔ Change fonts and colours to match your branding

✔ Adjust spacing so the form doesn’t feel cluttered

✔ Make checkboxes, dropdowns, and buttons actually look clickable

The CSS snippets & how to apply CSS:

Find the CSS snippets you want to use and then go back to your form template and paste the code into the bottom of “Edit Custom CSS” section, which looks like the below.

If you’re feeling unsure, I’ve jumped to 13:40 in my YouTube video, and I’ll walk you through exactly how to do it and tweak it to match your brand.

Here are all the snippets you need for customising your form fields

CSS For All form fields

This code block adds space under each element so that the answers aren’t crammed together:

/* Add space below the form fields */
.dubsado-form .form-element__input, 
.free-response-element, 
.form-checkbox-element, 
.form-multiple-choice-element {
  margin-bottom: 25px !important;
}

Changing the font family and sizing of all the form field titles:

/* All fields label text */
.form-element__input-label {
font-family: "montserrat", sans-serif;
color:#000!important;
font-size:15px;
}

Changing the font size, colour and font family of all the placeholder text:

/* All fields placeholder text */
.dubsado-form input::placeholder,
.dubsado-form textarea::placeholder,
.dubsado-form .select--placeholder {
font-family:"YOURFONT"; 
background-color:white;
    font-size:14px;
}

CSS For Dropdown Module Styling

Styling of the dropdown border:

/* Dropdown fields */
.dubsado-form select {
border: 1px solid #000!important;
border-radius:0px;
}

Styling of the dropdown arrow

/* Dropdown arrow */
.form-element__select-container::after {
color:#000!important;
}

Styling of the text and field after the dropdown has been selected:

/* Dropdown selected option text --- use !important for color */
.dubsado-form .form-element__select-container .select--selected-option
{
font-family:your-font!important;
  background-color:white!important;
}

CSS for Checkbox Styling

Checkbox label text and font size of the checkboxes:

/* Checkbox option label text */
.form-checkbox-element .checkbox-option label {
font-family: "your-font", sans-serif;
font-size:13px;
}

Checkbox styling of the border:

/* Checkbox unchecked */
.form-checkbox-element .checkmark {
border: 1px solid #000!important;
border-radius:0px!important;
background-color:!important;
}

Changing the checkbox background colour when the box is marked:

/* Checkbox checked */
.form-checkbox-element .checkbox-option input:checked ~ .checkmark {
background-color:#000!important;
}

CSS For Multiple Choice Styling

Changing the multiple choice label text and font size of the boxes:

/* Multiple choice option label text */
.form-multiple-choice-element .radio-option label {
font-family: "montserrat", sans-serif;
font-size:13px;
}

Multiple choice radio button styling of the border:

/* Multiple choice radio button unselected */
.form-multiple-choice-element .checkmark {
border: 1px solid #000!important;
}

Changing the multiple choice radio background colour when the box is marked:

/* Multiple choice radio button selected */
.form-multiple-choice-element .radio-option input:checked ~ .checkmark {
background-color:#000;
border-color:#000;
}

Changing the multiple choice radio button inner circle colour when the radio button box is marked:

/* Multiple choice radio button selected marker / .form-multiple-choice-element .radio-option .checkmark:after {
background-color: #fff; / inner circle color */
}

CSS for Date Form Field Styling

Adding a border and changing the background colour of the date form field:

/* Date select input fields --- use !important for borders */
.dubsado-form .date-input input {
border:1px solid #000!important;
background-color: white!important;
}

Changing the border and background colour of the date icon field:

/* Date select calendar button --- use !important */
.dubsado-form .date-input .icon-button__button {
border: 1px solid #000;
background-color:white!important;
}

CSS For File Uploader

This css allows you to style the uploader button:

/* File uploader button */
.file-element__drop-zone .upload-btn {
font-family:YOUR-FONT;
color:#;
background-color:#;
border-radius: 0px!important;
border: 1px solid black;
font-size: 14px;
text-transform:;
letter-spacing:0px;
padding: 12px 30px;
}

This css allows you to change the button on hover

/* File uploader button hover */
.file-element__drop-zone .upload-btn:hover {
background-color:;
color:;
}

This css allows you to change the style of the text underneath the button:

/* File uploader text below button */
.file-element__drop-zone {
}

3. Add a Footer for a Polished Finish

It’s not pointless, it’s the mic-drop to the end of your form. Making it look complete and professional.

• Click ➕ and select Container (one column)
  • Set container width to 100%, content width to 80%
  • Adjust top & bottom padding to 40px for spacing
• Click ➕ inside the container and add a Text Box
  • Add any final details you want, such your biz name or a thank you message. 

If you want to take it a step further like I did in my example below, you can add two separate container to create some contrast and include some images. 

Your Dubsado Questionnaire Is Now Sexy AF

Congrats, your Dubsado questionnaire is now sexier than your ex’s rebound. Clients are gonna LOVE filling it out (and you’ll love not chasing them for answers).

No more ugly forms. No more frustrating scrolls. No more drop-offs halfway through.

Just a polished, professional, and user-friendly form that reflects your brand, guides clients effortlessly, and saves you from endless follow-ups.

And if you’re still staring at your Dubsado questionnaire like it owes you money –  let’s fix that! 

Book a free discovery call, and I’ll get your onboarding working like a dream – without you having to rage-Google ‘WTF is CSS?’ ever again.