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 }}

When you need to render a form that’s selected via the Form Fieldtype you can use this pattern:

{{ form:create in="{ form_fieldtype:handle }" }}
    ...
{{ /form:create }}

This way you can let Control Panel users selected which form should be used on an entry.

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
`instructions`	string	User-friendly instructions label

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.