Forms Overview

Overview of Form Types in Breakdance

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.

Creating Your First Form

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.

Customizing Form Fields

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.

Form Actions – Using The Submitted Data

Actions in Breakdance define the workflow following a form submission and include a variety of integrations and functionalities:

  • Email Notifications: Automated email responses to both the form submitter and website administrators, customizable for different contexts.
  • CRM and Email Marketing Provider Integrations: Seamless connection with CRM tools and email marketing services like MailChimp, ActiveCampaign, etc.
  • Data Storage and Management: Options to store form submissions within the WordPress admin panel, facilitating easy management and review.
  • Webhook: Advanced feature for sending form data to external services and APIs for extended integrations.
  • Custom JavaScript Execution: Enables advanced users to add bespoke interactivity or functionality post-submission.
  • Custom Actions: Developers can create custom actions using the form actions API.

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.

Testing Your Form

  1. Thoroughly review the form layout, ensuring all fields are correctly arranged and functional.
  2. Save the form and test it on the frontend to test its appearance and functionality from a user’s perspective.
  3. Perform test submissions to confirm that all integrations and actions are working as expected.
  4. If you’ve enabled the Store Submission action, review submissions in the WordPress admin panel at Breakdance > Form Submissions.

Global Styling of Forms for Brand Consistency

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.