Logo
Logo

Form Builder

Content Controls

Form

Manage how your form works and looks, including the name, fields, and file settings. You can set up different types of fields, customize button texts, and even decide on file upload parameters.

  • Form Name – Set a name for your form. This is useful for identifying it in submissions.
  • Fields – Add or configure the fields your form will have. More information about field properties may be found below.
    • Available fields: Text, Email, Textarea, URL, Phone Number, Radio, Checkbox, Select, Number, Date, Time, File Upload, Password, Hidden, HTML, Step
  • Submit Text – Set the text for the submit button, guiding users to complete the form.
  • Success Message – Customize the message displayed after successful form submission.
  • Error Message – Define the error message shown if the form submission fails.
  • Hide Form On Success – Choose to hide the form once it’s successfully submitted, clearing the space for other content.
  • Redirect After Submit – Turn this on to send users to a different page after they submit the form.
  • Redirect URL – The URL to which users will be redirected. This is only applicable if redirect after submit is enabled.

Form Field Properties

The following information covers the types of Form Fields available, and their properties.

  • Type – Choose the type of input for each field, such as text, email, number, or file upload, from a dropdown menu.
  • Label – Define the visible name or question for each field to inform the user what information is requested.
  • Max. File Size (MB) – Set the maximum file size for uploads, ensuring files are within your hosting limits. This is only applicable for file upload fields.
  • Max. Number of Files – Limit the number of files a user can upload. Perfect for controlling submission sizes, only active for file upload fields.
    Please note that to upload more than one file, the Drag and Drop property should be enabled. 
  • Allowed File Types – Specify which file types can be uploaded, enhancing security and ensuring compatibility. This option is available for file fields only.
  • Drag and Drop – Enable a user-friendly drag and drop area for uploading files, improving the submission experience. Available for file upload fields.
  • Multiple – Allow multiple selections for dropdowns, making your form more versatile. This setting is specific to select fields.
  • Rows – Define the number of visible rows for multi-select or text area fields, improving form layout and usability. This becomes active when the multiple selection is enabled.
  • Options – Create options for select, radio, and checkbox fields. Customize each option with labels and values, and even pre-select choices for the user.
    • Option Label – The text the user sees for each choice.
    • Option Value – The data value transmitted when the user selects an option.
    • Selected – Pre-select an option to guide user responses or indicate a default choice.
  • Min Date – Set the earliest selectable date for date fields, perfect for appointments or bookings. Activated for date fields.
  • Max Date – Specify the latest date users can select, ensuring events or submissions are within your required timeframe. For date fields only.
  • Min – Determine the smallest number that can be entered in number fields, ideal for quantities or age restrictions. Applies to number inputs.
  • Max – Set the maximum value for number inputs, controlling the range of acceptable responses. Specific to number fields.
  • Step – Adjust the increment between each value in number fields, customizing the precision of user inputs. Available for number types.
  • Rows – Control the height of your text area by setting the number of rows, enhancing the user’s writing experience. This is relevant for textarea fields.
  • HTML – Insert custom HTML content, allowing for unique elements or instructions within your form. Enabled for HTML field types.
  • Previous Button Text – Customize the text on the previous step button in multi-step forms, guiding users through the process. Activated for step fields.
  • Next Button Text – Define the text for the next step button, making multi-step navigation intuitive. Applicable to step fields.
  • Icon – Add icons to your form fields, enhancing visual appeal and user understanding. This option is available for step type fields.
  • Advanced – Access advanced settings for further customization, such as field IDs, default values, placeholders, and conditional logic. Not available for step fields.
    • ID – Set a unique identifier for each field, aiding in customization and styling. Excludes HTML fields.
    • Value – Provide a default value for the field, ensuring forms can be pre-filled or guided. Various types of values can be set depending on the field type.
    • Placeholder – Enter placeholder text to display in the field before the user begins typing, offering hints or examples. Not applicable to selection fields or files.
    • Required – Mark fields as required to ensure users don’t skip essential inputs. Not available for hidden or HTML fields.
    • Width – Adjust the field’s width, customizing the form layout and user interface.
    • Conditional – Implement conditional logic to show or hide fields based on user inputs, creating dynamic forms that respond to user selections. Not available for file fields.
    • Condition – Define the specific conditions under which a field should be displayed, tailoring the form to individual user paths. Active when conditional logic is enabled.

Actions

This section lets you decide what happens after your form is submitted. You can store submissions, integrate with various marketing tools, run custom JavaScript, and more. Each option allows for a tailored response to user submissions, enhancing both functionality and user experience.

  • Actions After Submission – Choose one or more actions to take place once the form is submitted, such as storing the submission or sending data to marketing platforms.

Primary Actions

Primary actions are those actions designed to be generic and not connected to a specific third-party integration.

  • Store Submission – Save submitted form data within your site.
    • Submission Title – Set a title for the stored submission for easy identification. Accepts form field values.
    • Store uploaded files – Choose whether to save files uploaded through the form.
    • Add uploaded files to WordPress media library – Enable this to add files directly to your media library, available only if ‘Store uploaded files’ is enabled.
    • Restrict uploaded file access to admin users – If you’re storing files, toggle this to limit access to admins only, also dependent on ‘Store uploaded files’ being enabled.
  • Custom JavaScript – Execute your own JavaScript code based on the form’s submission outcome.
    • Run JS on Successful Submission – Here, you can write JavaScript to be executed after a successful form submission.
    • Run JS on Failed Submission – This allows you to specify JavaScript to run if the form submission fails.
  • Email – Automate email responses to form submissions, enabling you to send tailored messages, confirmations, or follow-up information directly to the submitter’s inbox.
    • Emails – Configure one or multiple email messages to be sent out automatically upon form submission.
      • Subject – Define the subject line of the email, making it clear and relevant to the recipient.
      • To Email – Specify the recipient’s email address. You can use a field from the form to capture this dynamically.
      • From Email – Indicate the email address that the message will be sent from, ensuring it’s recognized by the recipient.
      • From Name – Set the sender’s name to add a personal touch and increase open rates.
      • Reply To – Choose the reply-to email address to direct recipients’ responses appropriately.
      • Message – Craft the content of your email, providing all necessary details or next steps.
      • Attach uploaded files – Include any files submitted through the form as attachments to the email, perfect for applications or submissions requiring documentation.
  • Webhook – Seamlessly connect your form to any external applications. When ‘Webhook’ is selected as a post-submission action, you unlock the ability to send submitted data anywhere that accepts webhooks, automating workflows and data processing.
    • Webhook URL – Enter the URL where the form data should be sent. This is the endpoint that listens to the incoming data from your form submission.
    • Field Map – Customize how your form data is mapped and sent to the webhook URL. Define the specific fields that should be included in the data payload.
      • Field Name – Specify the name of the field as it should appear in the data sent to the webhook.
      • Field Value – Determine the value that corresponds to the field name, effectively mapping your form’s data structure to the expected structure of the receiving webhook. Accepts form field values.
    • Headers – Optionally add headers to the webhook request for added security or to meet the receiving endpoint’s requirements.
      • Header Name – The name of the header you wish to include in the webhook request.
      • Header Value – The value associated with the header name, providing the necessary information or authentication required by the endpoint. Accepts form field values.
  • Popup – Enhance user experience by displaying custom popups after form submission, triggered by the outcome. This action is perfect for immediate user feedback or promotions.
    • On Success – Define popups to be displayed when the form is successfully submitted, creating positive reinforcement or offering next steps.
      • Popup – Select the popup you’ve created that should appear upon a successful submission.
      • Popup Action – Choose the action the popup should perform, like displaying a thank you message or a promotional offer.
    • On Error – Set up popups for when form submissions fail, allowing you to address errors or encourage users to try submitting again.
      • Popup – Choose a popup designed to appear during submission errors, helping to retain users’ attention and guide them through correcting the error.
      • Popup Action – Determine the action of the popup, potentially offering help or a way to contact support.

Third-Party Actions

Third-party actions are those actions designed for specific use with other integrations.

  • ActiveCampaign – Connect your form with ActiveCampaign for marketing automation. This section is accessible if ‘activecampaign’ is selected in post-submission actions.
    • Use ActiveCampaign API Key – Input your ActiveCampaign API key here to establish a connection.
    • Account – Select which ActiveCampaign account to use if you have multiple.
    • Field Mapping – Specify how your form fields correspond to ActiveCampaign fields, ensuring data is sent correctly. Available once an account is selected.
      • Custom Fields – For further customization, map specific form fields to custom fields in ActiveCampaign.
        • Field – Choose an ActiveCampaign field to map.
        • Form Field – Select the form field that matches the ActiveCampaign field.
  • ConvertKit – Integrate your form with ConvertKit for email marketing purposes, available when ‘convertkit’ is a chosen action.
    • Use ConvertKit API Key – Provide your ConvertKit API key for integration.
    • Form – Select the ConvertKit form that you want to link with your Breakdance form.
    • Field Mapping – Align form fields with ConvertKit fields to ensure accurate data transfer, active once a form is selected.
      • Custom Fields – Fine-tune the integration by mapping form fields to specific ConvertKit fields.
        • Field – Select a field from ConvertKit.
        • Form Field – Choose the corresponding form field from your Breakdance form.
    • Tags – Apply tags to submissions for organized segmentation in ConvertKit, requires a form to be selected first.
      • Tag – Pick the tags you want to assign to the submissions.
  • Discord – Leverage Discord integration to notify your server about new submissions, fostering community engagement and immediate team notifications.
    • Use Discord Webhook – Configure your form to send notifications to a Discord channel through a webhook, keeping your team or community instantly informed.
    • Bot Name – Customize the bot name that appears in Discord notifications, making it recognizable to your server members.
    • Title, Description – Craft a message with a title and description that will be posted to your Discord channel, providing context to the submission.
    • Include form data – Choose to include detailed form submission data in the Discord message, ensuring transparency and actionability.
  • Drip – Integrate with Drip to nurture leads and automate marketing workflows based on user submissions. Perfect for targeted campaigns and follow-ups.
    • Use Drip API Key – Enter your Drip API key to link your form directly with Drip, streamlining data flow and automation.
    • Account – Select the Drip account you wish to use, aligning form submissions with your marketing strategies.
    • Field Mapping – Map form fields to Drip data points, ensuring accurate and useful data transfer for personalized marketing efforts.
      • Custom Fields – Tailor how submission data is categorized in Drip by mapping form fields to specific Drip fields, enhancing segmentation and targeting.
    • Tag – Apply Drip tags to submissions directly from the form, segmenting leads based on their inputs for more effective follow-up campaigns.
  • GetResponse – Connect your form with GetResponse to automate email marketing tasks, such as adding subscribers to lists or triggering autoresponder sequences.
    • Use GetResponse API Key – Enter your GetResponse API key to enable seamless data transfer from form submissions to your GetResponse account.
    • List – Choose the GetResponse list to which submitters should be added, automating list growth and segmentation.
    • Field Mapping – Ensure the right data ends up in GetResponse by mapping form fields to corresponding GetResponse fields, optimizing your email marketing efforts.
      • Custom Fields – Get granular with data transfer by mapping specific form inputs to custom fields in GetResponse, enhancing personalization and targeting.
    • Tags – Automatically tag new contacts in GetResponse based on their form submissions, aiding in segmentation and targeted communications.
  • MailChimp – Seamlessly add form submitters to your MailChimp lists, triggering automated email sequences or updates. Ideal for expanding your mailing list and engaging new contacts.
    • Use MailChimp API Key – Input your MailChimp API key to connect your form directly with your MailChimp account, ensuring a smooth data flow.
    • Audience – Select the MailChimp audience list that new submitters should be added to, automatically segmenting and managing your contacts.
    • Double Opt-In – Decide whether to use MailChimp’s double opt-in feature for new subscriptions, enhancing the quality of your mailing list. This option is dependent on selecting an audience.
    • Field Mapping – Map form fields to MailChimp audience fields, making sure the data collected is accurately reflected in your MailChimp account. This customization is available once an audience is chosen.
      • Fields – Specify which form fields correspond to MailChimp fields, optimizing data integrity and relevance for your email campaigns.
    • Audience Groups – Further segment your audience by assigning form submissions to specific MailChimp groups within your selected audience, allowing for targeted communication. This setting is accessible after an audience is selected.
  • MailerLite – Integrate your form with MailerLite to automate subscriber management and email marketing efforts. Perfect for keeping your campaigns and contact lists effortlessly up-to-date.
    • Use MailerLite API Key – Connect your form submissions to your MailerLite account by entering your API key, streamlining the addition of new subscribers.
    • Group – Assign form submitters to a specific MailerLite group, automatically organizing your contacts based on their interests or form inputs.
    • Field Mapping – Ensure that submission data matches up with MailerLite fields for precise and meaningful segmentation. Available once a group is defined.
      • Custom Fields – Customize how form data is categorized in MailerLite by mapping it to specific fields, enhancing the effectiveness of your email marketing.
    • Reactivate subscriber – Automatically reactivate subscribers in your MailerLite group, keeping your contact list active. This option depends on the selection of a group.
  • Slack – Keep your team in the loop with real-time Slack notifications each time a form is submitted. Ideal for prompt follow-ups or internal alerts.
    • Use Slack Webhook – Set up a connection to a Slack channel through a webhook URL, enabling instant notifications upon form submissions.
    • Message text – Customize the message that appears in Slack, providing context or details about the submission.
    • Include form data – Opt to include detailed submission data within the Slack message, ensuring your team has all the information they need at a glance.
    • Include timestamp – Add a timestamp to Slack notifications for better tracking and context of submissions.
    • Border color – Personalize notification appearance with a custom border color, making your Slack alerts stand out.

Advanced

This section dives into more sophisticated settings to enhance form functionality and security. Here, you can assign unique identifiers, enhance security with reCAPTCHA, and utilize anti-spam measures. These controls are designed for fine-tuning user interaction and protecting against unwanted submissions.

  • Form HTML ID – Assign a unique HTML ID to your form, allowing for custom styling and identification within scripts.
  • Submit HTML ID – Set a distinct HTML ID for the submit button to tailor its design or behavior via CSS or JavaScript.
  • reCAPTCHA – Add an extra layer of security to your form with Google’s reCAPTCHA, deterring bots and ensuring submissions are genuine.
    • Enable reCAPTCHA – Turn on reCAPTCHA protection to guard against automated spam submissions.
    • Use reCAPTCHA API Key – Input your reCAPTCHA API Key to activate this feature. This option becomes available once reCAPTCHA is enabled.
  • Add Honeypot Field – Implement a honeypot field as an invisible trap for bots, helping reduce spam without impacting user experience.
  • Disable CSRF Protection – Turn off Cross-Site Request Forgery protection if necessary, although it’s recommended to keep it enabled for security.

Design Controls

Container

This section allows you to style the container that holds your form. You can set the width for a neat alignment, change the background color for a visual appeal, and adjust padding to ensure the content has breathing space. Additionally, you can style the borders, including radius, styling, and shadow for a polished look.

  • Width – Adjust the overall width of the form container for better alignment and layout on the page.
  • Background – Choose a background color for the container to enhance its visual appearance.
  • Padding – Configure the padding around the container’s content for spacing and alignment, making sure everything looks tidy.
  • Borders
    • Radius – Set the border-radius to control corner roundness, adding a soft edge to the container if desired.
    • Styling – Define the border style, width, and color, allowing for customized border appearances.
    • Shadow – Apply a shadow effect to the container for depth and emphasis on the webpage.

Form

In this section, you can fine-tune the spacing within the form, style the fields, manage typography, and customize the submit button. Controls for field backgrounds, padding, borders, and focus states help you create a cohesive and user-friendly form. There’s also functionality for advanced field options, message styling, and other elements like steppers.

  • Spacing – Manage the distance between form fields, labels, and sublabels to ensure the form is easy to read and interact with.
  • Fields – Customize the appearance of the input fields including background color, border styles, and padding for a neat layout.
  • Typography – Adjust the font styles for labels, sublabels, input values, and links to maintain readability and aesthetic harmony.
  • Messages – Style error and success messages with specific background colors, typography, and border designs to make them stand out.
  • Submit Button – Configure the submit button’s alignment, size, background, typography, and even add an icon for a more engaging user interface.
  • Other – Includes settings for additional elements like stepper navigation, allowing for customized designs for complex forms.

Layout

The layout controls help you manage how your form is displayed on the page. You can choose between a horizontal or vertical layout for your form elements, and specify the screen width at which the layout should switch to vertical. This flexibility ensures that your form looks great on all devices.

  • Layout – Choose the default layout for your form elements. You can opt for either a row-wise (horizontal) or column-wise (vertical) arrangement.
  • Vertical at – Specify the screen size at which the form should switch from its default layout to a vertical layout. This helps in maintaining a user-friendly form on mobile devices.

Spacing

Adjusting the spacing around your form ensures that it doesn’t look too cramped or too spread out. By tweaking the margin settings, you can control the space above and below your form, providing a cleaner layout and enhancing readability.

  • Margin Top – Control the space above your form by setting the top margin. This spacing can help in separating your form visually from other elements on your page.
  • Margin Bottom – Adjust the space below your form with the bottom margin setting. This ensures that your form doesn’t merge into other page content, maintaining a neat appearance.