Bit Form – Individual Elements

Individual Elements settings in Bit Form refer to the ability to customize the style of each field independently, overriding the global styling options. These settings allow you to specify different font colors, backgrounds, field sizes, box shadows, and more for each element.
Additionally, you can define unique styles for the hover and active states of the fields.
Moreover, Bit Form provides the flexibility to assign custom classes and custom attributes to each element. Go through this documentation for in-depth details of the Individual Elements setting:

Quick Tweaks​

The Quick Tweaks style settings in Individual Elements provide convenient customization options for fields in Bit Form. These settings allow you to quickly modify various aspects, including Accent Color, Backgrounds, Field Size, Theme, and Border Radius.

You can easily set a specific Accent Color to make certain elements stand out and catch the user’s attention.

Background customization enables you to choose appropriate backgrounds for fields, enhancing their visual appeal and aligning them with your overall design.

Field Size options allow you to adjust the dimensions of individual fields, ensuring they fit seamlessly within your form layout.

Furthermore, Border Radius settings let you control the roundness of field corners.

With the Quick Tweaks style settings, you can effortlessly fine-tune the appearance of individual form fields in Bit Form, resulting in visually appealing and user-friendly forms.

Field Container​

The Field Container style settings in Bit Form provide the flexibility to customize the styles of individual fields and override the global styling options.
To add custom styles, follow these steps:

• Select the field for which you want to customize the Field container from the individual element settings.
• Enable the Override form theme styles option located on the right side.
• Choose between the two available style types: Default and Hover.
• Select the style type that you prefer.
• Click on the plus icon to add a new CSS property.
• Various CSS properties are pre-added for your convenience. Choose the CSS property you wish to incorporate into your field design.
• Moreover, you have the option to add additional styles by using custom classes. Read More

Label Container​

The Label Container style settings in Bit Form provide the flexibility to customize the styles of individual label containers and override the global styling options.
To add custom styles to the label containers, follow these steps:

• Select the field for which you want to customize the Label container from the individual element settings.
• Enable the Override form theme styles option located on the right side.
• Choose between the two available style types: Default and Hover.
• Select the style type that you prefer.
• Click on the plus icon to add a new CSS property.
• Various CSS properties are pre-added for your convenience. Choose the CSS property you wish to incorporate into your label container design.
• Moreover, you have the option to add additional styles by using custom classes. Read More

Label

The Label style settings in Bit Form allow you to customize the styles of individual labels and override the global styling options.
To add custom styles to the labels, follow these steps:

• Select the field for which you want to customize the label from the individual element settings.
• Enable the Override form theme styles option located on the right side.
• Choose between the two available style types: Default and Hover.
• Select the style type that you prefer.
• Click on the plus icon to add a new CSS property.
• Various CSS properties are pre-added for your convenience. Choose the CSS property you wish to incorporate into your label design.
• Moreover, you have the option to add additional styles by using custom classes. Read More

Input

The Input style settings in Bit Form provide the flexibility to customize the styles of individual input fields and override the global styling options.
To add custom styles to the input fields, follow these steps:

• Select the input field you want to customize from the individual element settings.
• Enable the Override form theme styles option located on the right side.
• Choose between the five available style types: Default, Hover, Focus, Disabled, and Read-Only.
• Select the style type that best suits your preference.
• Click on the plus icon to add a new CSS property.
• Various CSS properties are pre-added for your convenience. Choose the CSS property you wish to incorporate into your input field design.
• Moreover, you have the option to add additional styles by using custom classes. Read More

Error Messages​

The Error Message style settings in Bit Form allow you to customize the styles of individual error messages and override the global styling options.
To add custom styles to the error messages, follow these steps:

• Select the field for which you want to customize the error message from the individual element settings.
• Enable the Override form theme styles option located on the right side.
• Choose between the two available style types: Default and Hover.
• Select the style type that you prefer.
• Click on the plus icon to add a new CSS property.
• Various CSS properties are pre-added for your convenience. Choose the CSS property you wish to incorporate into your error message design.
• Moreover, you have the option to add additional styles by using custom classes. Read More

Custom Class​

By adding a custom class to a field or element in Bit Form, you can target it with CSS or JavaScript code and apply specific styles or functionality. This allows for further customization and integration with other parts of your website.
To add a custom class in Bit Form, follow these steps:

• Open the Bit Form builder
• Select the field or element to which you want to add a custom class from the individual elements.
• On the right side of the builder, locate the option for Custom Classes.
• Click on the Custom Classes option.
• Enter the desired class name or names, separating them with spaces.
• Save or update the form to apply the custom class(es) to the selected field or element.

Custom Attributes​

By adding custom attributes, you can include additional information or data within the HTML markup of your Bit Form elements. These custom attributes can be used to enhance the functionality, styling, or integration of your forms.
To add a custom attribute in Bit Form, follow these steps:

• Open the Bit Form builder.
• Select the field or element to which you want to add a custom attribute from the individual elements.
• On the right side of the builder, locate the option for Custom classes.
• Click on the Custom classes option.
• Click the plus icon in the Custom Attributes section to add a new attribute.
• Enter the key and value for the custom attribute.
• Save or update the form to apply the custom attribute to the selected field or element.