Can the Freeform Plugin be used with headless mode in Craft?

Question

Anyone know if the Freeform plugin is compatible with Craft's headless state. Or if there are any other form plugins that are?

Answer 1

Broadly speaking, any Form plugin that implements Forms using Elements can probably be used headlessly using Craft's Element API plugin.

I'll give an example using the Sprout Forms plugin.

1. Install the Element API plugin
2. Add a config/element-api.php file to your project's config folder
3. Build your API

The following example creates two endpoints.

The first returns a Form Element that can be used by your front-end framework to output the form. You can use the Default Form Templates as an example of how the HTML needs to be built for submission and remember to submit the form using a CSRF token. This example returns the field data and the field folder name which can be used as a unique identifier when determining which field template to display on the front-end.

The second returns a list of unread Form Entry Elements. You can customize the query however you'd like, just like any Element Query.

<?php

use barrelstrength\sproutforms\elements\Form;
use barrelstrength\sproutforms\elements\Entry;

return [
    'endpoints' => [
        'api/sproutforms/<formId:\d+>.json' => function($formId) {
            return [
                'elementType' => Form::class,
                'criteria' => ['id' => $formId],
                'one' => true,
                'transformer' => function(Form $form) {
                    foreach ($form->getFieldLayout()->getTabs() as $tab) {
                        foreach ($tab->getFields() as $field) {
                            $fields[] = [
                                'field' => $field,
                                'folder' => $field->getFieldInputFolder()
                            ];
                        }

                        $tabs[] = [
                            'title' => $tab->name,
                            'fields' => $fields
                        ];
                    }

                    return [
                        'handle' => $form->handle,
                        'tabs' => $tabs
                    ];
                },
            ];
        },
        'api/sproutforms/<formId:\d+>/entries.json' => function($formId) {
            return [
                'elementType' => Entry::class,
                'criteria' => [
                    'formId' => $formId,
                    'status' => 'unread'
                ],
                'paginate' => true,
                'transformer' => function(Entry $entry) {
                    return [
                        'id' => $entry->id,
                        'dateCreated' => $entry->dateCreated,
                        'title' => $entry->title,
                        'customField' => $entry->customField,
                    ];
                },
            ];
        }
    ]
];