Overview
Here we’ll be creating a form to submit an entry in a contact
form.
{{ form:create in="contact" }}
{{ if errors }}
<div class="bg-red-300 text-white p-2">
{{ errors }}
{{ value }}<br>
{{ /errors }}
</div>
{{ /if }}
{{ if success }}
<div class="bg-green-300 text-white p-2">
{{ success }}
</div>
{{ /if }}
<label>Email</label>
<input type="text" name="email" value="{{ old:email }}" />
<label>Message</label>
<textarea name="message" rows="5">{{ old:message }}</textarea>
<button>Submit</button>
{{ /form:create }}
You can also use the shorthand syntax for form:create in="contact"
.
{{ form:contact }}
...
{{ /form:contact }}
Dynamic Rendering
Instead of hardcoding individual fields, you may loop through the fields
array to render fields in a dynamic fashion.
{{ fields }}
<div class="p-2">
<label>{{ display }}</label>
<div class="p-1">{{ field }}</div>
{{ if error }}
<p class="text-gray-500">{{ error }}</p>
{{ /if }}
</div>
{{ /fields }}
Each item in the fields
array contains the following data configurable in the form’s blueprint.
Variable | Type | Description |
---|---|---|
handle |
string | System name for the field |
display |
string | User-friendly field label |
type |
string | Name of the fieldtype |
field |
string | Pre-rendered HTML based on the fieldtype |
error |
string | Error message from an unsuccessful submission |
old |
array | Contains user input from an unsuccessful submission |
Pre-rendered HTML
Using the field
variable will intelligently render inputs as inputs, textareas as textareas, and snozzberries as snozzberries.
You can customize these pre-rendered snippets by running php artisan vendor:publish --tag=statamic-forms
. It will expose editable templates snippets in your views/vendor/statamic/forms/fields
directory that will be used by each fieldtype.
This approach, combined with the blueprint editor, will give you something very similar to a traditional “Form Builder” from other platforms.
Example
{{ form:contact }}
{{ fields }}
<div class="mb-2">
<label class="block">{{ display }}</label>
{{ field }}
</div>
{{ /fields }}
{{ /form:contact }}
<form method="POST" action="https://website.example/!/forms/contact">
<input type="hidden" name="_token" value="cN03woeRj5Q0GtlOj7GydsZcRwlyp9VLzfpwDFJZ">
<div class="mb-2">
<label class="block">Name</label>
<input type="text" name="name" value="">
</div>
<div class="mb-2">
<label class="block">Email Address</label>
<input type="text" name="email" value="">
</div>
<div class="mb-2">
<label class="block">Note</label>
<textarea name="message"></textarea>
</div>
</form>
Parameters
handle|is|in|form|formset string
Specify the name of the form. Only required if you do not use the form:set
tag, or don't have a form
defined in the current context.
redirect string
The location your user will be taken after a successful form submission. If left blank, the user will stay on the same page.
error_redirect string
The location your user will be taken after a failed form submission. If left blank, the user will stay on the same page.
allow_request_redirect boolean
When true
, the redirect
and error_redirect
parameters will get overridden by redirect
and error_redirect
query parameters in the URL. For example, ?redirect=/thanks
HTML Attributes
Set HTML attributes as if you were on an HTML element. For example, class="required" id="contact-form"
.
Variables
Variable | Type | Description |
---|---|---|
fields |
array |
An array of available fields for dynamic rendering. |
errors |
array |
An indexed array of any validation errors upon submission. For example: |
error |
array |
An array of validation errors indexed by field name. For example: |
old |
array |
An array of submitted values from the previous request. Used for re-populating fields if there are validation errors. |
success |
string |
A success message, usually used in a condition to check of a form submission was successful. |
submission_created |
boolean |
A success boolean, which differs from |