https://github.com/isuke01/gravityform-nuxt-isu
This is simple implementation for base elements for the Gravity form and Nuxt2, but it should work also with
https://github.com/isuke01/gravityform-nuxt-isu
Last synced: 3 months ago
JSON representation
This is simple implementation for base elements for the Gravity form and Nuxt2, but it should work also with
- Host: GitHub
- URL: https://github.com/isuke01/gravityform-nuxt-isu
- Owner: isuke01
- Created: 2022-05-18T10:42:41.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-20T19:11:32.000Z (over 3 years ago)
- Last Synced: 2025-01-21T15:30:49.371Z (over 1 year ago)
- Language: Vue
- Size: 166 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NUXT/Vue2 Gravity Form component
#### Tested with Gravity form 2.6.3 and WP 5.9.3
This is just example of usage the component.
This is simple implementation for base elements for the Gravity form and Nuxt2, but it should work also with VUE2.
### IMPORTANT
Inspired by: https://bitbucket.org/gohike/gravity-forms/src/master/
To make this work we have to add extra endpoint to get GF.
And enable Rest API for GF in Gravity form settings
```php
class Headless_GravityForms
{
public $rest_base = 'gf/forms';
public function __construct($namespace)
{
/**
* @api {get} /glamrock/v1/gf/forms/1
* @apiName GetForm
* @apiGroup GravityForms
* @apiDescription Retreive a single form
* @apiParam {Number} form_id ID of the form
*
* @apiSuccess {Object[]} GF_Form Object (excluding notifications)
*/
register_rest_route($namespace, $this->rest_base . '/(?P[\d]+)', [
[
'methods' => WP_REST_Server::READABLE,
'callback' => [$this, 'get_form'],
'args' => [
'context' => [
'default' => 'view',
],
],
],
]);
}
/**
* Retreive a single form and all fields and options (exluding notifications)
* @param WP_REST_Request $request
* @return WP_Error|WP_REST_Response
*/
public function get_form(WP_REST_Request $request)
{
$form_id = $request['form_id'];
$form = GFAPI::get_form($form_id);
if ($form) {
// Strip data we do not want to share
unset($form['notifications']);
$form['max_upload_size'] = wp_max_upload_size();
return new WP_REST_Response($form, 200);
} else {
return new WP_Error('not_found', 'Form not found', ['status' => 404]);
}
}
}
/**
* Register custom API routes
*/
add_action('rest_api_init', function () {
$api_namespace = 'glamrock/v1';
new Headless_GravityForms($api_namespace);
});
```
## TO DO:
FIX LABEL FOR !!!
Nested inputes (?)
Paginated paged form
Add support for hidden labels
Add support for dynamic populated values
Add support for datepickers
Add support to HTML dynamic fields
Add support for condition logic fields
Form settings for label placement
Number fields enable calculation (? whatever it is for GF)
Require mark based on Form settings
Numbers: Format number
Make label as Component
Checkboxes select all option
Better validations
Rewrite to standard vue 2 (?)
Rewrite to Vue 3 (?)
Rewrite to NPM package (?)
Create better logic functions with mixins
Create i18n support
TODO: Implement number min/max, these currently aren't fetch by the source plugin
https://docs.gravityforms.com/field-object/#number
Please enter a number from 1 to 15.
# USAGE
Example usage:
```js
```
Props:
`gformID` ID of the Gravity form
`apiUrl` Url for our WP e.g https://headless.mypage.com or https://headless.mypage.com/{sitename} in case of multisite usage and pointing one (my case :) ).
`useDebug` Just for debugging purpose
`theme` Just calss for the form. Default: `gravity-theme`
Callbacks:
`onFormSubmit` It triggered after form submission, it returns api response after submission or false in case of failure
`onFormLoad` It triggers after form loads, it returns response from the api or false in case of failure
Example usage with custom component button:
```js
![]()
```
Tip:
`slotProps` are props passed by slot to the template, and we bind them into our custom `Button` in the example case. More: https://v2.vuejs.org/v2/guide/components-slots.html#Scoped-Slots
### Custom submit button
Custom submit button can be set using scoped slot named `submitButton`
Example usage with custom component button:
```html
Slot button test?
```
The `slotProps` also contain all buttons settngs from the gravity form, accessably by `slotProps.formButton` inside the element.
### Multifile
- Graivty form api v2 does not support multi select file, please go to https://www.gravityforms.com/gravity-forms-roadmap/ and add feature request so i can be implemented.
- The issue: https://community.gravityforms.com/t/rest-api-multi-file-upload/11697
- As for now We are using work around - merge multiple file fields. Add class to the each file field `multifile` to display them as one multi select on the front.
- Max Files count will be dettermined by file fields count with this class, min files count will be dettermined by count of those fields that are set as required.
- Custom vladiation message will be used from first file, also every other settings like extensions and file size. But just in case mirrow those settings for API validation side, which I can't do anything bout tih.
- Field title and description is also taken from the first one
## Road map
## Form sizing and placing
- Done. This allow to use ling,short, next to each other etc form build from Gravity form. This will work only with default theme class.
## GForm.vue
- Re write a bit for smaller components - better logic
## Honey pot
## Required label from GF setting
### Base input
[🗸] text
[🗸] number
[🗸] email
[🗸] hidden
[?] phone
[?] date (?)
### Select input
[🗸] Done
### Textarea
[🗸] base textarea field
### Multi select
- multiselect
Make multiselect nice, not default
### Selectors
[🗸] Radio
[🗸] Checkbox
### HTML
### FILE
- Single file supload -> make it nice drop area
- Multi select file -> FOR NOW DOES NOT SUPPORTED BY GRAVITY FORM
### Name (special field GF )
### Captcha
### LICENSE
OpenSource.
Take it and do whatever with it, Would be nice if you point me out somewhere if I'm inspired/helped you in any means :)