I've faced with the task where is need to add custom CSS classes to "submit" button of the form. I saw that other form elements have a great feature to place own CSS classes to both wrapper and element. It's really useful because can save our time instead of writing preprocesses or overriding templates.
So, basically i suggest to add the same option for "submit" button.
| Comment | File | Size | Author |
|---|---|---|---|
| #37 | add_custom_classes-2823918-37.patch | 150.32 KB | jrockowitz |
| #34 | Test Form Buttons YAML Form Demo Site.png | 2.33 MB | jrockowitz |
| #33 | add_custom_classes-2823918-33.patch | 149.74 KB | jrockowitz |
| #13 | add_custom_classes-2823918-13.patch | 13.62 KB | jrockowitz |
| #6 | Edit Your Name element YAML Form Demo Site.png | 158.95 KB | jrockowitz |
Comments
Comment #2
alphawebgroupComment #3
alphawebgroupComment #4
alphawebgroupComment #5
jrockowitz commentedI feel adding custom classes to the submit button is too specific of a tweak. It also lead too adding custom classes to the draft, previous, next, and preview buttons.
I think a better approach is to add some classes to all the submit buttons like yamlform-button, yamlform-button--submit, etc... and then allow the form's classes to be customized.
To customize the form's classes it should mirror how element's support custom classes using a globally defined list of class names.
All patches are going to require tests.
@alweb are you up for this task. I am also okay implementing this in the next few weeks.
Comment #6
jrockowitz commentedFor a consistent UX and UI I think custom styles, classes, and even properties should be supported at the form level. Custom form properties could be used to set a form's target, prefix, suffix, etc...
Comment #7
jrockowitz commentedUpdating issue title.
Comment #8
jrockowitz commentedComment #9
jrockowitz commentedI am going to start working on this issue. I will create branch so that you can track my progress.
Comment #10
jrockowitz commentedBelow are the buttons classes that I am adding...
Comment #13
jrockowitz commentedComment #15
jrockowitz commentedComment #16
alphawebgroupHi Jacob.
Thank you for your update.
but it looks like you've implemented adding predefined classes only.
in my case I need an option to add my own css class to the button, i.e. .btn-orange or .btn-blue
Comment #17
alphawebgroupComment #18
alphawebgroupaaah, sorry, haven't realize you've change the title of this issue...
so basically, form classes and attributes is completely another stuff...
by my simple task I just need to add my own css classes to the submit button.
should I open new ticket for submit buttons then?
Comment #19
alphawebgroupComment #20
jrockowitz commented@alweb Adding custom classes to each submit button is too specific of a feature and should be handled in separate contrib or custom module.
If you create a contrib (or sandbox) module I will add a link to it from http://yamlform.io/support/installation/#additional-contrib-modules
Comment #21
alphawebgrouphm) I thought it's completely similar to the feature which allows change the label of the submit button...
If we can change the label of the button, why not add a custom css class to the same button?
Comment #22
jrockowitz commentedI think it is too specific of a feature, especially because custom classes should be supported by all submit buttons.
I am seeing that other people are requesting it in the webform module's issue queue.
#2815203: Allow for adding class to form submit button, form
I am reopening this ticket, to allow more people to weigh in, but I am marking it as postponed.
Comment #23
alphawebgroupHi Jacob.
yes, exactly... this feature will allow us don't waste our modules/themes with form alters and preprocess functions. Especially in case when we have 10+ forms.
As for the custom form's CSS class - it's completely the same profit using for example one CSS selector for all / particular forms.
It's very useful by the way, i already use this feature. thank you.
Comment #24
alphawebgroupone more vote for this feature - is using growing amount of CSS frameworks.
for example, my request is caused by MaterializeCSS framework. It already has pre-defined CSS selectors with many kinds of buttons.
as you wish yamlform to be the main form management module instead of webform, that means in the nearest future many people will be thankful for this feature, just because yamlform will allow them configure the forms with existing CSS selectors.
Comment #25
jrockowitz commentedMaterializeCSS buttons are really cool looking. http://materializecss.com/buttons.html
I think a more immediate task would be get the buttons wrapped in a customizable template so that the buttons can be altered to include icons (and CSS).
Comment #26
jrockowitz commentedI feel like I am doing everything I can to avoid adding support for custom classes to the UI. Still, I think the concept that a form's submit buttons should be easier to customize is very important, so created the below ticket.
#2826059: Create a dedicated template for YAML form actions
Comment #27
jrockowitz commentedI think customizing the submit buttons should be done at the theme layer and not customizable per form.
You should also look at #2826976: Allow CSS and JavaScript to be injected into a form. which gives you the ability add per form CSS & JS customization. You could even use JS to add custom classes to the submit buttons, if you really don't want to mess with yamlform-actions.html.
Comment #28
alphawebgroupok, thank you anyway... i understand you're busy with other issues, so, I can use custom patches in my composer.json to solve this for me, not a problem.
Comment #29
jrockowitz commentedI just completed a refactoring of attribute handling for forms and elements and it has made it much easier for me support styling buttons, so I am re-opening this ticket.
Comment #33
jrockowitz commentedComment #34
jrockowitz commentedBelow is a screenshot of the new buttons settings.
Comment #37
jrockowitz commentedComment #39
jrockowitz commented