FR: Add additional formset fields

[mikemartin]

You probably have this on the roadmap but I wanted to document which fields I think would be useful for building a variety of different forms using the CP.

Fields

Type

A string to give the user flexibility to define their own fieldtypes. Here are some examples: text, email, date, number, select, multiple, radio, checkboxes, checkbox, textarea

Example:

comment:
    display: Anything else you would like to share?
    type: textarea

Description

A string to add additional instructions or help text.

email:
    display: "What's your email?"
    type: email
    description: We will get your company name from your email domain

Options

A grid or array fieldtype for defining options for Select, Radio and Checkboxes.

role:
    display: What is your role?
    type: radio
    options:
      - 
        name: executive
        value: Executive team
      - 
        name: product
        value: Product
      - 
        name: marketing
        value: Marketing
      - 
        name: customer-success
        value: Customer Success
      - 
        name: other
        value: Other

Submit Text

Another useful field for the entire Form would be Submit Text. This would help users define a label for their form submit button.

Use Case

With these fields available, I can then loop through fields in the same way as using the replicator. The example below assumes the user has "mounted" or added a form field to their page:

{{ form:create in="{form}" }}
    {{ fields }}
      <div class="form-group m-b-2">
        <label class="h6">{{ display }}</label>
        {{ if type == "textarea" }}
          <textarea name="{{ field }}" class="form-control">{{ old:comment }}</textarea>
        {{ elseif type == "select" }}
          <select name="{{ field }}" class="c-select form-control">
            {{ options }}
              <option>{{ value }}</option>
            {{ /options }}
          </select>
        {{ elseif type == "multiple" }}
          <select multiple name="{{ field }}" class="form-control">
            {{ options }}
              <option>{{ value }}</option>
            {{ /options }}
          </select>
        {{ elseif type == "checkboxes" }}
          <div class="c-inputs-stacked">
          {{ options }}
            <label class="c-input c-checkbox">
              <input type="checkbox" name="{{ field }}" value="{{ key }}">
              <span class="c-indicator"></span>
              <span class="c-description">{{ value }}</span>
            </label>
          {{ /options }}
          </div>
        {{ elseif type == "radio" }}
          <div class="c-inputs-stacked">
          {{ options }}
            <label class="c-input c-radio">
              <input name="{{ field }}" type="radio" value="{{ key }}">
              <span class="c-indicator"></span>
              <span class="c-description">{{ value }}</span>
            </label>
          {{ /options }}
          </div>
        {{ elseif type == "checkbox" }}
          <div class="form-check">
            <label class="form-check-label">
              <input type="checkbox" name="{{ field }}" class="form-check-input">
              {{ value }}
            </label>
          </div>
        {{ elseif type == "date" }}
          <input type="date" name="{{ field }}" value="{{ now format="Y-m-d" }}" class="form-control" />
        {{ elseif type != null }} <!-- For all other HTML5 fields like number and email -->
          <input type="{{ type }}" name="{{ field }}" value="{{ old }}" class="form-control" />
        {{ else }}
          <input type="text" name="{{ field }}" value="{{ old }}" class="form-control" />
        {{ /if }}
        {{ if description }}
          <small class="form-text text-muted">{{ description }}</small>
        {{ /if }}
      </div>
    {{ /fields }}
  </div>
</div>
<button class="btn btn-lg btn-block btn-primary">{{ submit_text }}</button>
{{ /form:create }}

[jackmcdade]

What is this for, exactly?

[mikemartin]

@jackmcdade

This would give CP admins the ability to create any type of Form they need with the form builder. I already have this running on a client site, but adding the 3 fields described above had to be done by editing the formset YAML directly.

There are two additional steps to get this to work:

1) Add a Form page template where the admin can select their form. I created a form suggest field to help with this. https://github.com/lesaff/statamic2-suggestmodes#forms 2) Create the form template that loops through each field. (example above)

[jackmcdade]

Ah okay I get you now. Will think about the most flexible way to support this goal.

[mikemartin]

@jackmcdade Great thanks! Here are some example forms that I've built. I've also attached their fieldsets and form template.

Contact

contact.txt

Request Demo

demo.txt

Form template

form.txt

[mikemartin]

@jackmcdade I've been thinking about this a little more. Perhaps the most elegant solution would be if we could configure Form fields the same way we currently configure Assets fields?

This way I could add additional fields like width, type and instructions myself. 👍

[jcohlmeyer]

I would also like the front end forms to have all the flexibility and power of the forms for fieldsets and assets. This would make it a lot easier to handle changes in contact forms etc!

[jackmcdade]

That's what workshop is for! 😁

[jcohlmeyer]

No, this is for end user forms (such as a contact form, survey, application etc.), not content creation.

For example I do not want to do this as it is hacky and I would have to put in a conditional every time new fields are added to the contact form ...

      {{ fields }}
        <label for="{{ name }}">{{ display }}</label>
        {{ if name == 'comment' }}
          <textarea id="{{ name }}" for="{{ name }}">
            {{ old }}
          </textarea>
        {{ else }}
          <input id="{{ name }}" type="text" name="{{ name }}" value="{{ old }}" />
        {{ /if }}
      {{ /fields }}

Please let us do this instead, I think this is important to be core in Statamic forms ...

      {{ fields }}
        <label for="{{ name }}">{{ display }}</label>
        {{ if type == 'textarea' }}
          <textarea id="{{ name }}" for="{{ name }}">
            {{ old }}
          </textarea>
        {{ else }}
          <input id="{{ name }}" type="{{ type }}" name="{{ name }}" value="{{ old }}" />
        {{ /if }}
      {{ /fields }}

[mikemartin]

@jackmcdade thanks for reopening this. Please take a look at my example templates (contact.txt, form.txt) above if you haven't already.

This would be a great addition to the core of Statamic and would really help our clients manage and create forms and landing pages themselves.

https://github.com/statamic/v2-hub/issues/929#issuecomment-245320359

[jcohlmeyer]

So I think Statamic even uses type now to allow asset uploads in these forms, and you can set & use the type variable yourself in the YAML but there is no way to see this in the UI.

[edalzell]

I think a hidden type would be useful as well for invisible fields. My customer uses them for A/B testing and data collection.

Just had a customer request this as well. Likely going to direct them to TypeForm instead.

[subpixelch]

I've the same problem. Trying to loop over a grid where the customer can add or remove their own fields:

{{ form:create in='form' }}
{{ grid_mithilfe }}
    <div class="row">
        <div class="col">
            <input type="checkbox" name="{{ job | slugify }}_{{ job-detail }}">
        </div>
        <div class="col">{{ job }}</div>
        <div class="col">{{ job-detail }}</div>
        <div class="col">
            {{ relate:verantwortlich }}
                <a href="mailto:{{ mitglied_mail }}">{{mitglied_name}}</a>
            {{ /relate:verantwortlich }}</div>
    </div>
{{ /grid_mithilfe }}
{{ /form:create }}

... but that doesn't work as long as the fields have to be defined in the form.yaml ...

[beckysoll]

+1 to all of this, would be very handy.

[jasonvarga]

Just FYI, you can add whatever other variables you need to each field if you edit it manually through the yaml file.

Please let us do this instead, I think this is important to be core in Statamic forms ...

  {{ fields }}
    <label for="{{ name }}">{{ display }}</label>
    {{ if type == 'textarea' }}
      <textarea id="{{ name }}" for="{{ name }}">
        {{ old }}
      </textarea>
    {{ else }}
      <input id="{{ name }}" type="{{ type }}" name="{{ name }}" value="{{ old }}" />
    {{ /if }}
  {{ /fields }}

Go ahead and add type: whatever to each field. There's just no UI for it in the CP at the moment.

[beckysoll]

That's a good point, thanks.​

[dannyuk1982]

@jasonvarga does this mean you could add in the yaml file manually stuff like

  type: select
  options:
    - optionOne
    - optionTwo
    - optionThree

?

Ideally stuff like this would be editable in the CP so that clients could add options to things like contact forms, i.e. department or how did you hear about us

[HYR]

+1

[jackmcdade]

Please use the thumbs up emoji instead of +1ing :)