(Front-end) form spacer fields displayed first, not in order

Archive
1

When adding multiple Spacer field types to a page form, they are all being displayed first and not in the order specified in the page’s front-matter.

For example, these are the field types specified in the front-matter:
Spacer
Text
Text
Spacer
Text
Text

I would expect that same order when the form is rendered on the page, however, those two Spacer fields are being displayed at the top, before all the text fields.

Thoughts?

2

Can you please provide the YAML you are using to configure the form. Please ensure you paste between triple back ticks so it’s rendered as code.

3

Here’s the form page’s frontmatter (just the form section). Thanks!

form:
  name: give-form
  fields:
    -
      type: spacer
      title: Help Teachers Stay Longer
      # text: Some text
      underline: false
    -
      name: underfunded_teacher
      label: 'Support an Under-funded Teacher'
      placeholder: $100
      autofocus: 'on'
      autocomplete: 'on'
      type: text
      classes: ''
      outerclasses: ''
      validate: 
        required: false
    -
      name: region
      label: 'Support a Region'
      placeholder: $150
      autocomplete: 'on'
      type: text
      classes: ''
      outerclasses: ''
      validate:
        required: false
    -
      type: spacer
      title: Refugees from Syria & Iraq
      underline: false
    -
      name: backpacks
      label: 'Backpacks'
      placeholder: $45/$675
      autocomplete: 'on'
      type: text
      classes: ''
      outerclasses: ''
      validate:
        required: false
    -
      name: lunch
      label: 'Provide a Lunch'
      placeholder: $65/$975
      autocomplete: 'on'
      type: text
      classes: ''
      outerclasses: ''
      validate:
        required: false
    -
      name: refugees_transportation
      label: 'Transportation'
      placeholder: $25/$100
      autocomplete: 'on'
      type: text
      classes: ''
      outerclasses: ''
      validate:
        required: false
    -
      type: spacer
      title: Salt and Light in Laos
      underline: false
    -
      name: transportation
      label: 'Transportation'
      placeholder: $25
      autocomplete: 'on'
      type: text
      classes: ''
      outerclasses: ''
      validate:
        required: false
    -
      name: give_where_needed
      label: 'Give Where Needed Most'
      placeholder: 
      autocomplete: 'on'
      type: text
      classes: ''
      outerclasses: ''
      validate:
        required: false
    -
      type: spacer
      title: Contact Info
      underline: false
    -
      name: first_name
      label: 'First Name'
      placeholder: Michael
      autocomplete: 'on'
      type: text
      classes: ''
      outerclasses: ''
      validate:
        required: true
    -
      name: last_name
      label: 'Last Name'
      placeholder: Jordan
      autocomplete: 'on'
      type: text
      classes: ''
      outerclasses: ''
      validate:
        required: true
    -
      name: email
      label: Email
      placeholder: you@somewhere.com
      type: email
      classes: ''
      outerclasses: ''
      validate:
        required: true
    -
      type: radio
      name: us_can
      label: $US or $CAN
      # default: [us: true, can: false]
      options:
        us: $US
        can: $CAN
      validate:
        required: true
  buttons:
    -
      type: submit
      value: Submit
      classes: btn
    -
      type: reset
      value: Reset
      classes: 'btn btn-color-3 btn-outline'
  process:
    -
      email:
        from: '{{ config.plugins.email.from }}'
        to: [hidden]
        subject: '[Test] {{ form.value.email|e }}'
        body: '{% include ''forms/data.html.twig'' %}'
    -
      save:
        fileprefix: give-
        dateformat: Ymd-His-u
        extension: txt
        body: '{% include ''forms/data.txt.twig'' %}'
    -
      message: 'Thanks!'
---
4

FYI, I just tested this on a fresh install, using the Antimatter theme, and I’m seeing the same thing.

Thanks.

5

Hello,

I’ve the same issue with my form.

The spacer and display type have this issue…I’m blocked on my form now ;(

How to resolve this ?