Theme Clean-Blog: Form submit button not clickable

kolofaza · March 6, 2024, 1:03pm

Hi, on web Kontakt we have simple email send form with send button. You can send an email with tab / Enter, but you cant click a button with mouse onclick.
we have installed grav skeleton clean blog

please help.

pamtbaau · March 6, 2024, 1:57pm

@kolofaza, We do not have a crystal ball to see the config of your form…

The yaml definition of the form would be handy.

pamtbaau · March 6, 2024, 2:02pm

@kolofaza, Never mind…

The class disabled added to the button isn’t really helpful…

html:

<button type="submit,button" class="btn-primary text-uppercase disabled btn btn-default ">Send</button>

css:

.btn:disabled, .btn.disabled, fieldset:disabled .btn {
    pointer-events: none;    <=== disables any event
    opacity: 0.65;
}

kolofaza · March 6, 2024, 3:34pm

Hi, thanks for reply, im’m new to grav is it a form plugin config or the email plugin config, and is it in theme folder or somewhere else? and in whitch file on ftp serwer will be that:

btn:disabled, .btn.disabled, fieldset:disabled .btn {
    pointer-events: none;    <=== disables any event
    opacity: 0.65;

pamtbaau · March 7, 2024, 8:16am

@kolofaza, Without proper information there is not much we can say…

Please provide:

Form definition (use block quotes to format snippet)
Versions of Grav and Form plugin
What has been changed to original Clean-Blog theme?
If anything, what has been changed to original Form plugin?
Sharing your skill-set/background might correct our expectations.

As a side note, please have a look at how to setup a multilingual site. Combining multiple languages in a single page is not quite user friendly…

kolofaza · March 7, 2024, 8:47am

Hi, Grav ver 1733, form version 6.0.1, there was no change to original Clean Blog theme, there was nothing changed to original form plugin.
Skill-set: i’ve made few pages in plain html/css i know attributes and classes but dont know where to find correct settings, the folder structure as of this is my first grav page is hard to me.

form.html.twig:


{% set form = form ?? grav.session.getFlashObject('form') %}
{% set layout = layout ?? form.layout ?? 'default' %}
{% set field_layout = field_layout ?? layout %}

{# Keep here for Backwards Compatibility #}
{% include 'partials/form-messages.html.twig' %}

{% set scope = scope ?: form.scope is defined ? form.scope : 'data.' %}
{% set multipart = '' %}
{% set blueprints = blueprints ?? form.blueprint() %}
{% set method = form.method|upper|default('POST') %}
{% set client_side_validation = form.client_side_validation is not null ? form.client_side_validation : config.plugins.form.client_side_validation|defined(true) %}
{% set inline_errors = form.inline_errors is not null ? form.inline_errors : config.plugins.form.inline_errors(false) %}

{% set data = data ?? form.data %}
{% set context = context ?? data %}

{% for field in form.fields %}
    {% if (method == 'POST' and field.type == 'file') %}
        {% set multipart = ' enctype="multipart/form-data"' %}
    {% endif %}
{% endfor %}

{% set action = action ?? (form.action ?: page.route ~ uri.params) %}
{% set action = (action starts with 'http') or (action starts with '#') ? action : base_url ~ action %}
{% set action = action|trim('/', 'right') %}

{% if (action == base_url_relative) %}
    {% set action = base_url_relative ~ '/' %}
{% endif %}

{% if form.keep_alive %}
    {% if grav.browser.browser == 'msie' and grav.browser.version < 12 %}
        {% do assets.addJs('plugin://form/assets/object.assign.polyfill.js') %}
    {% endif %}
    {% do assets.addJs('plugin://form/assets/form.vendor.js', { 'group': 'bottom', 'loading': 'defer' }) %}
    {% do assets.addJs('plugin://form/assets/form.min.js', { 'group': 'bottom', 'loading': 'defer' }) %}
{% endif %}

{% do assets.addInlineJs("
    window.GravForm = window.GravForm || {};
    window.GravForm.config = {
        current_url: '" ~ grav.route.withoutParams() ~"',
        current_params: " ~ grav.route.params|json_encode ~ ",
        param_sep: '" ~ config.system.param_sep ~ "',
        base_url_relative: '" ~ base_url_relative ~ "',
        form_nonce: '" ~ form.getNonce() ~ "',
        session_timeout: " ~ config.system.session.timeout ~ "
    };
    window.GravForm.translations = Object.assign({}, window.GravForm.translations || {}, { PLUGIN_FORM: {} });
", {'group': 'bottom', 'position': 'before', 'priority': 100}) %}

{# Backwards Compatibility for block overrides #}
{% set override_form_classes %}
  {% block form_classes -%}
    {{ form_outer_classes }} {{ form.classes }}
  {%- endblock %}
{% endset %}

{% set override_inner_markup_fields_start %}
  {% block inner_markup_fields_start %}{% endblock %}
{% endset %}

{% set override_inner_markup_fields_end %}
  {% block inner_markup_fields_end %}{% endblock %}
{% endset %}

{% set override_inner_markup_fields %}
  {% block inner_markup_fields %}
    {% for field_name, field in form.fields %}
      {% set field = prepare_form_field(field, field_name) %}
      {% if field %}
        {% set value = form ? form.value(field.name) : data.value(field.name) %}
        {% set field_templates = include_form_field(field.type, field_layout) %}

        {% block inner_markup_field_open %}{% endblock %}
        {% block field %}
          {% include field_templates ignore missing %}
        {% endblock %}
        {% block inner_markup_field_close %}{% endblock %}
      {% endif %}
    {% endfor %}
  {% endblock %}
{% endset %}

{% set override_inner_markup_buttons_start %}
  {% block inner_markup_buttons_start %}
  <div class="{{ form_button_outer_classes ?: 'buttons'}}" style="margin-top:30px;">
  {% endblock %}
{% endset %}

{% set override_inner_markup_buttons_end %}
  {% block inner_markup_buttons_end %}
  </div>
  {% endblock %}
{% endset %}

{# Embed for HTML layout #}
{% embed 'forms/layouts/form.html.twig' %}

  {% block embed_form_core %}
    name="{{ form.name }}"
    action="{{ action }}"
    method="{{ method }}"{{ multipart|raw }}
    {% if form.id %}id="{{ form.id }}"{% endif %}
    {% if form.novalidate %}novalidate{% endif %}
    {% if form.keep_alive %}data-grav-keepalive="true"{% endif %}
    {% if form.attributes is defined %}
      {% for key,attribute in form.attributes %}
        {% if attribute|of_type('array') %}
          {{ attribute.name }}="{{ attribute.value|e('html_attr') }}"
        {% else %}
          {{ key }}="{{ attribute|e('html_attr') }}"
        {% endif %}
      {% endfor %}
    {% endif %}
  {% endblock %}

  {% block embed_form_classes -%}
    class="{{ parent() }} {{ override_form_classes|trim }}"
  {%- endblock %}

  {% block embed_form_custom_attributes %}
    {% for k, v in blueprints.form.attributes %}
      {{ k }}="{{ v|e }}"
    {% endfor %}
  {% endblock %}

  {% block embed_fields %}
    {{ override_inner_markup_fields_start|raw }}
    {{ override_inner_markup_fields|raw }}

    {% if form.isEnabled() ?? true %}
    {% include include_form_field('formname', field_layout, 'hidden') %}
    {% include include_form_field('formtask', field_layout, 'hidden') %}
    {% include include_form_field('uniqueid', field_layout, 'hidden') %}
    {% include include_form_field('nonce', field_layout, 'hidden') %}
    {% endif %}

    {{ override_inner_markup_fields_end|raw }}
  {% endblock %}

  {% block embed_buttons %}
    {{ override_inner_markup_buttons_start|raw }}

    {% if form.isEnabled() ?? true %}
    {% for button in form.buttons %}
      {% if not button.access or authorize(button.access) %}
      {% if button.outerclasses is defined %}<div class="{{ button.outerclasses }}">{% endif %}

      {% if button.url %}
      {% set button_url = button.url starts with 'http' ? button.url : base_url ~ button.url %}
      {% endif %}

      {% embed 'forms/layouts/button.html.twig' %}
        {% block embed_button_core %}
          {% if button.id %}id="{{ button.id }}"{% endif %}
          {% if button.disabled %}disabled="disabled"{% endif %}
          {% if button.name %}
            name="{{ button.name }}"
          {% else %}
            {% if button.task %}name="task" value="{{ button.task }}"{% endif %}
          {% endif %}
          type="{{ button.type|default('submit') }}"
          {% if button.attributes is defined %}
            {% for key,attribute in button.attributes %}
              {% if attribute|of_type('array') %}
                {{ attribute.name }}="{{ attribute.value|e('html_attr') }}"
              {% else %}
                {{ key }}="{{ attribute|e('html_attr') }}"
              {% endif %}
            {% endfor %}
          {% endif %}
        {% endblock %}

        {% block embed_button_classes %}
          {% block button_classes %}
            class="btn-primary text-uppercase disabled {{ button.classes }} "
          {% endblock %}
        {% endblock %}

        {% block embed_button_content -%}
          {%- set button_value = button.value|t|default('Submit') -%}
          {%- if button.html -%}
            {{- button_value|trim|raw -}}
          {%- else -%}
            {{- button_value|trim|e -}}
          {%- endif -%}
        {%- endblock %}

      {% endembed %}

      {% if button.outerclasses is defined %}</div>{% endif %}
      {% endif %}
    {% endfor %}
    {% endif %}

    {{ override_inner_markup_buttons_end }}
  {% endblock %}

{% endembed %}


{% if config.forms.dropzone.enabled %}
<div id="dropzone-template" style="display:none;">
    {% include 'forms/dropzone/template.html.twig' %}
</div>
{% endif %}

and contact.md

---
title: Kontakt
menu: Kontakt
subheading: '    '
header_image: tlo2.jpg
form:
    name: contact-form
    message_color: danger
    fields:
        -
            name: name
            label: THEME_CLEAN_BLOG.CONTACT.NAME
            placeholder: THEME_CLEAN_BLOG.CONTACT.NAME
            type: text
            validate:
                required: true
            classes: form-control
        -
            name: email
            label: THEME_CLEAN_BLOG.CONTACT.EMAIL
            placeholder: THEME_CLEAN_BLOG.CONTACT.EMAIL
            type: email
            validate:
                required: true
            classes: form-control
        -
            name: phone
            label: THEME_CLEAN_BLOG.CONTACT.PHONE
            placeholder: THEME_CLEAN_BLOG.CONTACT.PHONE
            type: text
            classes: form-control
        -
            name: message
            label: THEME_CLEAN_BLOG.CONTACT.MESSAGE
            placeholder: THEME_CLEAN_BLOG.CONTACT.MESSAGE
            type: textarea
            rows: 5
            validate:
                required: true
            classes: form-control
    buttons:
        submit:
            type: 'submit'
            value: THEME_CLEAN_BLOG.CONTACT.SEND
            classes: 'btn btn-default'
    process:
        -
            email:
                from: '{{ config.plugins.email.from }}'
                to:
                    - '{{ config.plugins.email.from }}'
                subject: '[Contact] {{ form.value.name|e }}'
                body: '{% include ''forms/data.html.twig'' %}'
        -
            save:
                fileprefix: contact-
                dateformat: Ymd-His-u
                extension: txt
                body: '{% include ''forms/data.txt.twig'' %}'
        -
            display: thank-you
        -
            reset: true
media_order: 'DE.png,PL.jpg,tło.jpg,tlo2.jpg,formularz1.jpg'
---

**IMPRESSUM**

**Verantwortlich:**

Dominik & Band 

Deutsch Polnische Hochzeit Band


**Kontakt:**

Telefon +4917696489153

Email: infosdominikband@web.de

www.dominikband.eu

![formularz1](formularz1.jpg "formularz1")




![DE](DE.png "DE")

Möchten Sie mit mir Kontakt aufnehmen? Füllen Sie das Formular unten aus, um mir eine Nachricht zu senden. Ich werde innerhalb von 24 Stunden antworten! 

![PL](PL.jpg "PL")

Chcesz się ze mną skontaktować? Wypełnij poniższy formularz, aby wysłać mi wiadomość, a postaram się odpisać w ciągu 24 godzin!

pamtbaau · March 7, 2024, 8:53am

@kolofaza, Forgot to ask the version of Clean Blog.

kolofaza · March 7, 2024, 9:20am

Clean-blog version 2.0.0, i’ve found that when i do # comment line in contact.md
#classes: ‘btn btn-default’ the button is clickable but it looks “bad” so i think it is somewhwere in some css file, but whitch?

pamtbaau · March 7, 2024, 9:38am

@kolofaza,

Looking at user/themes/clean-blog/templates/forms/form.html.twig, it contains the following definition for buttons at line 178:

class="btn-primary text-uppercase disabled {{ button.classes }} "

Notes:

It does not conform to Bootstrap 5.1.3 button definitions. It is missing the btn class.
```
<button type="button" class="btn btn-primary">Primary</button>
```
The disabled class is very weird and it causes the Bootstrap disabled css to kick in when class btn is added. I don’t understand why disabled should be added.

You can either:

Notify the author by creating an issue
Override the template provided by Clean Blog using an inheriting theme,
Or maybe choose a different theme.

Note:

Don’t forget to implement a proper multilingual site. Menu’s containing multiple translations and content with multiple translations is IMHO a real no-go.

kolofaza · March 7, 2024, 10:25am

Hi, changing this to enabled or enable, dosnt work, i will send and possible problem to the author. thanks

pamtbaau · March 7, 2024, 11:06am

How did you do that?

I see you’ve removed disabled, which is good, but:

Adding enabled in the form definition hasn’t any effect since there is no styling for it.
btn should be added

kolofaza · March 7, 2024, 5:44pm

In contact.md file in page folder i’ve changed

    buttons:
        submit:
            type: 'submit'
            value: THEME_CLEAN_BLOG.CONTACT.SEND
            classes: 'btn btn-default'

to

    buttons:
        submit:
            type: 'submit'
            value: THEME_CLEAN_BLOG.CONTACT.SEND
           # classes: 'btn btn-default'

In strange way but solved.

pamtbaau · March 7, 2024, 7:36pm

@kolofaza, That’s not quite the solution… Yes, it fixes the “not clickable” issue, but it also causes the button to loose its intended design. Class btn is required to keep the design of the button as intended.

As said, you can either:

Notify the author by creating an issue
Override the template provided by Clean Blog using an inheriting theme,
Or maybe choose a different theme.

I’ve created an issue for this: Form submit button has incorrect classes · Issue #33 · tranduyhung/grav-theme-clean-blog · GitHub

pamtbaau · April 3, 2024, 2:09pm

Author has fixed the issue… Form submit button has incorrect classes · Issue #33 · tranduyhung/grav-theme-clean-blog · GitHub

Topic		Replies	Views
[Agency] Reset Button on Contact form Forms & Blueprints first-time , form	6	912	June 11, 2021
Contact form can't send to email! Support	12	2803	May 22, 2019
Email from Grav WITHOUT using forms	2	385	September 21, 2019
PinPress theme issues... Nav Menu and Contact me Archive	7	447	January 10, 2017
GRAV form plugin Archive	2	303	November 10, 2015

Theme Clean-Blog: Form submit button not clickable

Related topics