Encoding issue of form content

Hello Grav Community,

i ve setup a form using the form and email plugin. The content is serialized and sended by this:

      $.ajax({
      url: form.attr('action'),
      type: form.attr('method'),
      dataType: 'html',
      data: form.serialize(),
      success: function(result) {console.log('Message send.');},
      error: function(XMLHttpRequest, textStatus, errorThrown)
      {
        console.log("Status: " + textStatus);
        console.log("Error: " + errorThrown);
      }
  });

The form definition looks like this:

  title: footer

cache_enable: false

form:
name: kb-footer-form
action: /
id: kb-footer-form-id
classes: kb-footer-form

  fields:
    - name: Nachricht
      placeholder: Geben Sie hier Ihre Nachricht ein.
      type: textarea
      rows: 7

  buttons:
    - type: submit
      classes: kb-submit
      value: ''

  process:
    - email:
        from: "{{ config.plugins.email.from }}"
        to:
          - "{{ config.plugins.email.to }}"
        subject: "[Website Kontakt]"
        body: "{% include 'forms/data.txt.twig' %}"
        reset: true
    - save:
        fileprefix: Website-Kontakt-
        dateformat: Ymd-His-u
        extension: txt
        body: "{% include 'forms/data.txt.twig' %}"

If i had some linebreaks in a textarea, the email have hard coded CR LF in it and the content of a textarea looks like this:

Hello\r\nWorld!

Any clues?

Thanks in advance!
npetri

Is it only the email where you are seeing this?

I can see that your JQuery serialize function is likely escaping the line breaks. Grav and Twig will have no way to know that's happened because it is done using Javascript. Looks like you followed the instructions in the Grav docs which don't cover how to handle the data.

You should look at overriding the 'forms/default/data.txt.twig' template (the template 'forms/data.txt.twig' in your forms declaration simply extends this one). Override it by copying it from the plugin to 'user/themes/<YOURTHEME>/templates/forms/default/data.txt.twig'.

There you can edit the line that sets the field value by applying a Twig filter. Ideally you will URL-unencode (decode) what Javascript did, but there is no such native filter in Twig. You can write your own filter easily.

There are not many native decoding filters unfortunately. Let me know if you need help creating a custom filter for PHP's urldecode.

You might get away with Twig's raw filter for newline problems at least. Line 5 in data.txt.twig would become:

{%- set value = form.value(field.name ?? index)|raw %}

If you want HTML output, you will also need to edit the 'data.html.twig' filter in a different way, so it probably is best to extend Twig with a custom urldecode filter.

The other option might be not to serialise the form for Ajax submission, but I don't know if or how that is possible.

Hope that helps.

Hello hughbris,

thank u for ur reply. It was my first thought too to override the data.txt.twig but i got stucked because of lacking filters. I've checked the raw filter but this doesn't work. So i decide to come over it by switching to html. This works now, after i adjust the data.html.twig.

The block 'field_label' refers to field.label only, not like data.txt.twig to field.name. I dont have labels in my forms and thats why i got blanks there. I added a fallback to field.name.

I've also checked ur link for building twig filters and i found the plugin String Filters. I think i will have a closer look of that topic.

Thank u and have a nice day.
np

I just heard about this new option a few hours ago, which sounds like it addresses your label problem: https://github.com/getgrav/grav-plugin-form/commit/e03fb0468c25ddafcc13be478341c0be3ef75f33

I've had to write similar custom properties and Twig to handle this scenario myself in the past. Sounds like you are competent enough to work your way through all this though 🙂

Ahh ok. Thank u for the hint! So the upcoming update of forms will fixed it. Very good. My solution wasn't that clever. 🙂