[Agency] Reset Button on Contact form

Support Forms & Blueprints
,
1

Hi there !

While (still) trying to get a working contact form, I read one more time the Example: Contact Form | Grav Documentation
And there is an additional button to reset the form, witch I found is a useful idea !
Unfortunately, this does not work in the Agency theme, or is it my stuff that has the problem ?

Any clue of how to make it work ?

here is what I put in my grav/user/pages/01.home/_contact/form.md

although, this reset button does not react when pointer is over …

    buttons:
        - type: submit
          classes: "btn btn-primary btn-lg"
          value: Envoyer
        - type: reset
          classes: "btn btn-primary btn-lg"
          value: Effacer

Any help will be appreciated ^^

EDIT:
in fact, it does work but in certain condition and certainly not after having submit a valid form …

2

@citoyencandide, Apart from the issue you are experiencing, you might consider if a Reset button is good UX.

According to MDN on <input type=“reset”>

You should usually avoid including reset buttons in your forms. They’re rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button).

About the issue:
I can reproduce the behaviour you are observing on a fresh install, using theme Quark and the demo Contact form from the docs.

You might consider opening an issue on GitHub - getgrav/grav-plugin-form: Grav Form Plugin.

3

Done

4

@citoyencandide, Since I never used a reset button, the observed behaviour of the Reset button didn’t ring a bell to me…

After some Googling it appears to be the standard behaviour of the <input type="reset"> button.

According to MDN on <input type="reset">:

elements of type reset are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values [emphasis mine].

Since the form has been submitted and the refreshed page contains the values in the field, these values are the initial values and hence will not be cleared by reset.

To clear the fields after a submit, the action reset: true can be used.

You might want to close the issue at Github.

5

OK, closed.

In terms of UX, isn’t changing the color of the button enough to avoid user clicking the wrong button ?

(collateral question : how do I change this color?)

6

@citoyencandide,

In terms of UX, isn’t changing the color of the button enough to avoid user clicking the wrong button ?

I think I would first ask myself what the use-case might be that makes adding a Reset button valuable.

7

you’re right : it’s not because it is available that you need it …