Form:Create Tag

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 }}
          {{ if validate | contains:required }}
            <sup class="text-red">*</sup>
          {{ /if }}
        </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.

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

Variables