Remove data from input's names

Support
1

Hi everybody

I use Grav for a while now for simple projets, I really love it ! I am now building a landing page for a future application to be developped, I want to integrate a form that sends data to a REST API, but input names get prefixed with data[]. I would like inputs’ names to be exactly what I define in my Frontmatter (eg. an hidden input with name: api_key would generate <input type=“hidden” name=“api_key”… instead of name=“data[api_key]”)

How can I achieve this without messing with source code ?

Thanks

2

@davidbrisebois I haven’t tested if there are any side-effects and whether the forms still works, but the following steps will change the name attribute for your fields.

To change the name attribute, you could try something like the following:

  • Copy the file ‘/user/plugins/form/templates/forms/default/field.html.twig’ into your own template’s folder ‘/user/themes/mytheme/templates/forms/default/’
  • Change line 56:
    // from
name="{{ (scope ~ field.name)|fieldName }}"

    // into
{% if field.isAPI %}
    name="{{ field.name }}"
{% else %}
    name="{{ (scope ~ field.name)|fieldName }}"
{% endif %}
  • In the frontmatter of your form add the property ‘isAPI: true’ to your fields. Like:
    fields:
   myfield:
       type: text
       label: 'My Field'
       isAPI: true

Thanks to the magic of Grav and a bit of ‘out-of-the-box’ thinking…

As said, I haven’t tested the behaviour of changing the field name, but I suspect it will work.

3

If it doesn’t do that already there’s likely a good reason. Is there something preventing you from using the data model generated?

4

Thanks, but so far it is not working… seems like the field.html.twig is never loaded from my theme… I have flushed cache, force-refreshed my browser, nothing different. I also modified to name=“fuierfgnijng” but I still see name=“data[api_key]”

@jhabdas I understand there is a reason for Grav, but what’s the point to be able to customize action URL so I can send form to a third-party service, without being able to force input names to be the one that service requires (no control over it of course).

5

@davidbrisebois Are you sure the partial ‘field.html.twig’ is in the correct folder of your theme? It should be ‘/user/themes/mytheme/templates/forms/default/field.html.twig’.

I have double checked my sample in a newly created theme and it works as expected.

6

Yes I am sure ! I did it once more also to be very sure. Appi theme includes a field.html.twig in /user/themes/appi/templates/forms/field.html.twig I also tried changing it and nothing better…

7

@davidbrisebois Would you mind sharing your form definition?

8 
form:
name: subscription-form
method: POST
action: 'MY_API_URL'
classes: contact
fields:
    -
        name: api_key
        type: hidden
        default: 123466789
        isAPI: true
buttons:
    -
        type: submit
        classes: 'submit appended'
        value: Submit

I must say also that I tried to simply prepend name attribute with some random characters like name=“jghsrehyt{{ (scope ~ field.name)|fieldName }}” (without your solution) and still no random characters in generated source code.

9

@davidbrisebois Ahh, you are using a hidden field, which uses its own dedicated template…

  • copy folder ‘/user/plugins/form/templates/forms/fields/hidden’ into ‘/user/themes/mytheme/templates/forms/fields’
  • replace line 6 in ‘hidden.html.twig’:
    // from 
<input data-grav-field="hidden" data-grav-disabled="false" type="hidden" class="input" name="{{ (scope ~ field.name)|fieldName }}" value="{{ value|join(', ') }}" />

// into
<input data-grav-field="hidden" data-grav-disabled="false" type="hidden" class="input"
   {% if field.isAPI %}
       name="{{ field.name }}"
   {% else %}
       name="{{ (scope ~ field.name)|fieldName }}"
   {% endif %}
   value="{{ value|join(', ') }}" />

Hope this helps…

10

@pamtbaau that was it ! I also have a text input but didn’t go through it until now ! Everything works fine, thanks a lot !