{"id":20426837,"url":"https://github.com/angell-co/fffields","last_synced_at":"2025-10-07T05:11:35.600Z","repository":{"id":56948293,"uuid":"169388168","full_name":"angell-co/FFFields","owner":"angell-co","description":"Fabulous front-end fields for Craft CMS.","archived":false,"fork":false,"pushed_at":"2019-03-21T16:31:06.000Z","size":1357,"stargazers_count":11,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-15T19:51:48.781Z","etag":null,"topics":["craft-plugin","craft3","craftcms","fields"],"latest_commit_sha":null,"homepage":"https://angell.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angell-co.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-06T10:24:07.000Z","updated_at":"2021-10-06T21:23:08.000Z","dependencies_parsed_at":"2022-08-21T07:20:53.098Z","dependency_job_id":null,"html_url":"https://github.com/angell-co/FFFields","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/angell-co/FFFields","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angell-co%2FFFFields","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angell-co%2FFFFields/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angell-co%2FFFFields/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angell-co%2FFFFields/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angell-co","download_url":"https://codeload.github.com/angell-co/FFFields/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angell-co%2FFFFields/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278722757,"owners_count":26034463,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["craft-plugin","craft3","craftcms","fields"],"created_at":"2024-11-15T07:17:50.965Z","updated_at":"2025-10-07T05:11:35.585Z","avatar_url":"https://github.com/angell-co.png","language":"JavaScript","readme":"# FFFields\n\nFabulous front-end fields for Craft to help you create front-end forms and dashboards.\n\n![Banner](resources/img/banner.png)\n\n---\n\n**Note:** The license fee for this plugin is $59 via the [Craft Plugin Store](https://plugins.craftcms.com/fffields).\n\n\n## Requirements\n\nThis plugin requires Craft CMS 3.1.0 or later.\n\n\n## Installation\n\nTo install the plugin, follow these instructions.\n\n1. Open your terminal and go to your Craft project:\n\n        cd /path/to/project\n\n2. Then tell Composer to load the plugin:\n\n        composer require angellco/fffields\n\n3. In the Control Panel, go to Settings → Plugins and click the “Install” button for FFFields.\n\n\nYou can also install FFFields via the Plugin Store in your Craft control panel, look for the “Plugin store” link in the main navigation and then search “FFFields”.\n\n\n## FFFields Overview\n\nFFFields gives you a complete toolkit to create fabulous front-end forms and dashboards. You can hook up your fields to Craft via the [CraftQL plugin](https://plugins.craftcms.com/craftql) or roll your own solution.\n\nThis plugin makes use of [Vue.js](https://vuejs.org/) and [Tailwind CSS](https://tailwindcss.com), but you don’t need to know either to use it.\n\nHere is an example form that allows users to submit job postings:\n\n![Example job form](resources/img/example-job-form.png)\n\nFFFields uses the fields you have already defined in Craft and handles the validation requirements you have set too.\n\n### Currently supported field types\n\n- Plain Text\n- URL\n- Email\n- Lightswitch\n- Number\n- Dropdown\n- Radio Buttons\n- Multi Select\n- Checkboxes\n\n\n## Configuring FFFields\n\nThere is no configuration to get FFFields working on its own, but if you want to tie in with CraftQL then you need to do a few extra things.\n\n1. Install the CraftQL plugin and setup up your endpoint and a token in the settings page.\n\n2. Next, add the following environment variables to your `.env` file:\n\n        FFF_GQL_ENDPOINT=\"https://my-craft-site.com/api\"\n        FFF_GQL_TOKEN=\"\u003ctoken-from-craftql\u003e\"\n\n3. And finally, make sure to wrap your fields in the `{{ craft.fffields.formStart() }}` and `{{ craft.fffields.formEnd() }}` tags as detailed in the usage section. \n\n\n## Using FFFields\n\nTo get started, output the following tag near the bottom of your page:\n\n```twig\n{{ craft.fffields.includeAssets() }}\n``` \n\nThis will include the various CSS and JS that is needed to run things.\n\nIf you don’t want to include the CSS, perhaps because you want to make your own Tailwind theme, then you can pass in `false` like so:\n\n```twig\n{{ craft.fffields.includeAssets(false) }}\n```\n\n### Rendering fields\n\nTo render a field use the following method:\n\n```twig\n{{ craft.fffields.renderField('fieldHandle') }}\n``` \n\nThis method accepts a bunch of parameters as follows:\n\n```twig\n{{ craft.fffields.renderField(handle, {\n    value: null,\n    element: null,\n    required: false\n}) }}\n```\n\n1. `handle`: this is required and should be a string\n2. Options:\n    1. `value`: optional, defaults to `null`\n    2. `element`: optional, if used it should be set to a valid Element and will override any `value` also set, defaults to `null` \n    2. `required`: optional, boolean, defaults to `false`\n\n\nThere is also another similar method for outputting special fields such as the `title`:\n\n```twig\n{{ craft.fffields.renderSpecial(handle, {\n    value: null,\n    element: null,\n    required: false\n}) }}\n```\n\nThe `handle` for this method should be one of the following supported list:\n\n- `title` - renders a standard Element Title field\n \n\n\n### Wrapping in a form\n\nIf you plan on using CraftQL to handle the form submissions then you can wrap your fields in the following two tags:\n\n```twig\n{{ craft.fffields.formStart(mutation, {\n    enabled: true,\n    redirect: null,\n    elementId: null,\n    submitText: null,\n    submittingText: null\n}) }}\n\n  {{ craft.fffields.renderField() }}\n  ...\n\n{{ craft.fffields.formEnd() }}\n```\n\nThe parameters for the `formStart()` method can be configured as follows:\n\n1. `mutation`: required. Set this to the GraphQL mutation you want to use, e.g. `upsertJobs`.\n2. Options:\n    1. `enabled`: optional, defaults to `true`. Set this to false if you want to submit a disabled element.\n    2. `redirect`: optional, defualts to `null`. Set this to the path you want the user to be redirected to after a successful submission. Token substituion is supported so `/jobs/edit/{id}` would replace `{id}` with the ID value that is returned after submission. Currently supported tokens are `{id}`, `{slug}` and `{url}`.\n    3. `elementId`: optional, defualts to `null`. Set this to the ID of the element you want to edit.\n    4. `submitText`: optional, defaults to 'Save'. Use this to customise the submit button text.\n    5. `submittingText`: optional, defaults to 'Saving …'. Use this to customise the disabled submit button text that is shown whilst the form data is sent.\n\n\n## FFFields Roadmap\n\n### General\n\n- [x] Release it\n- [ ] Firm up the Vue Form API and document it\n- [ ] Allow class overriding in Twig and Vue\n- [ ] Build out the Vue-only API that fetches field config over XHR\n- [ ] Add the ability generate full views from entry types\n\n\n### Special attributes\n\n- [ ] Enabled / disabled\n- [ ] Slug\n- [ ] Post Date\n- [ ] Expiry Date\n- [ ] Author\n- [ ] Parent\n- [ ] All User attributes\n\n### Field types\n\n- [ ] Matrix\n- [ ] Date/Time\n- [ ] Table\n- [ ] Tags\n- [ ] Entries\n- [ ] Categories\n- [ ] Users\n- [ ] Assets\n- [ ] Color\n- [ ] Redactor\n\n### Support specific forms\n\nThese will need testing once the various special attributes for each form are added and then a full example for each can be documented.\n\n- [ ] Login\n- [ ] User Profile\n- [ ] User Registration\n- [ ] Forgot Password\n- [ ] Set Password\n\n---\n\nBrought to you by [Angell \u0026 Co](https://angell.io)\n\nBig thanks to the following people and projects:\n\n- Mark Huot, author of [CraftQL](https://github.com/markhuot/craftql)\n- The [Vue.js](https://vuejs.org/) project\n- The [Tailwind CSS](https://tailwindcss.com) project","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangell-co%2Ffffields","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangell-co%2Ffffields","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangell-co%2Ffffields/lists"}