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:
To add an action to your form in Breakdance, start by selecting the form you want to modify within the Breakdance editor. Once the form is selected, navigate to the “Actions” tab, typically found in the form settings on the left-hand side of the editor. Here, you can choose from a variety of actions that define what happens after the form is submitted. These actions include sending an email, integrating with CRM systems, running custom JavaScript, and more. Click on the desired action to add it to your form. After selecting an action, you will often have the option to configure it further—like setting up email addresses for notifications or linking to external APIs. Make sure to configure these details according to your specific needs. Once you have set up and customized your action, save your changes to ensure the action is active whenever the form is submitted. This process allows you to create interactive and dynamic forms tailored to your workflow.
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.