🎉 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.

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!

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.

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:

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

👋 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).

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.

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.

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.

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:

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.

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:

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.