Now by default Grav displays checkboxes with this markup:
When I use your field definition I get a totally different HTML layout. By default I mean, a fresh Grav 1.7.30, Quark and the Form plugin. Which theme are you using?
Also your code is showing an <input> field with "type="text" while the Form plugin would create a field with type="checkbox". What changes have you made to plugin Form or the theme’s templates?
Kind request:
Help the community help you, by creating clear and concise questions. Show you have put effort into the question to save peoples time and effort, .
Instead of letting the community figure out what you are trying to achieve by comparing your code with default code generated by the form, would you mind sharing what you are trying to achieve in simple goals. For example:
I want a group of checkboxes layout according this picture…
I want the field names…
I want each checkbox wrapped in…
I want classes to be…
And please show you have tried to solve the question yourself first.
What have you tried and with what result?
I like coding, but I don’t like interpreting other peoples code trying to figure out what they want.
When I use your field definition I get a totally different HTML layout. By default I mean, a fresh Grav 1.7.30, Quark and the Form plugin. Which theme are you using?
I use the Hola theme, overridden and heavily modificated, only certain parts of CSS has left.
In the default theme folder, there are no form folder or other overridden templates.
In my child theme folder I haven’t made any form template modifications.
Truly I’ve tried to override checkboxes.html.twig. I’ve copied the checkboxes.html.twig file into the child-theme\templates\forms\fields\checkboxes\checkboxes.html.twig but it seems that this template file is not responsible for displayed fields
I’ve used this .md code for a test to create checkboxes and check how they will be rendered:
I have a html based website with a contact form and I’m trying to transfer it to Grav CMS.
The part of the contact form consists of checkboxes, in plain html file it looks like I have demonstrated earlier:
It’s a group which is wrapped into a div with CSS classes. data-delay could be omitted.
Each checkbox is wrapped into a div with CSS class names, input field have its name, custom id and text value.
Labels with custom for attribute, custom class and value.
If I have skipped something - please ask me.
Thanks!
Truly I’ve tried to override checkboxes.html.twig . I’ve copied the checkboxes.html.twig file into the child-theme\templates\forms\fields\checkboxes\checkboxes.html.twig but it seems that this template file is not responsible for displayed fields
Based on which observation does this seem to be the case?
I’ve been trying to manipulate the code inside child-theme\templates\forms\fields\checkboxes\checkboxes.html.twig, changing HTML code, pasting a text values, but as a result nothing was changing in display results
@01K, You’re not really showing what changes you have made and what HTML has been generated. That means I cannot reproduce your case, and therefor I cannot see where anything might have gone wrong on your side.
Please help us helping you by giving precise and succinct information. Not only coding requires specificity and accuracy, questions do too.
I’ll have to resort to my own observations instead…
When I:
Create a child theme of Quark named ‘quark-child’
Copy user/plugins/form/templates/forms/fields/checkboxes/checkboxes.html.twig into user/themes/quark-child/templates/forms/fields/checkboxes/checkboxes.html.twig
Change line 25 in copied file into:
<input xxx type="checkbox"
Then a page with a form with the following definition:
According to my observation, it seems template user/themes/quark-child/templates/forms/fields/checkboxes/checkboxes.html.twig does generate the checkboxes…
I’ve cleared the cache several times, but this hasn’t made any sense.
It seems, that in my case, mixing the form element definitions caused such problems
Well, I have made some changes in checkboxes.html.twig
The problem is that I don’t know how to pass a custom value to a attributes. Nor haven’t found such a possibility in docs.
Here is a part of mine html generated form with some real CSS names for an example purpose. I need to achieve this markup
Well, on plain html custom id’s were made for sophisticated CSS rules.
While name's were processed in the mailing script to populate the email template with checked values.
You gave me an idea to try to completely rewrite CSS and check how the values will be processed after form submission. Maybe it will be a solution
@01K, I’m afraid the reply you have marked as solution doesn’t provide much help to others… The purpose of the forum is not only to answer/fix someone’s issues, it also serves as a knowledge base.
I think it would be more informative if you could share:
what issues you have encountered during the customisation of checkboxes
Because of this the overrides placed in user/themes/child-theme/templates/forms/fields/checkboxes/checkboxes.html.twig were not working. Simply no matter what I did changes were not displayed.
I’ve removed some unnecessary class definitions for my needs, changed name field to name="{{ ( field.name) }}"
<div class="fields-group-controls {{ field.classes }}">
{% set originalValue = value %}
{% set value = (value is null ? field.default : value) %}
{% if field.use == 'keys' and field.default %}
{% set value = field.default|merge(value) %}
{% endif %}
{% block input %}
{% for key, text in field.options %}
{% set id = field.id|default(field.name)|hyphenize ~ '-' ~ key %}
{% set name = field.use == 'keys' ? key : id %}
{% set val = field.use == 'keys' ? '1' : key %}
{% set checked = (field.use == 'keys' ? value[key] : key in value) %}
{% set help = (key in field.help_options|keys ? field.help_options[key] : false) %}
<div class="type-selection form-group col-md-4 col-sm-12">
<input type="checkbox"
id="{{ id|e }}"
value="{{ text|t|e }}"
name="{{ ( field.name) }}"
{% if checked %}checked="checked"{% endif %}
{% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
>
<label for="{{ id|e }}">
{% if help %}
<span class="hint--bottom" data-hint="{{ help|t|e('html_attr') }}">{{ text|t|e }}</span>
{% else %}
{{ text|t|e }}
{% endif %}
</label>
</div>
{% endfor %}
{% endblock %}
</div>
Haven’t tested the mailing functionality: how the selected checkbox values are transferred to mail template. It seems that it will be another question/problem
Still need some help. It’s working but not till the end: the checked values are not transferred to the mail template, but it’s a question for another thread, but I think it’s related to next issue:
The checkbox values are selected/unselected with this JS:
@01K, We are at reply 18 now and still no end in sight. I’m sorry to say, but I give up…
For two reasons:
It seems you are trying to force a custom HTML form and custom form handler into a Grav Form. Don’t try to make the new environment do exactly what the old did, but go with the philosophy and capabilities of the new environment. Or don’t convert at all…
Your question is (again) not clear to me.
Suggestion:
Use the out-of-the-box Form functionality with checkboxes and mail action. The Form plugin is very well capable of creating forms with checkboxes and sending emails containing the containing the result of the form.
Or use the original HTML form and server component.
Copy the HTML form straight into the page’s markdown, or custom Twig template.
If js is required, copy it into the page’s markdown or template too.
Copy the original PHP mail code into a new plugin and handle it when form is submitted to the server.
