๐ŸŽ‰ This article is written for our new form builder! If you are still using the old form builder, check out this article to make the switch to the new form builder.

If you added any custom code to your Dubsado forms, you may notice a few changes when using the new form builder. But don't worry โ€“ our legacy mode setting and CSS cheat sheet will help you adjust!

๐Ÿ‘‹ Here's a tip... this article assumes that you have some knowledge of how the custom code on your form works. If you purchased code from a third party or hired a developer to help you, we recommend reaching out to them for assistance.


In this article...


Custom code and the new form builder

I opened a form with custom code, and the form builder looks broken. Why is that?

Some CSS can affect elements of the form builder itself and not just the form, depending on how the code was written. Using CSS selectors that are too general or match selectors we already use on the builder is usually the cause.

This was something that could happen in the old form builder as well, and the solution is to adjust your code to only select the elements inside the form itself. Our cheat sheet has examples of how to write CSS for Dubsado forms that wonโ€™t cause issues with the form builder, so be sure to check that out!

When should I use the CSS editor vs. the HTML block element?

Our new form builder has a dedicated CSS editor in the form styling panel (palette icon) where you can manage all of your styles for the form. We recommend adding all of your CSS here instead of putting it in an HTML block for better organization! The CSS editor is available on all form types.

๐Ÿ‘‹ Here's a tip... when using the CSS editor, you don't need to add the <style> tags.

The HTML block element (formerly known as the code block) should be used when you want to insert something new into your form using code. It supports HTML, CSS, and JavaScript. Please note that it is not possible to embed another Dubsado form or scheduler into a Dubsado form.

Why is some of my code not showing up in the form builder?

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.

If your form contains code that cannot run in the form builder, you will see a placeholder appear where the HTML block is located:

Placeholder shown on form builder with the text "This block contains code that cannot be displayed while editing. Click the "Preview" button to view it."

All you need to do is click Preview at the top of the form builder to see your code in action.


Legacy mode

๐Ÿ‘‹ Here's a tip... if your form does not have any custom code, you can turn legacy mode OFF and start using the new form builder features right away!

When we created the new form builder, we had to make changes to the public view of forms that your clients see. These changes were made so that we could support new and exciting form builder features for years to come!

The necessary changes to the client-facing view of forms affected their CSS and HTML structure. This meant that some custom code added to forms might not work with the updates.

We made legacy mode for anyone who uses custom code on their Dubsado forms. We wanted to make sure that the updates would not negatively impact your clients while also giving you time and flexibility to make adjustments to your custom code.

All existing forms created in the old form builder prior to the launch of the new builder on July 12, 2022 will have legacy mode turned ON by default. The legacy mode setting is in the form settings panel (gear icon).

Will using the new form builder change how my forms appear to clients?

By default, all of your existing forms will have legacy mode turned ON until you manually turn it off on each individual form. This prevents any changes from showing to your clients until you decide to update your forms, even while you start using the new form builder.

โ›” 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.

If I have custom code on my forms, will I need to update them?

In order to access 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.

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.

Do I need to update all of my existing forms โ€“ even the ones on projects?

No. Existing forms on projects will have legacy mode turned ON and don't need to be updated. You'll only need to consider making updates to your form templates.

How can I preview my form with legacy mode OFF and update my code?

You can check the formโ€™s appearance by turning legacy mode OFF and clicking the Preview button. If the form does not appear as expected, you have two options:

  1. Turn legacy mode back ON and do not update the form.

  2. Revise your custom code to make it compatible with the updated public view so that you can turn legacy mode OFF.

To start updating your code, you can turn legacy mode OFF and preview the form without saving. This will allow you to use your browser's inspector tool and see all the adjustments you may need to make. Our CSS cheat sheet has been updated with examples that are compatible with the new public view of forms. Once you add your updated code to the form, you can save it with legacy mode turned OFF.

What if I am not able to update my custom code?

If your custom code does not display correctly with legacy mode turned OFF, you can leave legacy mode turned ON. However, there are a few downsides:

  • You will not be able to use any new features added to the form builder, including full-width containers.

  • Scheduler groups (and later, all schedulers) will display attached forms as if legacy mode has been turned OFF, even if legacy mode is turned ON.

  • The form may not display correctly in the builder, although you can still make and save edits.

  • Dubsado does not provide ongoing updates or support for legacy forms. If you encounter an issue, we may recommend you turn legacy mode OFF.

My form has legacy mode turned ON. Why is my code not working in the form builder?

This is a downside to not updating your code and keeping legacy mode turned ON. The canvas in the form builder is optimized for legacy mode being turned OFF. Youโ€™ll need to click Preview to see how your form will appear to your clients.

We recommend updating the code on your form templates as soon as possible. Although your existing forms can stay in legacy mode, getting your templates updated now will ensure the best experience moving forward with the new form builder.

Did this answer your question?