Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-04-10T12:11:40.217Z
Answers.LastActivityDate: 2020-04-10T12:11:40.217Z
Answers.UserDisplayName: Ben Parizek
Body: <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>
  
Tags: <plugins><form><plugin-freeform><solspace>
Title: Can the Freeform Plugin be used with headless mode in Craft?
ThreadText: # 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](https://plugins.craftcms.com/element-api) plugin.
  
  I'll give an example using the [Sprout Forms](https://plugins.craftcms.com/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
  <?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,
                      ];
                  },
              ];
          }
      ]
  ];
  
  ```
  
  
  ---
  
  