Use the form component and change how fields look (always)

Plasmic Studio Questions
1

I’m loving using Plasmic, but struggling a bit with forms. From what I can understand my options are:

  • use the form component in simple mode → makes it easy to submit the form and do validation based off a source, but I have 0 control over what the inputs look like?
  • use the form component but not in simple mode → must set everything manually (cant auto link the data source to generate fields, validation etc)
  • create a custom code component → no ability to easily connect to a source, requires defining a JSON input in Studio for a user to edit the fields of the form?

Ideally, id like to use a standard Form component, and simply change the styling of the inputs away from the basic white ones, which I can seem to do with most other components but not with a form?

2

Hi @nick_dart!
There are a few ways on how you can approach this, depending on how technical you are:

  1. Modify the existing components using antd5 settings, which you can find in the project settings section on the left side panel. That would allow you to slightly change the borders/colors/border radiuses etc.
  2. Use CSS to style the inputs via global stylesheets - refer to this guide Using custom CSS | Learn Plasmic
  3. Create custom Form code component, and integrate it with your data source. That would be a bit tricky, but will allow you to have a lot of flexibility in the long run. Here are a few resources that can get you started, note that video as a bit old, and lots of new props were added to make this way more versatile: https://www.youtube.com/watch?v=fzq2idkL8-4&t=353s
    Code components API reference | Learn Plasmic