Editing Forms CSS

I would love to have full control over the css of my forms in basreow. This is where I think you can do something airtable doesn’t do.

Right now it seems to auto-size the logo in the form on upload and their is no way to get past it.

I also really like the way I can list multi-selection & single selection fields in Airtable Forms, whereas in basreow that functionality isn’t quite their yet.

I’d also like to point out that I believe when I host a form on the self hosted version, in the source code it displays the admin email of the deployment.

This to me is a security risk. Anyway to fix?

https://hforms.app.runonflux.io/form/Zuz7Sbx6G_VYi7kRebgOjzStJIoGgDcAopBJSHmYAEs

If you open the source code of that page, my email address can be extracted.

1 Like

I think allowing additional CSS to the form is a great idea! However, I’m also a bit worried about breaking the custom CSS when we change the HTML/CSS structure of the form. I’ve added an issue on the backlog (Allow adding additional CSS to a publicly shared form (#879) · Issues · Bram Wiepjes / baserow · GitLab), but I want to discuss with the team whether we should implement it.

We currently don’t have a a way of changing the input type for a form field. This is something that we’re going to change for sure in the near future.

Initially it indeed seems like Baserow exposes the email address of the user that created the form, although this only happens when you’re signed in. What happens when you open the publicly shared form link while being signed out, in another browser or via a in-private window? This is caused by nuxt.js transferring the server side rendered state to your browser. When you’re signed in, it contains your user information. If you’re an anonymous visitor, you won’t see any email addresses in the source code.

Hello @Clouted! We’ve been discussing this topic today with the team but we lack some context to make a decision. Can we ask you to share your use case? What do you want to be able to change in the form view using CSS?

It would be nice to have a place when building a form to add custom CSS that’s applied after all of baserow’s boiler plate CSS is applied to the page.

As far as Baserow accidentally breaking the customer’s custom CSS when you all push updates/do maintenance to the forms feature – I think that’s an acceptable risk.

Just toss a warning message up on that hypothetical new Custom CSS section in the form builder that calls out that changes to the underlying CSS by Baserow could potentially negatively impact custom CSS. Then let the user building the form opt-in to use that feature on a per-form basis.

You could also allow the administrators the ability to enable/disable that custom CSS field for their users individually. So if an org using Baserow only wanted a handful of trusted users to have access to apply custom CSS to forms – they could provision that.

You could also help administrators stay on top of checking that underlying code base changes to the forms feature don’t negatively impact their user’s forms by adding a communication preference in the notification settings to notify admins when the CSS/HTML structure of the forms is changed. Alerting them to have their users check their CSS…

As far as an example use case goes, creating a branded view of the form, or even just creating our own dark theme for the forms would be a popular use case.

2 Likes