Form:Create Tag

Statamic forms serve to collect, report, and reuse user submitted data. This tag handles the HTML markup, redirect behavior, and success/error states and messages for these forms.

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.

Betterify this page on Github!