Skip to content

Commit f3596ac

Browse files
iruzeviciruzevic
authored
Merge pull request #279 from infinum/feature/docs-additonal
updating docs
2 parents b169a51 + dbc9de7 commit f3596ac

26 files changed

+269
-21
lines changed

‎website/forms/basics.mdx

Lines changed: 121 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,125 @@ title: Basics
55

66
import { Video } from './../src/docs/videos';
77

8-
*Content coming soon...*
8+
## How to use it?
9+
10+
Eighshift Forms is a WordPress plugin that allows you to create forms in a visual way. It is based on the [Gutenberg editor](https://wordpress.org/gutenberg/).
11+
At this time, the plugin is not a part of the WordPress repository, so it needs to be installed manually.
12+
13+
To install it you should:
14+
1. Open the Eightshift Forms [GitHub repository](https://github.com/infinum/eightshift-forms/releases) and find the latest release.
15+
2. In the latest release details, under _Assets_, find the `release.zip` file and download it to you project folder.
16+
3. After you unzip it it will be available in you WordPress admin under _Plugins_ section.
17+
4. Activate the plugin
18+
19+
![GitHub screen](/img/forms/releases.webp)
20+
21+
## Terminogy
22+
23+
We will use some terms in this documentation that you should be familiar with.
24+
* **Form** - a collection of fields that used to collect data from the user
25+
* **Field** - single data input element
26+
* **Form listing** - list of all created forms
27+
* **Locations** - list of places a form is used on the website
28+
* **Edit form** - allows editing a form
29+
* **Trashed forms** - list of forms that are marked as deleted (but not yet deleted permanently)
30+
* **Form settings** - settings for a specific form
31+
* **Global settings** - settings shared between all forms
32+
* **Admin bar** - a collection of buttons and indicators displayed on the top of the admin area
33+
* **Form quick menu bar** - menu with shortcut buttons for easy access to functions like editing the form or changing its settings, shown only when logged in
34+
* **Form picker block** - block that allows selecting a form that will be displayed on the frontend
35+
36+
## Forms listing
37+
38+
This page lists all created forms, which can be used in pages, posts, etc.
39+
Also, it contains multiple useful features to help manage the forms.
40+
41+
* Form type filter - filter your listing page by the form type
42+
* Delete - delete one or more forms
43+
* Sync - sync one or more forms with the external integration and update the form fields
44+
* Duplicate - duplicate one or more forms
45+
* Trashed - see all the trashed forms
46+
* Create - add a form
47+
* Locations - see all the locations where a form is displayed
48+
* Setting - edit the form settings
49+
* Edit form - edit the form
50+
* Warnings - see all the warnings related to the form
51+
* Multi-language - see all the languages that are used on the form (if you using a multi-language plugin)
52+
53+
![Forms listing screen](/img/forms/listing.webp)
54+
55+
### Locations
56+
57+
Shows a list of all the places on the website that a selected form is used.
58+
59+
More details are available [here](features/locations).
60+
61+
![Listing screen](/img/forms/locations-listing.webp)
62+
63+
### Edit form
64+
65+
Opens a Gutenberg editor where you can modify and configure the form fields within a form.
66+
67+
More details are available [here](first-form).
68+
69+
![Edit screen](/img/forms/editor.webp)
70+
71+
### Trashed forms
72+
73+
Trashed forms screen shows a list of forms that are marked as deleted.
74+
A form that is marked as deleted will not be shown in the frontend, nor in the list of forms in the Form picker.
75+
76+
In the list of trashed forms, a form can be either restored or permanently deleted by clicking on the respective button.
77+
78+
Please note that the "Permanently delete" action is not reversible!
79+
80+
![Trashed screen](/img/forms/trashed.webp)
81+
82+
## Form settings
83+
84+
Every form has a settings page where its behaviour can be defined. The changes here will not affect other forms.
85+
86+
Access it by clicking on `Settings` in the form listing page.
87+
88+
![Settings screen](/img/forms/settings.webp)
89+
90+
## Global settings
91+
92+
Global settings define settings that are shared between all forms. Access it by clicking on `Global settings` in the main WordPress sidebar.
93+
94+
Note that in some cases specific form settings can override global settings, e.g. validation messages.
95+
96+
![Global settings screen](/img/forms/global-settings.webp)
97+
98+
### Dashboard
99+
100+
The dashboards gives you an overview of the currently active features and enables activating and deactivating of them.
101+
102+
More details can be found [here](features/dashboard).
103+
104+
![Dashboard screen](/img/forms/dashboard.webp)
105+
106+
## Admin bar
107+
108+
Admin bar is a toolbar displayed on the top of the WordPress admin interface. It is shown only when logged in.
109+
110+
It contains various WordPress functionalities, as well as an _Eightshift forms_ menu, which contains shortcuts to the list of forms, current form settings, global settings, troubleshooting tools, etc.
111+
112+
![Admin bar](/img/forms/admin-top-bar.webp)
113+
114+
## Form quick menu bar
115+
116+
The quick menu bar allows easy access to form editing and form settings.
117+
It is shown besides a form, in the frontend view, only when logged in.
118+
119+
![Quick menu screen](/img/forms/quick-bar.webp)
120+
121+
## Form picker block
122+
123+
The `Form picker` block allows choosing a form that will be shown on the frontend. It is available in the Gutenberg editor, under the `Eighshift Forms` category.
124+
125+
![Form picker screen](/img/forms/form-picker.webp)
126+
127+
128+
<Video type='forms' video='basics' />
9129

10-
<Video type='forms' video='intro'/>
11-
<Video type='forms' video='basics' useTitle={false} />
12-
<Video type='forms' video='firstForm' useTitle={false} />

‎website/forms/features/dashboard.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
id: dashboard
3+
title: Dashboard
4+
---
5+
6+
The dashboards gives you an overview of the currently active features and enables activating and deactivating of them.
7+
8+
More details can be found [here](features/dashboard).
9+
10+
![Dashboard screen](/img/forms/dashboard.webp)

‎website/forms/features/locations.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@ In form settings under the `locations` tab, you can see the same information as
2121

2222
You can also find the form location in the top bar of the WordPress admin.
2323

24-
![Top bar screen](/img/forms/topbar.webp)
24+
![Admin bar screen](/img/forms/admin-top-bar.webp)

‎website/forms/features/wpml.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
id: wpml
3+
title: WPML
4+
---
5+
6+
WPML is plugin that allows multi-lingual functionality for the website, allowing features like post and media translations. Eightshift Forms is fully compatible with WPML, and allows adding language variants (_translations_) to forms.
7+
8+
![WPML screen](/img/forms/wpml.webp)
9+
10+
## How to use
11+
12+
If using WPML, enable the _WPML_ feature in form settings. This will ensure the forms is displayed correctly in the form listing page, and that all the multi-language features work.
13+
14+
## Features affected by WPML
15+
16+
WPML affects the following features:
17+
18+
### Forms listing
19+
20+
By default, we use `get_locale()`to retrieve the default language of the project. Once WPML is activated, a new language tag is assigned to each setting, and the forms display only in the language they're assigned to.
21+
22+
### Forms selector
23+
24+
When selecting forms in the Forms picker, only the forms in the current editing language are visible.
25+
26+
### Forms settings
27+
28+
Forms settings are unique for each language variant of the form.
29+
30+
### Global settings
31+
32+
Global settings, similar to form settings, are unique for each language variation, with the exception of API keys, tokens, etc.

‎website/forms/first-form.mdx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
id: first-form
3+
title: Your first form
4+
---
5+
6+
import { Video } from './../src/docs/videos';
7+
8+
Adding your first form and displaying it on the frontend is simple:
9+
1. Enable the form type you want to use in the Eightshift forms Dashboard
10+
2. Create a form in the WordPress admin
11+
3. Configure the form and add the fields needed
12+
4. Add the _Form picker_ block in the place you want to show the form, and select your newly created form
13+
14+
## Integrations
15+
By default none of the integrations are enabled.
16+
17+
To enable one, go to the _Dashboard_ page of the Eightshift Forms admin settings.
18+
19+
More details can be found [here](features/dashboard).
20+
21+
![Dashboard screen](/img/forms/dashboard.webp)
22+
23+
## Create a form
24+
25+
To create a form, open the WordPress admin, find _Eightshift Forms_ in the sidebar, then click on _Add new form_.
26+
27+
An editing screen will open, with a selector for the form type. If you don't see a form type in the selector, make sure it's enabled in the Dashboard.
28+
29+
After clicking the form type, the Form block will be automatically added, the form initialized, and some fields may be added by default.
30+
31+
![Form Type Picker screen](/img/forms/form-type-picker.webp)
32+
33+
To change form settings, clicking on `Edit settings` in the options sidebar.
34+
35+
![Forms Sidebar screen](/img/forms/forms-sidebar.webp)
36+
37+
## Add the form to the page/post/custom post type
38+
39+
To display the form, add the _Form_ block and select a form to display.
40+
41+
![Form picker screen](/img/forms/form-picker.webp)
42+
43+
More settings can be found in options sidebar.
44+
45+
![Form Sidebar screen](/img/forms/form-sidebar.webp)
46+
47+
<Video type='forms' video='firstForm' useTitle={false} />

‎website/forms/integrations/pipedrive.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
id: jira
3+
title: Jira
4+
---
5+
6+
*Coming soon...*

‎website/forms/php/filters/integrations/jira.md

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,4 @@ id: jira
33
title: Jira
44
---
55

6-
This filter provides you the ability to change how we map Clearbit fields so you can combine multiple fields in one add some new one.
7-
8-
```php
9-
add_filter('es_forms_integrations_clearbit_map', function(array $params): array {
10-
$street = $params['company-street-number'] ?? '';
11-
$city = $params['company-city'] ?? '';
12-
$postalCode = $params['company-postal-code'] ?? '';
13-
14-
$params['company-location-combined'] = "{$street} {$city} {$postalCode}";
15-
16-
return $params;
17-
});
18-
19-
6+
*Coming soon...*

‎website/forms/php/filters/integrations/pipedrive.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
id: pipedrive
3+
title: Pipedrive
4+
---
5+
6+
*Coming soon...*

‎website/forms/php/helpers.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ title: Helpers
55

66
Eightshift Forms offers static helpers that can be implemented in your project. The key difference between these helpers and filters is that you can use the former in your theme or plugin code regardless of the load cycle.
77

8+
All helpers can be found [here](https://github.com/infinum/eightshift-forms/blob/develop/src/Helpers/esForms.php).
9+
810
### esFormsGetFormIdByName
911

1012
This function retrieves the custom, unique name of a form, as set in the Form settings, from the provided form ID. It's useful when applying specific settings to one or more forms using filters in your project.
@@ -58,3 +60,15 @@ if (\function_exists('esFormsGetComponentsRender')) {
5860
$render = esFormsGetComponentsRender('<component>', '[<attributes>]');
5961
}
6062
```
63+
64+
### esFormRenderForm
65+
66+
If you want to output a form in a custom template or block, you can use this helper to do so.
67+
68+
Please note that not all functionalities are available, and certain options might not be available.
69+
70+
```php
71+
if (\function_exists('esFormRenderForm')) {
72+
echo esFormRenderForm('<formId>', '[<attributes>]');
73+
}
74+
```

‎website/forms/welcome.md renamed to ‎website/forms/welcome.mdx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ id: welcome
33
title: Welcome
44
---
55

6+
import { Video } from './../src/docs/videos';
7+
68
Welcome to the Eightshift Forms documentation! This powerful and versatile WordPress project is designed to revolutionize the way you handle forms in your web development projects.
79

810
Eightshift Forms were crafted to streamline the process of creating and managing forms for your websites or web applications. Whether you're building a simple contact form or a complex multi-step survey, this package offers the flexibility and tools you need to achieve your goals with ease.
@@ -32,3 +34,5 @@ Here's a glimpse of what Eightshift Forms brings to the table:
3234
- Security and performance: Uses nonce verification, sanitization and escaping to ensure your forms are secure. It also uses AJAX to submit forms without reloading the page, improving user experience and speed.
3335

3436
Whether you're a seasoned developer seeking to optimize your form-building process or a beginner looking for a reliable and feature-rich solution, Eightshift Forms has something to offer for everyone.
37+
38+
<Video type='forms' video='intro' useTitle={false} />

0 commit comments

Comments
 (0)