Skip to main content
All CollectionsForm Builder and Smart FieldsNew form builder
Important info for forms with custom code
Important info for forms with custom code
Sam Gioia avatar
Written by Sam Gioia
Updated over a week ago

Updated July 9, 2024

🚨 Due to the complex nature of custom code, our Customer Care team isn’t able to provide any support on forms with custom code.

For assistance on a form with custom code, please review our CSS cheat sheet, ask our Facebook community, or reach out to a web developer.

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.


Custom code and the form builder

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

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.

I opened a form with custom code, and the form builder looks broken.

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.

Why is some of my code not showing up in 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:

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

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


Legacy mode

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

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

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.

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 recommend updating your custom code on your form templates so that it works with legacy mode turned Off.

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

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 turn legacy mode back On. However, there are a few downsides:

  • You will not be able to use any new features added to the form builder.

  • Scheduler groups display forms as if legacy mode is turned Off, even if it is On.

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

  • Dubsado does not provide ongoing updates and support for legacy forms.

Did this answer your question?