diff --git a/content/collections/tags/form-create.md b/content/collections/tags/form-create.md index c14b09b91..6e3b55f4f 100644 --- a/content/collections/tags/form-create.md +++ b/content/collections/tags/form-create.md @@ -26,7 +26,7 @@ parameters: - name: csrf type: boolean - description: When `false`, the hidden `name="_token"` attribute won't be added to the form so you can use other ways of providing the token. Defaults to `true`. + description: When `false`, the hidden `name="_token"` attribute won't be added to the form so you can use other ways of providing the token. Defaults to `true`. - name: files type: boolean @@ -45,7 +45,7 @@ variables: name: fields type: array description: > - An array of available fields for [dynamic rendering](#dynamic-rendering). + An array of available fields for [dynamic rendering](#dynamically-rendering-fields). - name: errors type: array @@ -106,30 +106,30 @@ Here we'll be creating a form to submit an entry in a `contact` form. ``` ::tab blade ```blade - - @if (count($errors) > 0) -
- @foreach ($errors as $error) - {{ $error }}
- @endforeach -
- @endif + - @if ($success) -
- {{ $success }} -
- @endif + @if (count($errors) > 0) +
+ @foreach ($errors as $error) + {{ $error }}
+ @endforeach +
+ @endif - - + @if ($success) +
+ {{ $success }} +
+ @endif - - + + + + + + + -
``` :: @@ -147,7 +147,7 @@ You can also use the shorthand syntax for `form:create in="contact"`. ::tab blade ```blade - ... + ... ``` :: @@ -173,16 +173,14 @@ When you need to render a form that's selected via the [Form Fieldtype](/fieldty ::tab antlers ```antlers -{{ form:create in="{ form_fieldtype:handle }" }} +{{ form:create :in="form_fieldtype:handle" }} ... {{ /form:create }} ``` ::tab blade ```blade - - ... + + ... ``` :: @@ -191,7 +189,7 @@ This way you can let Control Panel users select which form should be used on an ### Dynamically Rendering Fields -Instead of hardcoding individual fields, you may loop through the `fields` array to render your blueprint's fields in a dynamic fashion. +Instead of hardcoding individual fields, you may loop through the `fields` array using the [form:fields](/tags/form-fields) tag to render your blueprint's fields in a dynamic fashion. ::tabs @@ -199,7 +197,7 @@ Instead of hardcoding individual fields, you may loop through the `fields` array ```antlers {{ form:contact }} - {{ fields }} + {{ form:fields }}
- {{ /fields }} + {{ /form:fields }} @@ -222,38 +220,43 @@ Instead of hardcoding individual fields, you may loop through the `fields` array ```blade - @foreach ($fields as $field) -
- -
{!! $field['field'] !!}
- @if ($field['error']) -

{{ $field['error'] }}

- @endif -
- @endforeach + +
+ +
{{ $field['field'] }}
+ @if ($field['error']) +

{{ $field['error'] }}

+ @endif +
+
- +
``` :: -Each item in the `fields` array contains the following data configurable in the form's blueprint. +Each item in this `fields` array contains the following data: + +#### Fields Array Variables | Variable | Type | Description | |---|---| --- | -| `handle` | string | System name for the field | -| `display` | string | User-friendly field label | +| `display` | string | User-friendly field label configured in blueprint | +| `instructions` | string | User-friendly instructions label configured in blueprint | +| `field` | string | [Pre-rendered field HTML](#prerendered-field-html) based on the fieldtype | | `type` | string | Name of the [fieldtype](/fieldtypes) | -| ` field` | string | [Pre-rendered field HTML](#pre-rendered-field-html) based on the fieldtype | +| `handle` | string | Blueprint handle for the field | +| `name` | string | Input name for submitting the field | +| `value` | mixed | Field value, which respects both `old` and `default` | +| `default` | mixed | Default field value as assigned by blueprint | +| `old` | mixed | Old field value from an unsuccessful submission | | `error` | string | Error message from an unsuccessful submission | -| `old` | array | Contains user input from an unsuccessful submission | -| `instructions` | string | User-friendly instructions label | | `validate` | array | Contains an array of validation rules | | `width` | string | Width of the field assigned in the blueprint | @@ -276,21 +279,21 @@ This approach, combined with the [blueprint editor](/blueprints), will give you ::tab antlers ```antlers -{{ fields }} +{{ form:fields }}
{{ field }}
-{{ /fields }} +{{ /form:fields }} ``` ::tab blade ```blade -@foreach ($fields as $field) -
- - {!! $field['field'] !!} -
-@endforeach + +
+ + {{ $field['field'] }} +
+
``` :: @@ -322,31 +325,30 @@ If you have defined multiple sections in your form's blueprint, you can loop ove {{ sections }}
{{ display }} - {{ fields }} + {{ form:fields }} ... - {{ /fields }} + {{ /form:fields }}
{{ /sections }} - + {{ /form:contact }} ``` ::tab blade ```blade - @foreach($sections as $section) -
- {{ $section['display'] }} - - @foreach ($section['fields'] as $field) - ... - @endforeach -
- @endforeach + @foreach($sections as $section) +
+ {{ $section['display'] }} + + ... + +
+ @endforeach - +
``` @@ -361,7 +363,7 @@ Each item in the `sections` array contains the following data configurable in th | `fields` | array | An array of [fields](#dynamically-rendering-fields) defined within that section | -## Conditional Fields 🆕 +## Conditional Fields You may conditionally show and hide fields by utilizing the [conditional fields](/conditional-fields#overview) settings in your form's blueprint editor. Once configured, by including the necessary front-end scripts and enabling JavaScript on the `form:create` tag, all of the conditional logic will Just Work™. @@ -392,10 +394,8 @@ The next step is to enable the Alpine JS driver via the `js="alpine"` parameter. ``` ::tab blade ```blade - - ... + + ... ``` :: @@ -410,7 +410,7 @@ Finally, you will need to wire up the fields. With Alpine, this is done using `x ::tab antlers ```antlers -