updating docs

website/forms/basics.mdx

@@ -5,8 +5,117 @@ title: Basics
 
 import { Video } from './../src/docs/videos';
 
-*Content coming soon...*
+## How to use it?
+
+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/).
+At this point this plugin is still not a part of the WordPress repository, so you will need to install it manually.
+
+To install it you should:
+1. Open our GitHub repository [Eighshift Forms](https://github.com/infinum/eightshift-forms/releases) and find the latest release.
+2. Under the assets find the `release.zip` and download it to you project folder.
+3. Ufter you unzip it it will be available in you WordPress admin under the `plugins` section.
+4. Activeate the plugin and you are ready to go.
+
+![GitHub screen](/img/forms/releases.webp)
+
+## Terminogy
+
+We will use some terms in this documentation that you should be familiar with.
+* **Form** - A form is a collection of fields that are used to collect data from the user.
+* **Field** - A field is a single input element that is used to collect data from the user.
+* **Form listing**  - Admin listing page where you can see all the forms that are created.
+* **Locations** - Locations are used to define where the form will be displayed on the frontend.
+* **Edit form** - Edit form is a page where you can edit a single form.
+* **Trashed forms** - Trashed forms are forms that are deleted but not permanently deleted.
+* **Form settings** - Settings that are used to define one form behaviour.
+* **Global settings** - Settings that are used to define all forms behaviour.
+* **Admin top bar** - Admin top bar is a bar that is displayed on the top of the page when you are editing a form.
+* **Form quick menu bar** - Form quick menu bar is a bar that is displayed on the rigth of your form on the frontend when you are logged in.
+* **Form picker block** - Form picker block is a block that is used to select a form on the frontend.
+
+## Forms listing
+
+On form listing page you can see all the forms that are created and that you can use on your `pages`, `post` and etc.
+On listing page you can find multiple features that will help you to manage your forms.
+
+* Form type filter - you can filter your listing page by the form type.
+* Delete - you can delete a form or multiple forms.
+* Sync - You can sync your forms with the external integration and update the form fields.
+* Duplicate - You can duplcate one or multiple forms.
+* Trashed - You can see all the trashed forms.
+* Create - You can add a new form.
+* Locations - You can see all the locations where the form is displayed.
+* Setting - You can edit the form settings.
+* Edit form - You can edit the form.
+* Warnings - You can see all the warnings that are related to the form.
+* Multilanguage - You can see all the languages that are used on the form if you are using multiple language plugin.
+
+![Forms listing screen](/img/forms/listing.webp)
+
+### Locations
+
+Details about forms locations can be found [here](features/locations).
+
+![Listing screen](/img/forms/locations-listing.webp)
+
+### Edit form
+
+This is a page where you can edit a single form. You can find more details about it [here](first-form).
+
+![Edit screen](/img/forms/editor.webp)
+
+### Trashed forms
+
+Trashed forms are forms that are deleted but not permanently deleted. You can find them on the form listing page under the `Trashed` tab.
+When you permanently delete a form it will be removed from the trashed forms and you will not longer be able to restore it.
+
+All trashed forms will not show on the frontend and you will not be able to select it on forms picker.
+
+![Trashed screen](/img/forms/trashed.webp)
+
+## Form settings
+
+Every form has its individal setting page where you can define the form behaviour.
+This setting is only for the current form and it will not affect other forms.
+You can find them under `Settings` tab on the form listing page.
+
+![Settings screen](/img/forms/settings.webp)
+
+## Global settings
+
+Global settings are settings that are used to define all forms behaviour.
+You can find them under the `Global Settings` page.
+
+![Global settings screen](/img/forms/global-settings.webp)
+
+### Dashboard
+
+On the global settings you will find a dashboard that will help you to manage your forms features.
+More details can be found [here](features/dashboard).
+
+![Dashboard screen](/img/forms/dashboard.webp)
+
+## Admin top bar
+
+Admin top bar is a bar that is displayed on the top of the page when you are logged in to the WordPress admin.
+
+You can find all you forms, settings, global settings, some troubleshooting tools and etc. on this bar.
+
+![Admin top bar screen](/img/forms/admin-top-bar.webp)
+
+## Form quick menu bar
+
+Form quick menu bar is used to quickly edit the form, settings or global settings on the frontend when you are logged in to the WordPress admin.
+It will be displayed on the right side of the form.
+
+![Quick menu screen](/img/forms/quick-bar.webp)
+
+## Form picker block
+
+Form picker block is a block that is used to select a form on the frontend. It is available in the Gutenberg editor under the `Eighshift Forms` category.
+
+![Form picker screen](/img/forms/form-picker.webp)
+
+
+<Video type='forms' video='basics' />
 
-<Video type='forms' video='intro'/>
-<Video type='forms' video='basics' useTitle={false} />
-<Video type='forms' video='firstForm' useTitle={false} />

website/forms/features/dashboard.md

@@ -0,0 +1,9 @@
+---
+id: dashboard
+title: Dashboard
+---
+
+On the global settings you will find a dashboard that will help you to manage your forms features.
+More details canm be found [here](features/dashboard).
+
+![Dashboard screen](/img/forms/dashboard.webp)

website/forms/features/locations.md

@@ -21,4 +21,4 @@ In form settings under the `locations` tab, you can see the same information as
 
 You can also find the form location in the top bar of the WordPress admin.
 
-![Top bar screen](/img/forms/topbar.webp)
+![Admin top bar screen](/img/forms/admin-top-bar.webp)

website/forms/features/wpml.md

@@ -0,0 +1,32 @@
+---
+id: wpml
+title: WPML
+---
+
+WPML is a language plugin that allows you to translate your website into multiple languages. It is compatible with Eightshift Forms and can be used to translate your forms.
+
+![WPML screen](/img/forms/wpml.webp)
+
+## How to use
+
+If you are using this plugin you should turn on this feature in the Eightshift Forms settings page. This will allow your forms to correctly display forms in the listing and form selection depending on the language you are using.
+
+## Features affected by WPML
+
+WPML affects the following features:
+
+### Forms listing
+
+By default, we use the `get_locale()` function to retrieve the default language of your project. Once the WPML plugin is activated, we assign a new language tag to each setting and display forms only in the specific language.
+
+### Forms selector
+
+When selecting forms in your forms picker, you will only see forms available in your language.
+
+### Forms settings
+
+We will make each forms settings language specific.
+
+### Global settings
+
+Global settings will be language specific, except for API keys, tokens and etc.

website/forms/first-form.mdx

@@ -0,0 +1,42 @@
+---
+id: first-form
+title: Your First Form
+---
+
+import { Video } from './../src/docs/videos';
+
+To add your first form and disply it to the frontend users you need to:
+1. Allow form type you want to use in the global setting dashboard.
+2. Create a form in the admin panel.
+3. Configure the forms settings.
+4. Add the form to the page/post/custom post type.
+
+## Allow form type
+
+By default no form type is allowed. You need to go to the global settings dashboard and allow the form type you want to use.
+More details can be found [here](features/dashboard).
+
+![Dashboard screen](/img/forms/dashboard.webp)
+
+## Create a form
+
+To create a form you need to go to the admin panel and click on the `Forms` menu item. Then click on the `Add New` button.
+On the edit page you need to select form type you would like to use. Depending on the form type you will see different fields and settings.
+
+![Form Type Picker screen](/img/forms/form-type-picker.webp)
+
+To configure form settings you need to click on the `Settings` tab in the block sidebar.
+
+![Forms Sidebar screen](/img/forms/forms-sidebar.webp)
+
+## Add the form to the page/post/custom post type
+
+To add the form to the frontend you need to add created form on your page/post/custom post types and use `forms block` to select the form you want to display.
+
+![Form picker screen](/img/forms/form-picker.webp)
+
+To configure additional form setting you can use `forms block` sidebar.
+
+![Form Sidebar screen](/img/forms/form-sidebar.webp)
+
+<Video type='forms' video='firstForm' useTitle={false} />

website/forms/integrations/pipedrive.md

@@ -0,0 +1,6 @@
+---
+id: jira
+title: Jira
+---
+
+*Coming soon...*

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

@@ -3,17 +3,4 @@ id: jira
 title: Jira
 ---
 
-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.
-
-```php
-add_filter('es_forms_integrations_clearbit_map', function(array $params): array {
-	$street = $params['company-street-number'] ?? '';
-	$city = $params['company-city'] ?? '';
-	$postalCode = $params['company-postal-code'] ?? '';
-
-	$params['company-location-combined'] = "{$street} {$city} {$postalCode}";
-
-	return $params;
-});
-
-
+*Coming soon...*

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

@@ -0,0 +1,6 @@
+---
+id: pipedrive
+title: Pipedrive
+---
+
+*Coming soon...*

website/forms/php/helpers.md

@@ -5,6 +5,8 @@ title: Helpers
 
 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.
 
+You can find all helpers on this [link](https://github.com/infinum/eightshift-forms/blob/develop/src/Helpers/esForms.php).
+
 ### esFormsGetFormIdByName
 
 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,13 @@ if (\function_exists('esFormsGetComponentsRender')) {
   $render = esFormsGetComponentsRender('<component>', '[<attributes>]');
 }
 ```
+
+### esFormRenderForm
+
+If you want to output a form in a custom template or block, you can use this helper to do so. However, it is important to note that this helper has limitations and doesn't provide all the functionality that a block editor does.
+
+```php
+if (\function_exists('esFormRenderForm')) {
+  echo esFormRenderForm('<formId>', '[<attributes>]');
+}
+```

website/forms/welcome.md → website/forms/welcome.mdx

@@ -3,6 +3,8 @@ id: welcome
 title: Welcome
 ---
 
+import { Video } from './../src/docs/videos';
+
 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.
 
 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:
 - 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.
 
 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.
+
+<Video type='forms' video='intro' useTitle={false} />

website/sidebars-forms.js

@@ -3,11 +3,13 @@ module.exports = {
 		'Getting Started': [
 			'welcome',
 			'basics',
+			'first-form',
 			{
 				'type': 'category',
 				'label': 'Features',
 				'items': [
 					[
+						'features/dashboard',
 						'features/conditional-tags',
 						'features/enrichment',
 						'features/geolocation',
@@ -26,6 +28,7 @@ module.exports = {
 						'features/migrations',
 						'features/cloudflare',
 						'features/country-list',
+						'features/wpml',
 					],
 				],
 			},
@@ -46,6 +49,7 @@ module.exports = {
 					'integrations/mailerlite',
 					'integrations/moments',
 					'integrations/workable',
+					'integrations/pipedrive',
 				],
 			},
 		],
@@ -77,6 +81,7 @@ module.exports = {
 									'php/global-variables/integrations/mailerlite',
 									'php/global-variables/integrations/moments',
 									'php/global-variables/integrations/workable',
+									'php/global-variables/integrations/pipedrive',
 								],
 							},
 						]

website/src/docs/integration-filters.jsx

@@ -4,11 +4,11 @@ import { reformatCode } from '../../utils/shared.jsx';
 
 export function IntegrationFilters(props) {
 	const {
-		name,
 		filter,
 		onlyUse = [
 			'dataFilter',
 			'prePostParamsFilter',
+			'order',
 		],
 	} = props;
 
@@ -62,7 +62,7 @@ export function IntegrationFilters(props) {
 			{onlyUse.includes('prePostParamsFilter') &&
 				<>
 					<h2>Pre post params</h2>
-					<p>Change form fields data before it is sent to the external integration. This way you can manuipulate data and provide additional mapping to the data sent to the integration.</p>
+					<p>Change form fields data before it is sent to the external integration. This way you can manipulate data and provide additional mapping to the data sent to the integration.</p>
 
 					<CodeBlock language="php">
 						{reformatCode(`
@@ -84,6 +84,26 @@ export function IntegrationFilters(props) {
 					</CodeBlock>
 				</>
 			}
+
+			{onlyUse.includes('order') &&
+				<>
+					<h2>Order fields</h2>
+					<p>Force specific form fields order. If you set the order of fields with this filter they will always fallback to this settings. All fields not defined by this filter will follow the default block editor insert order.</p>
+					<p>You don't need to define every field in the form. For example if you want to <code>firstname</code>, <code>lastname</code> and <code>email</code> to be first in order this filter will make this happen.</p>
+
+					<CodeBlock language="php">
+						{reformatCode(`
+							add_filter('es_forms_integrations_${filter}_order', function(): array {
+								return [
+									'firstname',
+									'lastname',
+									'email',
+								];
+							});
+						`)}
+					</CodeBlock>
+				</>
+			}
 		</>
 	);
 }