When using the internationalization options there's a problem when submitting forms.

In templates/forms/default/form.html.twig line 4, we have the following:

  action="{{ uri.rootUrl ~ (form.action|default(page.route)) }}"

The thing is that even if you set (in system.yaml)

languages.home_redirect.include_lang: true
languages.home_redirect.include_route: true

the page.route will give the url without the locale, so when you submit the form, you get a 404.

The other error is that the include_route only works with the home alias, but i reckon that issue belongs to grav.

What is the tu filter in "forms/field.html.twig" at line 48 supposed to do and where should it be defined? It looks like some hook for translation. Should this be just t for the Grav translation filter?

I am getting Twig_Error_Syntax - The filter "tu" does not exist in "forms/field.html.twig" at line 48 if i have set twig: undefined_filters: false in system.yaml.

Hello, I wanted to ask, is there anyway to see form.txt in backend, seems like I think if grav form have a option saving to file, why don't it show the form in the backend, thanks

how can one differentiate success messages, from failure ones ?

I have seen that grav-plugin-admin uses form as a backend and thus it extends the form plugin with a markdown editor.. It would be possible to integrate back this page editor as a form field. (my use case is a kind of wiki build on top of grav)

please add label:enhancement

On the demo site, when I submit the form with an invalid email address (e.g. a, as shown in screenshot A), the resulting page shows an error message indicating a Server Error occurred (as shown in screenshot B).

Screenshot A:

Screenshot B:

I expected the resulting page to show the contact form again, along with a user-targeted error message (e.g. "The email address you entered was invalid."); as opposed to showing a server administrator-targeted message indicating a Server Error occurred.

On a site with translations enabled and with one form, the form does not submit data. Looking at the requests using chrome, it appeared that this is caused by a 301 redirect.
So the site URL looks like '.../nl/contact' but the form submits its POST data to '.../contact'. This results in the 301, causing the browser to just do a plain GET to '.../nl/contact' without any query.

Setting include_default_lang in system.yaml to false 'fixes' this issue because the locale component is taken out completely but that's not a real solution of course.

Am I missing something here? Otherwise I think grav should just accept URLs without locale in this case, and/or the form should post to a URL including the current locale.

Hi,

Would it be possible to support a value for onsubmit. This way we can provide some custom js to validate the form.

The standard html5 validation doesn't seem to work in safari.

I'm looking for a way to add the {{ grav.user.username }} to the filename or prefix of a form submission.
I was wondering if the form template could output something when the post is generated, was trying with the form.md "prefix:" initially. Sent here by Rhukster.

I know I proposed the size attribute myself, but now while working with forms realized that the introduction of the size attribute for the input field with commit hwmaier@28b0ace is clashing with using size as a general css style class in the form field's div wrapper `

Please see details here:
getgrav/grav-plugin-admin#381

I am not sure whether this is with the admin plugin or the form plugin.

Thanks!

Hello, with following form code

form:
    name: Upload
    fields:
        custom_file:
          type: file
          label: A Label
          multiple: false
          destination: 'self@'
          random_name: false
          avoid_overwriting: false
          limit: 10
          filesize: 5
          accept:
            - image/*

each time i add image, i get error message on hover Call to a member function find() on null

I get :
File "test.pdf" is not an accepted MIME type.

Inside markdown file:

       - name: file
          label: Soutěžní návrh (náhled v PDF)
          placeholder: Nahrajte návrh
          outerclasses: 'margin'
          type: file
          multiple: false
          destination: "user/data/contact/"
          avoid_overwriting: true
          accept: 'application/pdf'
          validate:
            required: true

The select file window makes right asumption and lets me select pdf files (on osx) but the validation fails.

When accept is changed to accept: '*' pdf file works.

I have the MIME type defined in media.yaml. Other formats (images) behave as expected.

Hello!

I tried to change Simpleform to Form plugin in Gravstrap theme. I followed the instructions here:
https://learn.getgrav.org/forms/forms/how-to-forms-in-modular-pages

Also use this skeleton as main example:
https://github.com/getgrav/grav-skeleton-deliver-site

I copied this folder:
https://github.com/getgrav/grav-theme-deliver/tree/develop/templates/forms

And add this content in modular md file:

form:
    name: my-nice-form
    action: /contact
    fields:
        - name: name
          id: name
          label: Name
          classes: form-control form-control-lg
          placeholder: Enter your name
          autocomplete: on
          type: text
          validate:
            required: true

        - name: email
          id: email
          classes: form-control form-control-lg
          label: Email
          placeholder: Enter your email address
          type: email
          validate:
            rule: email
            required: true

        - name: message
          label: Message
          classes: form-control form-control-lg
          size: long
          placeholder: Enter your message
          type: textarea
          validate:
            required: true

    buttons:
        - type: submit
          value: Submit
          class: btn btn-primary btn-block

    process:
        - email:
            from: "{{ config.plugins.email.from }}"
            to:
              - "{{ config.plugins.email.from }}"
              - "{{ form.value.email }}"
            subject: "[Feedback] {{ form.value.name|e }}"
            body: "{% include 'forms/data.html.twig' %}"
        - save:
            fileprefix: feedback-
            dateformat: Ymd-His-u
            extension: txt
            body: "{% include 'forms/data.txt.twig' %}"
        - message: Thank you for your feedback!
        - display: thankyou

form.md content in _contact modular:

---
menu: Contact us
cache_enable: false

---

## Let your customers contact you
Use the Contact module to let your customers contact you

But on page I see only this part of code in HTML elements:

<form method="POST" action="/gravstrap-theme-simple-page-example/_contacts" name="">
    <div class="buttons">
    </div>
    <input type="hidden" value="be544dd90f65cfa87e50a248a2e5233d" 
name="form-nonce" id="form-nonce">

</form>

What I'm missed in my configuration?

It would be perfect to add option in yaml, and get the desired outcome. I'm mos def thinking UI and styling as it is also a normal attribute to enhance richness of allot.

A normal scenario for super checkboxes would be:

<input type="checkbox" id="terms_and_conditions">
<label for="terms_and_conditions">I have read and accepted the Terms and Conditions</label>

a part of typical css:

input[type=checkbox] {
    display: none;
}

input[type=checkbox]:checked ~ label::before {
    background-color: $beautiful;
}

But i know tilda will not work as the standard form output is clogged. JS for the rescue but worth to mention.

Anyhow the UI would be better off with label option for attriubte 👍 Label-click ftw!
What do you think?

ÅÄÖ will produce Å Ä Ö / Göteborg will be displayed as Gö teborg

Tested both copy plain text to form input and md + typing myself.
Any idea why?

When a required validation fails, the error message references the field name. If the field name and label are different, then the web user has no idea which field the message relates to as he doesn't see the field name only the label. Wouldn't it make more sense to use the field label instead to reference the non-validating field in the error message?

Example:

    - name: platform
      label: OS & Language

and the message:
Validation failed: Missing required field: platform

Form plugin 2.0.2
Grav ~1.0 / getgrav/grav@2709938

Whoops\Exception\ErrorException thrown with message "Call to undefined method Grav\Common\Session::getFlashObject()"

Stacktrace:
#8 Whoops\Exception\ErrorException in /<path>/user/plugins/form/form.php:209
#7 Grav\Plugin\FormPlugin:onPagesInitialized in /<path>/vendor/symfony/event-dispatcher/EventDispatcher.php:181
#6 call_user_func:{/<path>/vendor/symfony/event-dispatcher/EventDispatcher.php:181} in /<path>/vendor/symfony/event-dispatcher/EventDispatcher.php:181
#5 Symfony\Component\EventDispatcher\EventDispatcher:doDispatch in /<path>/vendor/symfony/event-dispatcher/EventDispatcher.php:46
#4 Symfony\Component\EventDispatcher\EventDispatcher:dispatch in /<path>/vendor/rockettheme/toolbox/Event/src/EventDispatcher.php:23
#3 RocketTheme\Toolbox\Event\EventDispatcher:dispatch in /<path>/system/src/Grav/Common/Grav.php:407
#2 Grav\Common\Grav:fireEvent in /<path>/system/src/Grav/Common/Grav.php:245
#1 Grav\Common\Grav:process in /<path>/index.php:38
#0 {main} in /<path>/index.php:0

Hi,
I've just updated Form to v2.0.1 in a Grav website and contact form stopped working. It reloads itself with no form processing at all. Reverting back to v1.3.2 fixes the issue. Removing or setting an incorrect 'action' field and value in frontmatter gets a 404. I've seen in Grav documentation that Forms 2.0 allows to define form code directly to modular page instead of parent page. Guess there's some config involved but can't figure out what have changed.

Thanks in advance for your time.

Moved to the Admin plugin since it's not meant for the frontend.

Kept in the Form plugin for the time being, to avoid issues with releases sync.

Hi guys, I have small issue with recaptcha as per the image attached, the api.js is loaded however the site key seems to be missing. I have just copied the form from learn.grav and for some reason all i get is the label captcha. any ideas why or how to solve this? the page is just a form.md page (not modular).

We use forms with the email plug-in for a contact form - as used in the theme skeleton for the theme "deliver". On our production environment we use caching - it's turned on in /user/config/system.yaml.

cache:
  enabled: true
  check:
    method: file
  driver: auto
  prefix: 'g'

As soon as caching is turned on, the POST request from the form does not trigger the processing but only shows the contact form again. This happens because the contact form is cached. Setting cache_enable to false for the contact page also doesn't seem to work.

Not quite sure if this belongs here but was the best match for me.

If I extend a blueprint to modify the content tab in the admin panel it looks like I don't really have control over the order of the fields. I want to add two fields below the title field, which I tried like this:

title: Employee
@extends:
    type: default
    context: blueprints://pages

form:
  fields:
    tabs:
      fields:
        content:
          type: tab
          title: Employee
          fields:
            content:
              type: ignore

            header.function:
              type: text
              label: Function

            header.picture:
              type: pagemediaselect
              label: Picture

            uploads:
              type: pagemedia
              label: PLUGIN_ADMIN.PAGE_MEDIA

Even if I add the uploads field again below the two existing fields the order still seems to come from the inherited blueprint. The result is:

The most flexible solution for me would be if I could somehow just override everything that comes below a specific attribute respectively stop inheritance there.

Maybe this is already possible or there is another way to solve my issue but I couldn't find anything in the docs.

shouldn't form.message be put in session ?

Is it it correct that there is no server-side validation of the input data? E.g. a client which does not support the <input required> attribute can submit the form successfully in any case?

If so, are there any plans to provide server-side validation in the future?

hi all.
have just setup a simple site and have used the standard contact form.
added my recaptcha keys, setup the email addresses and the form displays fine.
however when i enter the required details and click submit it throws an error

'400 - Display page not found. Please check the page exists'

and the log shows

'[2016-02-05 06:43:52] grav.CRITICAL: Display page not found. Please check the page exists. - Trace: #0 [internal function]: Grav\Plugin\FormPlugin->onFormProcessed(Object(RocketTheme\Toolbox\Event\Event), 'onFormProcessed', Object(RocketTheme\Toolbox\Event\EventDispatcher)) #1 '

the form details are sent as they should be. can't figure out why, after hitting submit, the contact form doesn't display 'message: Thank you for getting in touch!' as it should.
apologies if i'm missing something obvious. rather new to this platform (but i'm loving it so far)

I would like to request the ability to get client IP address who is filling out the form and submitting it. We get a lot of form spam even with the google captcha enabled and want to block the IP addresses from our site, but cant since we dont know the form submitter's IP address. Would like a way to add a form field to the form data that is emailed to us that contains the submitter's IP address

It would be nice to have a Hook Process to the form.
Not sure of how this would work, Would this have to be in the form of a function in your theme or another plugin
or would it be in the form of a custom function right in the yaml file
or is there somewhere else this could be defined.

Here are some reasons to add a hook

• Be able to a email list registration, (curl call to another site)
• Save data in a database
• append to a custom file on disk instead of a new file each form submission

I have followed the instructions by copying the plugin config file to my user config folder and making sure it is enabled.
My field is set up as follows...

- name: images
  label: Add one or more images
  type: file
   validate:
    required: true

But it's giving me this error when I try to upload a file (tested locally and on a server)
Undefined index: files

Here's the full error from the log file (with my local path omitted:

grav.CRITICAL: Undefined index: files - Trace: #0 [my local root]/user/plugins/form/classes/form.php(206): Whoops\Run->handleError(8, 'Undefined index...', '[my local root]/ww...', 206, Array) #1 [my local root]/user/plugins/form/classes/form.php(173): Grav\Plugin\Form->cleanFilesData('images', Array) #2 [my local root]/user/plugins/form/form.php(59): Grav\Plugin\Form->post() #3 [internal function]: Grav\Plugin\FormPlugin->onPageInitialized(Object(RocketTheme\Toolbox\Event\Event), 'onPageInitializ...', Object(RocketTheme\Toolbox\Event\EventDispatcher)) #4 [my local root]/vendor/symfony/event-dispatcher/EventDispatcher.php(158): call_user_func(Array, Object(RocketTheme\Toolbox\Event\Event), 'onPageInitializ...', Object(RocketTheme\Toolbox\Event\EventDispatcher)) #5 [my local root]/vendor/symfony/event-dispatcher/EventDispatcher.php(46): Symfony\Component\EventDispatcher\EventDispatcher->doDispatch(Array, 'onPageInitializ...', Object(RocketTheme\Toolbox\Event\Event)) #6 [my local root]/vendor/rockettheme/toolbox/Event/src/EventDispatcher.php(23): Symfony\Component\EventDispatcher\EventDispatcher->dispatch('onPageInitializ...', Object(RocketTheme\Toolbox\Event\Event)) #7 [my local root]/system/src/Grav/Common/Grav.php(412): RocketTheme\Toolbox\Event\EventDispatcher->dispatch('onPageInitializ...', NULL) #8 [my local root]/system/src/Grav/Common/Grav.php(252): Grav\Common\Grav->fireEvent('onPageInitializ...') #9 [my local root]/index.php(37): Grav\Common\Grav->process() #10 {main} [] []

Is there anything else that needs to be set up or is there any issue with the plugin?

At this point i can put all form submitted files in one folder.

        - name: file
          label: Submitted file
          destination: "user/data/contact/"

I need to rename the files or sort them to folders depending on some submitted field (surname for example).

        - name: file
          label: Submitted file
          rename: "{{ form.value.surname }}-submission"
          destination: "user/data/contact/"

or

        - name: file
          label: Submitted file
          destination: "user/data/contact/{{  form.value.surname }}/"

How to go about it? Thanks

I have a major problem as field-type "date" & "time" are not supported by Firefox. And even on Chrome and Edge the UI of the standard "Calendars" and "Time-Selectors" are very poor. Is there any way to change them by telling the plugin to take f.ex. the Jquery-Datepicker or is there any other alternative?

I need to put a calendar and time-selector for a restaurant-booking-form...
Any proposals?

When I input an invalid email address (e.g. 'm') in an email field and send it, I get a php exception:

Swift_RfcComplianceException
Address in mailbox given [m] does not comply with RFC 2822, 3.6.2. 

Someone in the forum mentioned, that it is possible to enable HTML5 client side check:
http://getgrav.org/forum#!/?Swift_RfcComplianceException
However, this option does nothing, because I have it enabled, please check if this is true?

What I want

The email check should be done serverside. The contact form should pop up again, where the email field is marked red, and the user see that the email is invalid. Also maybe gets a text message.

PS: In the docs I found nothing mentioned about validation rules
PPS: IMPORTANT, I found out that the docs has an error in the sample code which I copy-pasted:
http://learn.getgrav.org/advanced/forms

type: text

for the field email is wrong. So the client side HTML rule is not applied.

Hello,

I ask for a feature. It would be really nice to pre-fillout a form with GET parameters in the URL. For example: There is a newsletter (un)subscribe form where the user types the email address, klicks the radio subscribe or unsubscribe and then he clicks on submit.
In the newsletter I'd like to provide a link for unsubscribe from the list by passing the email address. It would be much easier for the user, just to click "submit".
(example link: https://www.example.com/newsletter/[email protected])

Is there a possible way to do that?

We need the ability to specify additional HTML5 form types. For example, Number and Tel.

When specifying Text and validate as number, it renders an input element of type text. If we want mobiles to offer a numerical keypad to aid user input, we need to be able to specify the relevant Number or Tel input types.

Kind of like this:

Content
{{ show form here }}
More content

(This issue was in the admin-plugin at first. I was told to move it here)

I have defined the following in the blueprints file of my theme (/user/themes/mytheme/blueprints/default.yaml) to add a new tab "Downloads" to each page's admin panel:

form:
  fields:
    tabs:
      type: tabs
      active: 1
      fields:
        downloads:
          type: tab
          title: Downloads
          fields:
            downloads:
              type: section
              title: Downloads
              underline: true
            header.downloads:
              type: list
              label: Downloads
              fields:
                .title:
                  type: text
                  label: Title
                  default:
                  validate:
                    required: true
                .file:
                  type: upload
                  label: File
                .icon:
                  type: text
                  label: Icon
                  default:
                  validate:
                    required: false

This works fine and the new tab is displayed. However, if I click on "save", the file won't upload and the page header contains:

file: 'C:\fakepath\test.bin'

The fakepath part is a security feature of Chrome. Grav should only use the last part of the filename.

If i put a form on the front page, the form does not find the thankyou subpage when submitted and throws an error.

On front page the form action attribute is /. If I change it to include the front page's Folder Name (e.g. /home) with Javascript, then the form works normally.

An enhancement to the plugin to allow us to fetch a given form's rendered content from twig, and render in place anywhere. Something like (in php) $forms->get("_formslug_or_route") which returns a reference to the renderable/workable form object.

ideally, it returns a reference to the renderable object, as the form's action or other properties may need to be manipulated to work page-agnostic.

When using a select input with multiple set to true the (de-)serialization fails.
validate: type: array does not work as expected: Validation fails
validate: type: commalist works, but does not deserialize properly

topics:
    - 'coaching,mediation'

This is the generated YAML for this field definition:

header.topics:
              type: select
              label: ...
              help: ...
              '@data-options': '\Grav\Theme\Glueck::topics'
              multiple: true
              default: ''
              validate:
                type: commalist

Where topics is a public static function that returns an array ['fuu' => 'bar']

I checked that field.options is indeed my provided array. However value seems to be an array with only one element: ['coaching,mediation']. My quickndirty solution for the moment is to fetch the first element of the value array and check if coaching is in coaching,mediation- works, but of course not really nice: (field.multiple and text in value|first)

{% for key, text in field.options %}
            <option {% if key == value or (field.multiple and text in value|first) %}selected="selected"{% endif %} value="{{ field.multiple ? text : key }}">{% if grav.twig.twig.filters['tu'] is defined %}{{ text|tu }}{% else %}{{ text|t }}{% endif %}</option>
            {% endfor %}

Another issue I found when using the select field:

{% block global_attributes %}
    data-grav-selectize="{{ (field.selectize is defined ? field.selectize : {})|json_encode()|e('html_attr') }}"
    {{ parent() }}
{% endblock %}

Using e('html_attr') after json_encode() results in having the empty array serialized as html entities, which is not working. I found this to be still existent here https://github.com/getgrav/grav-plugin-form/blob/develop/templates/forms/fields/select/select.html.twig#L4 and i would presume that this still is an issue.

I am using the latest stable version (1.0.10) and up to date plugins. If this has been fixed in the meantime, ignore this :)

I feel a bit like a party pooper with this, but I'm looking to create a form with a custom template that includes a simple file input. I don't really want to upload the file with AJAX, or use the custom dropzone design included in the default form template. It's nice functionality, but it seems targeted at a pretty specific use case, whereas I just want a click-to-submit form. From looking at 4f0d5b6, it seems like the form won't pick up any files from POST submissions anymore. Is that the case? Couldn't these two use cases coexist?

A future enhancement

have an override in the form logic for the ...
destination option in field type: file to be an override for the blueprints.

form:
    name: feedback-form
    classes: form-horizontal
    fields:
            - type: file
              multiple: false
              destination: 'different/directory/then/blueprint'
              accept:
                 - image

This line in the code.
https://github.com/getgrav/grav-plugin-form/blob/develop/classes/form.php#L233

The feature I introduced in 50a6eb3 does not really work once forms are submitted. I realised that the support of defaulting the type to text cannot be handled at template level alone. Support must be added to the form plugin's post method and the core's Blueprint class.

So I suggest to either withdraw the feature or add it to those two PHP files (and then it can be removed from the templates/forms/default/form.html.twig file).

I am happy to create a PR for either option, please advise.

I changed "obligatoire" to "required" in templates/forms/field.html.twig and it broke the entire contact form. I reverted the word change and it fixed it. What am I doing wrong?

{{ field.validate.required in ['on', 'true', 1] ? '(obligatoire)' }}

It seems that

- name: detailed-description
      label: Detailed description
      placeholder: 'including learning outcomes, for proposal review (up to 250 words)'
      type: textarea

outputs:

<textarea rows="10" class="form-control" name="detailed-description"></textarea>

missing the placeholder attribute

Currently we are only able to have one form using this plugin per page. Allowing the user to have multiple forms would be useful.

Currently, Grav\Common\Data\Validation accepts field values which only consist of spaces and have the option required. Is this the intended behaviour or should this be fixed?

When using 'process: add' to write all the data in one file (as detailed here https://getgrav.org/forum#!/plugin-development:form-plugin-data-output/hi-forms-supports-an-ope), 'body:" stops working and the formatting defaults to original data.txt.twig (not the ones in templates/forms/ or templates/forms/defaults however).

I've been playing around with Grav (and great work so far), but I've ran into a bug when using the Recaptcha for forms. I believe this is related to issues #51 and #54.

I get the following error:

Undefined index: recatpcha_secret

The culprit line is 120 in form/form.php:

'secret'   => isset($params['recaptcha_secret']) ? 
$params['recaptcha_secret'] : isset($params['recatpcha_secret']) ? 
$params['recatpcha_secret'] : $this->config->get('plugins.form.recaptcha.secret_key')

Originally I thought this might be a PHP7 issue, but it manifests in 5.6 as well. I believe the internals will not behave how you are expecting them to, and you actually have to wrap the second ternary operation in parens like so:

  'secret'   => isset($params['recaptcha_secret']) ? 
$params['recaptcha_secret'] : (isset($params['recatpcha_secret']) ? 
$params['recatpcha_secret'] : $this->config->get('plugins.form.recaptcha.secret_key')),

This should solve the issue. Just as a suggestion, I would advise against using nested ternary operations as they reduce clarity of code and in cases like this, cause unexpected bugs. This isn't a great tradeoff just to save the few lines from using a declarative (but ugly) if/elseif/else block.

Having troubles with the verification of the recaptcha request (I'm just getting b:0; as response from Google), I was going through the code and noticed that some of the variables use recatpcha instead of recaptcha. Is that intentional?

Occurrences:

• recatpcha_secret
• recatpcha_site_key

(source)

Using Grav 1.0.10, and the Form plug-in updated from 1.2.2 to 1.3.0-rc.4, the two forms I have on the installation get the same issue. When submitting, this error happens:

Validation failed: Missing required field:

All the fields have been filled. The falsely missing field varies, a File input for one, and ReCaptcha for the other. When reverting back to 1.2.2, the forms work again.