<p>Broadly speaking, any Form plugin that implements Forms using Elements can probably be used headlessly using Craft's <a href="https://plugins.craftcms.com/element-api" rel="nofollow noreferrer">Element API</a> plugin.</p>

<p>I'll give an example using the <a href="https://plugins.craftcms.com/sprout-forms" rel="nofollow noreferrer">Sprout Forms</a> plugin.</p>

<ol>
<li>Install the Element API plugin</li>
<li>Add a <code>config/element-api.php</code> file to your project's config folder</li>
<li>Build your API</li>
</ol>

<p>The following example creates two endpoints. </p>

<p>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 <code>field</code> data and the field <code>folder</code> name which can be used as a unique identifier when determining which field template to display on the front-end.</p>

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

<pre class="lang-php prettyprint-override"><code>&lt;?php

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

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

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

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

CC BY-SA 4.0
2020-04-10T12:11:40.217Z
2020-04-10T12:11:40.217Z
Ben Parizek
<p>Anyone know if the Freeform plugin is compatible with Craft's headless state. Or if there are any other form plugins that are?</p>

<plugins><form><plugin-freeform><solspace>
Can the Freeform Plugin be used with headless mode in Craft?
# Can the Freeform Plugin be used with headless mode in Craft?

(Asked by: username_0 on 2020-03-24)

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

**Tags:** plugins, form, plugin-freeform, solspace


---

## 1 answers

### Answer by username_1 on 2020-04-10. Score: 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.

Install the Element API plugin
Add a config/element-api.php file to your project's config folder
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.
 [
        'api/sproutforms/.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//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,
                    ];
                },
            ];
        }
    ]
];


---

