This documentation will focus on creating custom forms with the Form Builder element. Using the Form Builder element, you can create many types of custom forms including contact forms, lead capture forms, email subscribe forms, multi-step forms, and more. The submitted data can be stored or emailed, and the form can be connected to various marketing integrations like MailChimp, Drip, and many more, or sent to a custom webhook.
Breakdance also provides various other form elements for creating specific form types, such as Login Form, Registration Form, Forgot Password Form, Search Form, and Comment Form. Consult the documentation on those specific elements for details.
To add a form to your page using Breakdance, begin by navigating to the page where you wish to insert the form. Open the page in Breakdance, and in the Breakdance editor, click on the Add menu, which will display a variety of elements you can insert into your page. From this menu, select the Form Builder element. This action will place a basic form structure onto your page. The default form includes standard fields like Name, Email, and Message, serving as a foundational template. You can then customize this form by adding, removing, or modifying fields, adjusting layout and styling, and setting up form actions according to your specific requirements. Once you’re satisfied with the form’s setup, save your changes, and the form will be live on your page, ready for user interaction.
To custom form fields, select the form within the Breakdance editor. Each field in the form can be individually from Form > Fields. These options typically include changing the field label, adjusting the field type (such as text, email, dropdown, checkbox), and modifying placeholder text. You can also specify default values, apply validation rules (like making a field required), and more.
Beyond basic customizations, Breakdance also allows for more advanced field settings. You can add conditional logic to fields, making them appear or hide based on the user’s input in other parts of the form. For fields like dropdowns or radio buttons, you can manage the options available for selection. If your form requires collecting specific types of data, like phone numbers or dates, Breakdance provides specialized field types to ensure data is collected in a standardized format.
Actions in Breakdance define the workflow following a form submission and include a variety of integrations and functionalities:
In Breakdance, ensuring brand consistency across all forms on your website is streamlined through the use of global styling. While individual forms can be styled on a per-form basis, leveraging global styles is generally more advantageous for maintaining a cohesive and professional look across your site. By setting global styles, you can define uniform design elements such as field borders, background colors, typography, and button styles, and these settings will automatically apply to every form within your website. This approach not only saves time by eliminating the need to style each form individually but also ensures that all forms reflect your brand’s aesthetic consistently. This consistency is key to providing a seamless user experience and reinforcing brand identity. To access and set these global styling options, simply navigate to the Global Settings panel from the … menu in the Breakdance top toolbar.