One of the big features of the web that makes it interactive, beyond simply showing static pages, is forms. With them we can enter and submit data somewhere, and get a result such as a logged-in state of a website, sign up for an email list, or some sort of feedback generally.

WordPress, out of the box, doesn’t provide anything for working with forms directly. While it has APIs under the hood for you to handle forms and process them, you have to do a lot of manual work yourself, or lean on a plugin to handle that for you. Examples of popular plugins here are Contact Form 7 or Gravity Forms, which is has a lot to offer, but is a premium paid plugin to take full advantage of what it does.

As for Statamic, forms are baked into the CMS, and can be created with the click of a button via the Control Panel. The only manual work necessary here is the front-end template (Antlers or Blade), and any JavaScript you want to leverage for validation, for example.

Follow along as we take our first look at building a form with Statamic, if you’d rather just site back and relax. Watch it here:

The Form Template

From the docs (linked above), we can see a simple example of what the form markup might look like in Antlers. Note the {{ form:<form-name> }} syntax for the tag pairs. This identifies it as a form, and selects which form using its handle, which in the example below is contact_form.

{{ form:contact_form }}

    // First let's check if this is after a submission, and if so, was it successful.
    // If it was, just show the success message. After all, we don't want them submitting again once they've gotten in touch!
    {{ if success }}
        <div class="bg-green-300 text-white p-2">
            {{ success }}
        </div>
    {{ else }}
        // If we weren't successful, show any errors. If a fresh page load, there's no errors, so do nothing.
        {{ if errors }}
            <div class="bg-red-300 text-white p-2">
                {{ errors }}
                    {{ value }}<br>
                {{ /errors }}
            </div>
        {{ /if }}

        // Loop through and render the form inputs
        {{ 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 }}

        // Add the honeypot field
        <input type="text" class="hidden" name="{{ honeypot ?? 'honeypot' }}">

        // This is just a submit button.
        <button type="submit">Submit</button>
    {{ /if }}

{{ /form:contact_form }}

First, notice that there is no actual <form> HTML tag - the Antlers tag here generates that for us, and fills in the appropriate action attribute so that it posts to the correct place in the back-end.

Next, it is checking for the success and error states; i.e., whether the form has just been submitted successfully, and shows the appropriate message. Otherwise, it will show the form fields.

Third, the {{ fields }} tag pair loops over all of the fields, and outputs the default field markup with the {{ field }} tag. You can also edit the template for this tag if you wish to make it custom. Otherwise, you can hard-code the field markup without using the fields tag pair, ensuring their names match up with the fields configured in the Control Panel.

For now, that’s all you need, and you have a working form! Submissions will save to Statamic, and can be viewed right there in the Control Canel. No need to write any PHP to validate the inputs or save the results - all of that is handled by Statamic for you automagically, based on the validation rules you create in the form Blueprint.

Coming up, we’ll talk about using JavaScript to enhance the front-end, as well as sending emails when forms receive submissions. Stay tuned for more magic!