Where are the forms classes?

Support Themes & Styling
1

Hi.

Where are the form classes like ‘form-control’, ‘form-textarea-wrapper’, ‘form-control-lg’, ‘form-data’, 'form-field, ‘form-label’, etc. ???

In Form Plugin I can’t find them, however in Chrome Inspector you can show them. For example (in Deliver Theme):

<div class="form-data" data-grav-field="textarea" data-grav-disabled="" data-grav-default="null">
<div class="form-textarea-wrapper  ">
<textarea name="data[Message]" class=" form-control form-control-lg  " placeholder="Message" required="required" title="Message is required" rows="5"></textarea>
</div>
</div>

Are those classes for anything?

I’d like to align the checkbox in Deliver Theme to show Privacy Policy, and I can’t do it in anyway, because the code of that checkbox is:

<div class="form-data" data-grav-field="checkbox" data-grav-disabled="" data-grav-default="null">
<div class="form-input-wrapper  ">
  <input name="data[Privacidad]" value="1" type="checkbox" id="privacidad" class=" " required="required">
  <label style="display:inline;" class="inline" for="privacidad">
Política de privacidad<span class="required">*</span>
  </label>
</div>
</div>

Thanks so much, in advanced.

2

Did you have a look in the template files? Depends on the template you use.
in quark its user -> themes -> quark -> templates -> forms -> …

3

Hi @reparix.

Thanks for your response. Yes, I looked into the theme templates, but Deliver Theme have not any folder for templates forms. Therefore, I guess that the plugin form use its own templates.
I looked there too, I searched with grep command, in Linux, in all files, but I was unlucky.

I’ll keep trying.

4

Hey pmoreno,

I am not sure what you are trying to accomplish exactly but if you can’t find where to make the changes in the theme, you may be able to add a Body Class to the page and then use that class to target the form without worrying about messing up forms on other pages.

You should be able to target the labels and modify it even with the inline style by adding the additional body class and !important.

If you add a body class called myForm you could try something like
.myForm label.inline {display:block !important;}
or .myForm form label.inline {display:block !important;}

Adjust the CSS as needed. Add the CSS in the Custom CSS Plugin.

I notice under the Form plugin there is an option to disable inline css which may help also.
I seems like the CSS is most likely coming from the Form plugin itself in /user/plugins/form/assets/form-styles.css

5

Hi @pmoreno The fields all initially come from the plugin folder. For example the textarea field comes from this template /user/plugins/form/templates/forms/fields/textarea/textarea.html.twig Some of the form level fields probably come from the /user/plugins/form/templates/forms/default folder.

If you want to change any of these files you should copy that file into a similar folder in your theme and now your theme will inherit that field with your changes but won’t get overwritten by plugin updates.

For example:
/user/plugins/form/templates/forms/fields/textarea/textarea.html.twig
to:
/user/themes/ Your Theme /templates/forms/fields/textarea/textarea.html.twig

6

Hi @Ptarmic and @tom0360.

I’ve copied checkbox.html.twig in mytheme/templates/forms/fields/ to test its align. I have a problem with this field (you can see in another post https://discourse.getgrav.org/t/align-input-checkbox-in-contact-form-deliver-theme/14269. I’ve followed your suggestions but not success result.

In my case, for example, this field (checkbox) has something that I can’t get find in any styles css sheet.

Selection_021
Selection_021968×615 10 KB

This is the final result of form code, with checkbox field without custom css (with original plugin css).

Selection_022

You can see some left and right margin or padding in checkbox field. In the form-styles.css (from form plugin), I’ve only found the following related with checkboxes and label fields:

.checkboxes { display: inline-block; }
.checkboxes label { display: inline; cursor: pointer; position: relative; padding: 0 0 0 20px; margin-right: 15px; }
.checkboxes label:before { content: ""; display: inline-block; width: 20px; height: 20px; left: 0; margin-top: 0; margin-right: 10px; position: absolute; border-radius: 3px; border: 1px solid #e6e6e6; }
.checkboxes input[type=checkbox] { display: none; }
.checkboxes input[type=checkbox]:checked + label:before { content: "\2713"; font-size: 20px; line-height: 1; text-align: center; }
.checkboxes.toggleable label { margin-right: 0; }
.form-field-toggleable .checkboxes.toggleable { margin-right: 5px; vertical-align: middle; }
.form-field-toggleable .checkboxes + label { display: inline-block; }

In checkbox.html.twig you can see:

<label style="display:inline;" class="inline" for="{{ id|e }}">
   {% if field.markdown %}
       {{ field.label|t|markdown(false) }}
   {% else %}
       {{ field.label|t|e }}
   {% endif %}
   {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
</label>

When you select the checkbox in Chrome Inspector it shows the following:

<input name="data[privacy]" value="1" type="checkbox" id="privacy" class=" " required="required">

You can check my contact form in this address:

http://grav.hukawati.es/contacto

I don’t understand why checkbox.html.twig refers to the ‘inline’ class and yet if you make any changes to it it has no effect.

I hope any idea for solve this issue.

Thanks so much.

7

You can track down the css in the stylesheets or just add your own custom css to overwrite the css. It is a media Query setting and the checkbox setting causing the issue. You can try the following css to see if it fixes it and adjust it as needed.

@media screen and (min-width: 200px) {
.contact input[type=“checkbox”],
input#privacy {
max-width: 16px !important;
margin-bottom: 16px;
}
.contact input {
min-width: 16px;
}
}

8

Thanks so much, @tom0360. Your solution works fine. I’ve made one change in the class of contact, changing .contact to #contact-form.

Perfect solution.
Thanks again.