I switched from Bit forms to Bricks forge. The main driver was that I found it difficult to style the form. Can you use custom properties/ css variables like bf-label, bf-input etc.
Now that I’m also more self aware of accessibility I’d like for the form to output html based on best standards. - Forms Tutorial | Web Accessibility Initiative (WAI) | W3C
Hi seaj, we’re sorry to hear you experienced difficulties with styling in Bit Form. We’d like to share that you can add custom style properties in the Custom Code section, and each element has options for custom classes and attributes in the individual style settings.
In our recent update, we’ve included common classes for every field element, such as bf-lbl, bf-fld, and bf-fld-wrp, so you can use these to easily style the form elements as needed. Additionally, we plan to improve global styling and themes, along with bringing custom class inputs directly into the field settings to further enhance UX.
Regarding accessibility, we take it very seriously and have followed standard accessibility guidelines from the beginning. If you notice any areas for improvement, please feel free to let us know—we’re always open to feedback. Thank you, and we hope to see you back with Bit Form soon!
Thanks for the reply.
I’m encouraged to see that you have made classes for each element.
Would it be possible for each field to use CSS variables. It will allow me to create my own class and provide me with the flexibility to style the form the way I want.
Does Bit form add any extra div wrapper on any of the form element and if so, can you look to remove these extra divs?
Hi seaj, thank you for your feedback! You can add custom classes to individual elements by navigating to Style → Individual Style → Custom Classes tab and adding your custom class there. However, you won’t find CSS variables in our style properties because we utilize atomic classes to optimize CSS size. That said, you can freely use CSS variables within your custom class properties for greater flexibility.
Regarding your query about extra <div> elements, we do not include unnecessary divs. The div elements we use are essential for maintaining the form’s appearance and structure. For instance, if a label isn’t used for a field, the corresponding div for the label is not added. While we strive to minimize div usage, we don’t plan to remove the existing ones as they are required for structural purposes. If you identify any divs you feel are unnecessary, please let us know, and we’ll review them. Thanks again!