Border Radius on Pro Forms?

Liked the idea of Bricksforge so bought it today. I think submissions is handy so decided to recreate a Bricks form using Pro Forms. Got it 99% there except I cannot figure out how to do border-radius on my two elements, email and submit.

If I put the border radius on these elements, it shows the outline in the interface, but it appears to be overwritten by the parent pro forms style. When I apply to the Pro Forms elements, it does the radius to BOTH email and submit, which is not what I need.

Email needs the border radius on top left and bottom left. Submit needs top right and bottom right.

I was also surprised to see there was no easy way to have the submit button appear to the side instead of underneath, so had to use transform to move it.

Am I missing something or do these elements seem overly complex?

Top is 100% design and functional using Bricks. Bottom is Pro Forms.

Hey :slight_smile: Side question: Are you using the Nestable approach of Pro Forms?

Hi Daniele, and thanks for the answers :slight_smile:

I’m not even aware of the nestable approach, so I’m going to say no? Here’s a screenshot of my structure.

Thanks for clarifying! :slight_smile: To have the submit button appear to the side, just wrap both form fields with a “Block” element and use flex box. Inside “Pro Forms”, you can use every native Bricks element you need to style your form.

Regarding the individual styling of input fields: I agree! Sometimes, the global styling trough the “Pro Forms” element may not be enough. I will include a separate group “Style” for each input field, where you have the possibility to add individual styles for input fields which are overwriting the global styles. Would that help? :slight_smile:

That would be lovely. However, any tips on how to achieve the style I want now? Bricksforge could help me remove the current plugin I use for submissions called Form Vibes, but if I can’t get the form looking like I want, then I need to stick with the default Bricks form until a future Pro Forms update.

With the new added fields, you’ll be able to just set the needed border radius on your input field – also via global class if prefered. This will give you a lot of flexibility to achieve your desired layout :slight_smile:

PS: Will deploy the new version today.

Did the new version get deployed? I’ve already put the borders on those elements in excitement but see no change.

I’ve deployed the new version 2 minutes ago :slight_smile:

1 Like

hmmm, still not seeing the border radius on the individual elements:

  • updated the plugin
  • cleared cache
  • tried putting the pro form in again fresh

Nothing. You can see the border radius has been applied but it looks like the element above is still overriding it.

You need to use the “Style” group in the “Content” tab. The “Style” tab is only for the wrapper and will not style the field itself :slight_smile:

Thank you for that. I’m new to Bricks, and it’s all very interesting, but has a learning curve. It works now.

1 Like

Great! :slight_smile: