Sophie King

I'm Cait Potter — client experience & workflow coach for creative go-getters. I'm here to help you make your business ROCK.

tell me more...

crowd favs

on the blog

Getting Started in
Dubsado!

Code-Free vs CSS Form Design

Check out my office!

What it costs you to DIY your Dubsado Setup

Help & Hacks

Code-Free vs. CSS Form Design in Dubsado

August 3, 2021

< back to blog home

I offer absolutely beautiful code-free form design with my signature Done-For-You Dubsado Setup package, but sometimes, clients have needs that go beyond the capabilities of Dubsado’s native features. For those who need more, I offer custom coded CSS form designs and/or conditional logic upgrade, depending on your needs. Form design is probably THE most time consuming part of setting up Dubsado, but it can also set your business apart from your competitors. In this increasingly digital world, you have to show up for your clients consistently and on brand! So today, I’m writing to share my take on code-free vs CSS form design in Dubsado AND sharing with you my favorite resources for getting started in CSS design!

So first, what’s the difference?

Code-Free Forms

Code-Free form design is done using Dubsado’s native form design elements. To get these looking SUPER fancy, you’ll have to use Canva. This can be very advantageous for those starting out because Canva feels much more familiar than learning CSS or coding. You can still create absolutely beautiful forms with Canva and creative use of Dubsado’s built-in elements, which is why I offer this with my signature package.

However, there are certain things that you just can’t do without coding, such as making a section or heading go the full width of a screen. Using coding in our form design options literally expands the functionality of Dubsado to a whole new level. To help illustrate the differences, check out this screenshot of a code-free form.

CSS Forms

The goal of designing forms in Dubsado is to make the forms look like an extension of your website. CSS Design allows us to get much closer to that ability because it allows us to do things like import custom fonts, make images and colors go the full width of the screen, and allows us to create movement in forms like with parallax scrolling or packages flying in. This type of functionality might be critical to industries like web designers, or people who are especially particular about their brand aesthetic.  

Check out this screenshot of the same form as above, but designed with CSS elements as opposed to code-free.

Conditional Logic

Conditional Logic is a method of making forms more interactive and responsive. Basically it allows you to make certain questions appear based on certain conditions. 

A few common examples include:

  • asking clients to fill in both a billing address and a mailing address. If the mailing address is the same as the billing address, we do NOT want to ask a client to fill out the same address twice. We only want those mailing address fields to show if it’s DIFFERENT than the already entered billing address. 
  • wanting clients to only be able to select one MAIN PACKAGE but multiple ADD-ONS
  • wanting to show a selection of questions based on which package a client selects

Here’s a quick video on how conditional logic works to ease your mind:


My recommended CSS form designer: Forms & Flows

For my DFY clients, I highly recommend Alice Coleman’s Forms & Flows templates, and I follow her methodology when I custom code proposals as well. Here’s why:

  1. There’s no monthly subscription & no commercial fee.
    Some CSS Form Design options require you to maintain a subscription to their service in order for you to use the codes they’ve developed, OR they limit the codes that you have access to with your 1 time purchase.
    With Forms & Flows, you pay for everything ONCE and then you have access to it for life. This ensures that no matter how much time goes by, you’ll be able to edit, update, or completely redesign your forms at the drop of a hat, with access to all the materials you need to do so. Plus, if you buy the lifetime BUNDLE, you get access to FIVE sets of form templates PLUS ANY NEW ONES EVER RELEASED! How awesome is that?
    Get the lifetime CSS form bundle!
    Note, the link above is my affiliate link which provides me a small commission (at no cost to you) in exchange for referring you to Forms & Flows. That said, even if I never made a single penny on it, I would still wholeheartedly recommend her templates and coding method.
  2. Forms & Flows coding is flexible and editable right IN Dubsado.
    You don’t need to maintain a login or access to a third party site once you’ve gotten the coding you need installed. You’ll be able to do any editing and customizing right INSIDE Dubsado, which will save you so much time and will make it easier for you to edit your forms as your business grows and changes. Here’s an example of how easy conditional logic is to edit right inside Dubsado:
  3. Forms & Flows helps you actually LEARN coding.
    Don’t worry, I don’t mean that it tries to turn you into a hacker fit to be on 24…. I just mean that Alice provides you with the background information you NEED to know if you’re going to run your business using forms styled with CSS. Imagine that it’s the middle of the night and you need to get a proposal out, but you’re unable to access your third party designer page due to some error. Or that you need to make a quick change that should only involve changing one or two words around in the code. Through a FREE course on CSS design, Forms & Flows teaches you enough that you can customize & update your forms as you like and if something ever breaks, you’ll be empowered to fix it.
  4. I believe in supporting businesses who are and do good.
    Alice, the owner of Forms & Flows, is the definition of the kind of entrepreneur I want to support. Her values of community over competition, inclusivity, and education align so well with both my personal and business values. Beyond just the existential, Alice is so helpful and is there for you whenever you need her, providing the level of customer care that I require in order to support ANY business. She is a web designer and is a coding goddess & expert. Not only is she extremely talented, but she also truly cares about you having beautiful, unique forms. She is very active in her facebook group, making sure to take care of all questions and issues that may arise, and she actively engages with feature requests!

With Forms & Flows, you don’t have to be scared of using CSS to create beautiful forms!

Use the links below to check out my favorite products/offerings from Forms & Flows!

If you decide to stick with code-free…

CSS is wonderful, but if you decide to stick with a code-free design for now, check out my form design templates in my shop!

And THAT’S everything you need to know about code-free vs CSS form design in Dubsado!!! Happy form designing!

Leave a Reply

Your email address will not be published.

Need to sign up for Dubsado?

code:

Use my code to get 30% off your first bill on TOP of any other sales or promotions Dubsado is offering. 

xocait

PPSSSTTTTTTT! I *highly* recommend signing up for an annual plan (instead of a monthly plan).
Wayyyy better savings!

I'm Cait Potter — client experience & workflow coach for creative go-getters. I'm here to help you make your business ROCK.

tell me more...

crowd favs

on the blog

Getting Started in
Dubsado!

Code-Free vs CSS Form Design

Check out my office!

What it costs you to DIY your Dubsado Setup

0
    0
    Your Cart
    Your cart is emptyReturn to Shop
      Apply Coupon