First of all, congratulations on this excellent package. You're doing a great work in Formulate!
I would like to know what's the best approach to apply some css classes to the form fields generated by the (in-package) renderForm function. Is it possible?
For now, I think that there are only 2 possibilities - but I hope you can prove me wrong :D ):
1) create a custom view, digging in in the FormViewModel - in practice, it means I'll be ignoring the out-of-the-box "renderForm" with the AngularJs approach and I'll be creating a MVC "standard" view with all the fields "manually" rendered;
2) there's a specific branch already created on github to go forward with some "css" configuration field in the backoffice - and then I would probably help you move forward with it :D
Looking forward to hearing your feedback.
Thanks in advance.
Regards
Before you start adding CSS classes to form elements, I would recommend posting some details about what you're trying to accomplish by doing so. You may be able to find a solution which does not require the markup to be adjusted at all.
For the AngularJS template, all of the JavaScript modules used are included when you install Formulate. That means you can selectively include certain modules and replace only specific ones (and then use Grunt/Gulp/Webpack/whatever to combine all those JavaScript files). That would allow you to change the core functionality, but would come with the downside that upgrades would be more complicated.
Some options (which are similar to what you've already presented):
If these CSS classes make sense for everybody to use, they might be something that can be added to the core of Formulate.
We can work on a way to make the CSS classes used extensible so that adding additional classes does not require a core modification to Formulate.
there's a specific branch already created on github to go forward with some "css" configuration field in the backoffice
Are you saying that this branch already exists, or are you proposing such a branch? If it already exists, coud you let me know what branch it is?
To give you some context, what I'm trying to do is to use a form "designed" in the Formulate in the middle of a template view. So the form's fields have to follow the styling of the page, meaning I feel the need to add some classes to those fields.
I think that one possible solution is to use the responsive bootstrap angular as a basis, copy/paste, create a new template and "add" those specific css classes on that template....but I think it would be much easier to reuse if we could leave that "styling" configuration in the backoffice, so an editor can "swap" the classes without the need of editing some *.config files and creating new templates.
This kind of customization is the only thing I'm feeling I need, because my website also uses bootstrap, so the rows and columns rendering works just fine ;)
Regarding the branch, I was asking if it perhaps exists...if not, then I think it could be a new feature to the Formulate package - the possibility of adding CSS classes to the fields through the backoffice ;)
Looking forward to hearing from you.
Thank you
Regards
the possibility of adding CSS classes to the fields through the backoffice
If you mean what I think you mean, this definitely doesn't sound like something I'd want to add to Formulate. Though, I have been considering adding arbitrary metadata to fields (and columns, rows, and forms). Basically, a list of key/value pairs that can be associated with a given field. One of those might be "CSS Class", for example. Though I really wouldn't recommend going that route (making the content editors remember CSS class names seems a bit too burdensome IMO).
So the form's fields have to follow the styling of the page, meaning I feel the need to add some classes to those fields
Are you using a CSS preprocessor like Sass? If so, you might just be able to toss Formulate's CSS classes next to the existing CSS classes and Formulate will magically be styled as it should be.
I think that one possible solution is to use the responsive bootstrap angular as a basis, copy/paste, create a new template and "add" those specific css classes on that template
If you only have one set of styles on the site, there would be no need to create a second template.
I'm thinking Formulate could add an option to configure some extra CSS classes to be attached to every field (which would be done via some AngularJS), and that would happen globally for every Formulate form.
If you need to have some template-specific differentiation (e.g., the CSS classes only get added to fields on specific forms in your site), we can look into adding an option to the Formulate directive so that you can specify the configuration there (in which case you'd copy the template to create a second one).
I think it would be much easier to reuse if we could leave that "styling" configuration in the backoffice, so an editor can "swap" the classes without the need of editing some *.config files and creating new templates.
Keep in mind that is essentially what templates are. That is, "styling" configuration. Well, it's more the markup, but you you can use that to offer a different set of styles.
Regarding the branch, I was asking if it perhaps exists
It does not (AFAIK). Though, I am creating a template for Formulate that does not use AngularJS (it's just plain JavaScript). You can read about that here if you are interested: https://github.com/rhythmagency/formulate/issues/118
"I'm thinking Formulate could add an option to configure some extra CSS classes to be attached to every field (which would be done via some AngularJS), and that would happen globally for every Formulate form."
yes, this might help too
"If you need to have some template-specific differentiation (e.g., the CSS classes only get added to fields on specific forms in your site), we can look into adding an option to the Formulate directive so that you can specify the configuration there (in which case you'd copy the template to create a second one)."
yes, this was I meant could be useful to add. Sometimes we just need to change a color of a element's border or its size, and rest keeps the same...and for my scenarios (using bootstrap) Formulate is doing just fine.
I think that for now I'll add the needed classes in the template and see what the future brings to Formulate ;)
Regarding the plain javascript template, I already took a look and might be using it when finished :)
Depending on your implementation, you could wrap the code that renders the form in a div with an id (or class), and then you can use that as part of the style to customize the fields on the form... though this would typically apply to all of the fields (like all of the textboxes for example); to it might be a starting point for you to get the results you are looking for...
CSS / Styling form fields
Hello Nicholas,
First of all, congratulations on this excellent package. You're doing a great work in Formulate!
I would like to know what's the best approach to apply some css classes to the form fields generated by the (in-package) renderForm function. Is it possible?
For now, I think that there are only 2 possibilities - but I hope you can prove me wrong :D ):
1) create a custom view, digging in in the FormViewModel - in practice, it means I'll be ignoring the out-of-the-box "renderForm" with the AngularJs approach and I'll be creating a MVC "standard" view with all the fields "manually" rendered;
2) there's a specific branch already created on github to go forward with some "css" configuration field in the backoffice - and then I would probably help you move forward with it :D
Looking forward to hearing your feedback. Thanks in advance. Regards
Before you start adding CSS classes to form elements, I would recommend posting some details about what you're trying to accomplish by doing so. You may be able to find a solution which does not require the markup to be adjusted at all.
For the AngularJS template, all of the JavaScript modules used are included when you install Formulate. That means you can selectively include certain modules and replace only specific ones (and then use Grunt/Gulp/Webpack/whatever to combine all those JavaScript files). That would allow you to change the core functionality, but would come with the downside that upgrades would be more complicated.
Some options (which are similar to what you've already presented):
Are you saying that this branch already exists, or are you proposing such a branch? If it already exists, coud you let me know what branch it is?
Thank you for the quick response.
To give you some context, what I'm trying to do is to use a form "designed" in the Formulate in the middle of a template view. So the form's fields have to follow the styling of the page, meaning I feel the need to add some classes to those fields. I think that one possible solution is to use the responsive bootstrap angular as a basis, copy/paste, create a new template and "add" those specific css classes on that template....but I think it would be much easier to reuse if we could leave that "styling" configuration in the backoffice, so an editor can "swap" the classes without the need of editing some *.config files and creating new templates.
This kind of customization is the only thing I'm feeling I need, because my website also uses bootstrap, so the rows and columns rendering works just fine ;)
Regarding the branch, I was asking if it perhaps exists...if not, then I think it could be a new feature to the Formulate package - the possibility of adding CSS classes to the fields through the backoffice ;)
Looking forward to hearing from you. Thank you Regards
If you mean what I think you mean, this definitely doesn't sound like something I'd want to add to Formulate. Though, I have been considering adding arbitrary metadata to fields (and columns, rows, and forms). Basically, a list of key/value pairs that can be associated with a given field. One of those might be "CSS Class", for example. Though I really wouldn't recommend going that route (making the content editors remember CSS class names seems a bit too burdensome IMO).
Are you using a CSS preprocessor like Sass? If so, you might just be able to toss Formulate's CSS classes next to the existing CSS classes and Formulate will magically be styled as it should be.
For example, Bootstrap comes with some Sass you can customize: https://getbootstrap.com/docs/4.0/getting-started/theming/#sass-options
If you only have one set of styles on the site, there would be no need to create a second template.
I'm thinking Formulate could add an option to configure some extra CSS classes to be attached to every field (which would be done via some AngularJS), and that would happen globally for every Formulate form.
If you need to have some template-specific differentiation (e.g., the CSS classes only get added to fields on specific forms in your site), we can look into adding an option to the Formulate directive so that you can specify the configuration there (in which case you'd copy the template to create a second one).
Keep in mind that is essentially what templates are. That is, "styling" configuration. Well, it's more the markup, but you you can use that to offer a different set of styles.
It does not (AFAIK). Though, I am creating a template for Formulate that does not use AngularJS (it's just plain JavaScript). You can read about that here if you are interested: https://github.com/rhythmagency/formulate/issues/118
Hi,
"I'm thinking Formulate could add an option to configure some extra CSS classes to be attached to every field (which would be done via some AngularJS), and that would happen globally for every Formulate form."
"If you need to have some template-specific differentiation (e.g., the CSS classes only get added to fields on specific forms in your site), we can look into adding an option to the Formulate directive so that you can specify the configuration there (in which case you'd copy the template to create a second one)."
I think that for now I'll add the needed classes in the template and see what the future brings to Formulate ;)
Regarding the plain javascript template, I already took a look and might be using it when finished :)
Thank you very much
Depending on your implementation, you could wrap the code that renders the form in a div with an id (or class), and then you can use that as part of the style to customize the fields on the form... though this would typically apply to all of the fields (like all of the textboxes for example); to it might be a starting point for you to get the results you are looking for...
is working on a reply...