Latest updates from the Dubsado team
Originally posted: July 12th, 2022
Welcome to the new form builder experience!
When we began the journey of redesigning our form builder, we had a couple of important goals. First, we wanted to create a more powerful foundation for our form builder that would support many more features and customization options in the years to come. Second, we wanted to give everyone the ability to create beautiful forms without the barrier of needing custom code. So let’s jump in and take a look at what’s new.
With this release we have added:
All-new form builder design and layout
Breadcrumbs for easy navigation
Preview mode
"Sticky" save button for easier saving on long forms
Inline element adding
Inline text editing
Improved performance with easy dragging of elements
Click to edit settings
Form style panel (plus general form padding options)
Dedicated CSS editor
New sharing panel with one-click copy embed code and link
"Columns" are now called "containers"
Full-width containers
Container background colors and images
Improved image uploader
Container background image opacity
Container padding and margins
"Yes/no" field changed to "Multiple choice" and now allows more than two options
"Private" forms changed to "password-protection" setting
Toggle for the new form builder
Legacy mode option for forms with custom code
These changes give us the stronger foundation we needed to add more of the features and customization options you’ve been asking for.
You can view our keynote webinar all about the new things in this feature release plus a sneak peek at some features coming soon:
In this keynote, we mentioned we were going to share a proposal with you to get you started. Click here to access the form. It might look a little weird on that first screen, but once you click "copy to account" it will show correctly. (Note: You must be logged into Dubsado first before clicking this link)
First, we’ve got a brand new layout. We took advantage of the full width of the page to give you more space to focus on building your form. Also, over on the left, you’ll find the element library. You can drag and drop elements from the element library onto the form, or click an element to add it to the bottom - just like in our old builder.
In the top right we have some breadcrumbs that will take you back to your form templates.
We also redesigned our preview mode so that you can preview your form just as your clients will see it, without exiting the builder. It’s easy to toggle back and forth while you’re editing.
.gif)
The save button will now stick to the top of the page, so you’ll be able to access it more easily when editing long forms.
Now there’s a new way to add elements to your form. Hover over any existing element and click the + icon to add a new one right inline.
You can edit text inline, too. Just double click any element with customizable text and you can start making your edits right away. Click the checkmark or click outside the element when you’re finished to save your changes. It works on text boxes, packages, and even question elements.
.gif)
Dragging elements around the form is still super easy, especially now with our improved performance. Just click anywhere on an element to pick it up and you can drag it around the form. A green bar indicates exactly where the element will land.
Clicking on an element will open its settings in the side panel. This is where you can map your short answer and date select fields, mark a field as required, and adjust other settings as needed.
For general form settings, click on the gear icon in our new side navigation panel. This is where you can adjust all the settings specific to the type of form you are editing.
We have added a brand new form styling panel, which you can access by clicking the palette icon. This is where you’ll find the question styling settings and our new form padding settings that let you control the space at the top and bottom of the form. This is especially useful when you plan to embed your form on a website, and don’t want any extra space above your elements. We can’t wait to add more settings and customization options here!
For those of you who love getting creative and styling your forms with custom CSS, we added a dedicated CSS editor in the styling panel! Now, there’s no need to have an invisible code block floating around on your form. Don’t worry, HTML and Javascript are still supported as well. You can add that code to an HTML block element and preview your form to see it in action.
For forms that can be shared publicly, you’ll find the new share panel here on the left-hand side. We made it super easy to copy your embed code or sharing link with a single click!
Along with our new form builder, we are so thrilled to launch a very exciting update to the old columns element.
The container element is the same as the columns element you already know - it has a new name and some amazing new settings. Select from one, two, three, or four columns, then use the plus icons to add elements directly into your container, or drag them in.
Hovering your mouse over a container element displays a green toolbar. Just click and hold on this toolbar to pick up your container and move it around the form.
.gif)
But here’s where the real fun starts. You can adjust the width of your container and the width of the content inside.
You can now make the container take up the full width of the page, allowing you to create beautiful, colorful sections on your forms. The width of the container is a percentage, so it’s completely responsive. A slider adjusts the width of the content inside your container. It’s also a percentage, so it will adjust automatically based on the size of the container and the screen.
With our new image uploader, it’s even easier to bring an image into your Dubsado form. For a full-width element, we recommend an image 2500px or wider for best results. And the results are so fun. 🎉
You can now blend a background color with your image. In the example below, we selected a dark background color and adjust the background image transparency to blend the two together really making the image over it pop!
Our new padding and margins allow you to do just that. Adding padding will give some space around our content and show more of the background image. Below you can see we are adding bottom margin to this container to create a little space between the elements below.
Previously, this field could only have two options. With this addition, you can add more than just two options for your clients to select from. But they can only select one option on this list.
Same functionality, now with a new name. We changed this to ease any confusion around this feature and make it more clear what it is doing.
Custom code, including HTML, CSS, and Javascript, is still supported on new Dubsado forms. However, we had to make a few adjustments behind the scenes to support our new features, which might have an impact on your custom code.
If your form does NOT have any custom code on it, head to the form settings panel and turn legacy mode off so that you can start using our new features right away!
At Dubsado, we want your brand to be front and center. By redesigning our form builder experience from the ground up, we were able to create a more powerful foundation for adding new customization and design options that will allow you to create beautiful, branded forms.
Head to Templates > Forms and use the toggle at the top of the page to turn on the new form builder experience! This toggle will turn the new builder on for the whole brand, so be sure to coordinate with your multi-users if you have them.
No, simply turning the new builder on will not make any changes to how your forms appear to your clients. That's why we created legacy mode!
Yes! We added the toggle to give you flexibility as you test and adjust to the new builder. If you ever run into any troubles, or just want to get a form out quickly while you're still learning your way around, you can always turn the new form builder off using the toggle on the Templates > Forms page.
⛔ Heads up! If you decide to turn the new form builder off, all of your forms will revert to legacy mode while you are using the old form builder. Turning the new form builder back on will restore your changes.
Yes! The toggle on the Templates > Forms page will turn the new builder on or off for the whole brand. Be sure to give any multi-users on your brand a heads up.
Yes, absolutely! We are blown away by the amazing forms we’ve seen created with the help of custom code, and we want to support your creativity.
Custom HTML and Javascript can be added to your form with our HTML block element (formerly known as a code block). And we added a dedicated CSS editor in the form styling panel for you to manage all of your styles!
To keep Dubsado safe and secure for all, we have implemented additional security measures. While JavaScript is still supported on Dubsado forms, we no longer allow it to run while you are editing your form in the form builder. All you need to do is Preview your form to see it in action.
In order to have access to all the latest form builder features, and for the best compatibility with the new form builder experience, we do recommend updating your custom code to work with legacy mode turned OFF. You will only need to do this on your form templates. Forms already added to projects can remain in legacy mode and do not need to be updated.
This article will help you decide if and when to turn legacy mode off on individual forms and our updated CSS cheat sheet will help you get started.
If you purchased code from a third party, we recommend reaching out to them for guidance. Please note that Dubsado’s Customer Success team is not able to assist with specific questions or troubleshooting regarding custom code on forms.