Form:Create // Statamic 3 Docs

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: `{{ errors }}{{ value }}{{ /errors }}`
error	`array`	An array of validation errors indexed by field name. For example: `{{ error:email }}`
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. `{{ if success }} Hurray! {{ /if }}`
submission_created	`boolean`	A success boolean, which differs from `success` in that it will actually return falsey when the honeypot is filled. This can be useful when you want to show a fake success message for honeypot spam, but want to prevent analytics tracking code from being rendered.