Updated July 9, 2024

If you added any custom code to your Dubsado forms, this article discusses how custom code may be impacted in the form builder.

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

Our 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 in all form types.

The HTML block element should be used when you want to insert something new into your form using code. It supports HTML, CSS, and JavaScript.

⛔ Heads up! It is not possible to embed another Dubsado form or scheduler into a Dubsado form.

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.

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.

To keep Dubsado secure, 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:

Click Preview at the top of the form builder to see your code in action.

If your form does not have any custom code, legacy mode can be Off and your forms are not impacted at all with the form builder.

We made legacy mode for anyone who used custom code on their Dubsado forms with the old form builder. 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.

When we created the new form builder, we had to make changes to the client-facing view of forms. These changes were made so that we could support new and exciting form builder features for years to come! The changes also affected CSS and HTML structure. This meant that some custom code added to forms created in the old form builder might not work with the new form builder.

All 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 Form settings (gear icon).

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 so you can use your forms while legacy mode is Off. Although your existing forms can still be used with legacy mode On, updating your templates ensures the best experience with the new form builder.

In order to access all the latest form builder features, and for the best compatibility with the new form builder experience, we recommend updating your custom code on your form templates so that it works with legacy mode turned Off.

You can check the form’s appearance by turning legacy mode Off, then clicking the Preview button.

If you need to update your custom code, use your browser's inspector tool on the preview page to see what adjustments may be needed. Our CSS cheat sheet includes examples that are compatible with the new form builder. Once you add your updated code to the form, save the form with legacy mode turned Off.

If your custom code does not display correctly with legacy mode turned Off, you can turn legacy mode back On. However, there are a few downsides: