Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Support

Remove data from input's names

Solved by pamtbaau View solution

Started by David Brisebois 8 years ago · 9 replies · 761 views
8 years ago

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

8 years ago

@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:
    TWIG
    // from
    name="{{ (scope ~ field.name)|fieldName }}"
    
    TWIG
    // 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:
    YAML
    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.

8 years ago

@davidbrisebois:
I would like inputs’ names to be exactly what I define in my Frontmatter

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

8 years ago

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).

8 years ago

@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.

8 years ago

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...

8 years ago

@davidbrisebois Would you mind sharing your form definition?

8 years ago

form:
name: subscription-form
method: POST
action: 'MY_API_URL'
classes: contact
fields:

YAML
        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.

8 years ago Solution

@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':

    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...

last edited 12/21/18 by pamtbaau
8 years ago

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

Suggested topics

Topic Participants Replies Views Activity
Support · by Thomas, 1 week ago
2 60 16 hours ago
Support · by Anna, 3 days ago
2 66 19 hours ago
Support · by Justin Young, 20 hours ago
1 34 19 hours ago
Support · by Duc , 1 week ago
2 70 6 days ago
Support · by Colin Hume, 1 week ago
2 61 6 days ago