skydiver / october-plugin-forms

Create easy (and almost magic) AJAX forms
https://octobercms.com/plugin/martin-forms
MIT License
60 stars 41 forks source link

Feature request: custom label for form fields name #210

Closed weidmaster closed 2 years ago

weidmaster commented 4 years ago

I tested the plugin and it is working as intended, both the generic form and the upload ajax one, but I didn't find in the documentation, or in the examples, a way to have custom label for the form fields name.

You see, it would be better for presentation of the form to a client if we could change the label in the data table of the fields sent in the backed. I think the approach would be to have data attributes, like data-label="something else" and so the plugin would check for this data attribute and change the label accordingly.

As you can see in my example and screenshot, the ideal would be to use english names for the form field names, but I had to change it to portuguese so the client can understand what the data is about in the backend.

Form code snippet:

 <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-5 pt-0">Tem Filhos?</legend>
      <div class="col-sm-7">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="qtd_filhos" id="qtd_filhos_sim" value="Sim">
          <label class="form-check-label" for="qtd_filhos_sim">
            Sim
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="qtd_filhos" id="qtd_filhos_nao" value="Não">
          <label class="form-check-label" for="qtd_filhos_nao">
            Não
          </label>
        </div>
      </div>
    </div>
  </fieldset>
   <div class="form-group row">
        <label for="idade" class="col-sm-5 col-form-label">Meninos:</label>
        <div class="col-sm-3">
            <input type="number" class="form-control" name="qtd_meninos" id="qtd_meninos" min="0">
        </div>
    </div>
    <div class="form-group row">
        <label for="idade" class="col-sm-5 col-form-label">Meninas:</label>
        <div class="col-sm-3">
            <input type="number" class="form-control" name="qtd_meninas" id="qtd_meninas" min="0">
        </div>
    </div>

Screenshot of result data in backend: Captura de Tela 2020-08-26 às 10 10 41

Example of modified code and result data

<fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-5 pt-0">Tem Filhos?</legend>
      <div class="col-sm-7">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="qty_children" id="qty_children_yes" data-label="Tem Filhos?" value="Sim">
          <label class="form-check-label" for="qty_children_yes">
            Sim
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="qty_children" id="qty_children_no" data-label="Tem Filhos?" value="Não">
          <label class="form-check-label" for="qty_children_no">
            Não
          </label>
        </div>
      </div>
    </div>
  </fieldset>
Data Label Value
Tem Filhos? Sim
tareq-halaby commented 3 years ago

You can do the following tiny change (Quick fix)

Go to: "plugins\martin\forms\controllers\records" folder

Edit this file: "view.htm"

Chnage this:

<td class="record-label"><?php echo ucwords($label) ?>:</td>

Into this

<td class="record-label"><?php echo ucwords(str_replace('_', ' ', $label)) ?>:</td>

If you're also facing the same issue in mail template:

Change {{ label|capitalize}}:

Into this: {{ label|capitalize|replace({'_': ' '}) }}:

@skydiver @weidmaster

weidmaster commented 3 years ago

@tareq-halaby I will test this, but from what I see this will only make the label show with space and not use a custom text right? As PHP won't get data-attributes from html, I think the approach is in the right direction, so maybe using some other replace technique to get a custom text from the name attribute, like name="qty_filhos|quantidade_de_filhos"and parsing it to remove the pipe and then replace the underscores.