It would be awesome to allow custom element styling.
The simplest way would just be allowing style overrides for each element as an advanced feature. But I think the most useful implementation would be to allow custom CSS on the page. The forms are structured very well and you could either override existing CSS classes, or target elements by ID.
For example, this would allow us to style some components side by side instead of vertically stacked. A great use case for this is a form that asks for a dimension using three different fields - feet, inches, and fractions. It is much more intuitive to see those fields in-line instead of stacked.
We do have a ticket for adding the ability to show fields side by side. I’ll try to get it prioritized. We’ll post here when we have updates on that.
In terms of custom CSS, I’ve written previously on this here. I feel that this is very risky. Are there any other things that you are trying to do with custom CSS besides placing the fields side by side?
I understand your concerns about custom CSS breaking things. That is definitely a risk.
I cannot think of many things off the top of my head that I would use this for. One other thing I thought of was the ability to add “auto” height to the custom HTML fields, or change the style of fields without using HTML in Airtable. But that might just be fixed by allowing different values in the custom height for HTML fields. (by the way, love the ability to use HTML here!)
My only comment on this would be that while allowing custom CSS may break things, I think that if someone understands CSS well enough to modify the forms, they would also likely understand why it breaks some functionality if they do something incorrectly. But that’s just my opinion.
I would be very happy to have the option to move fields side by side! I think if that were implemented my arguments in favor of custom CSS are relatively weak.
My concern about custom CSS: users will start depending on selectors and classnames, and we will inevitably make changes to the classname and the hierarchy of the DOM on a very regular basis. With every update, we risk breaking every form that is using custom CSS. I could just be wrong about this, but just feels like a can of worms.
In any case, we’d be very happy implementing those things on our side in a way that doesn’t require custom CSS.
In terms of auto height for the HTML code, that would not currently be possible because the HTML code is being loaded into an iframe. Because of that, we are required to supply an exact height for the iframe. The only way to have the height be dynamic would be to not use an iframe. Unfortunately, due to security concerns, we are not able to inject the HTML without an iframe.
I’ll try to get the side by side ticket prioritized as soon as possible.
Thanks. I agree with you - if you’re changing DOM elements and class names, then it is not a good idea to implement custom CSS.
The iframe implementation makes a lot of sense. Thanks for clarifying.
Something we would find useful as well is the ability to style some fields with a different text size. Maybe make it an option to arbitrarily change how field values are displayed (bold, italics, underlined, H1, H2, H3, etc.). This is what I have been using the custom HTML for to date… <h2>Stratolaunch (created 5/5/22 @ 1:43 pm)</h2>
In this case specifically, any formula fields. I imagine you could use the same conditions for allowing this as you use for allowing the “Render HTML Formula” toggle.
I’d love to be able mostly just to edit borders, background colors, custom fonts, button styling. These tweaks would allow the tool to feel way more custom and branded and would be a GAME CHANGER for me! I’ve explored other no code platforms solely for the customization of fonts/background colors/border styling
We have recently launched a new feature that allows you to modify the font size of the formula field. Further details regarding this feature can be found on this post:
We are delighted to inform you that we have released the feature that will let you show fields side-by-side in the form. You can find more information about these new features in this post:
Thank you for your reply. Can you confirm that this supports mobile perhaps by sending a screenshot? I am sure there is other customers with the same question that wants confirmation
With respect to custom styling, I’ve been playing with changing the styling I use by incorporating this into html/css that I render using the formula field. However, I’m still unable to customise other elements of the miniextensions content which stops the content blending so smoothly with the background colour of my sites.
The image provides an example where the darker blue is set through the html/css in the formula field. The white is the remainder of the miniextensions content with the background of the site peeking either side of the embed.
I’d love to be able to set the colours of the miniextensions content so it can all blend in nicely. I’d love to hear that I’m missing something simple here
