Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: Goran Alković <[email protected]>
  • Loading branch information
iruzevic and goranalkovic-infinum authored Oct 13, 2023
1 parent 87b59a9 commit 0e1d5c7
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 51 deletions.
104 changes: 56 additions & 48 deletions website/forms/basics.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,111 +8,119 @@ import { Video } from './../src/docs/videos';
## 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.
At this time, the plugin is not a part of the WordPress repository, so it needs to be installed 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.
1. Open the Eightshift Forms [GitHub repository](https://github.com/infinum/eightshift-forms/releases) and find the latest release.
2. In the latest release details, under _Assets_, find the `release.zip` file and download it to you project folder.
3. After you unzip it it will be available in you WordPress admin under _Plugins_ section.
4. Activate the plugin

![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.
* **Form** - a collection of fields that used to collect data from the user
* **Field** - single data input element
* **Form listing** - list of all created forms
* **Locations** - list of places a form is used on the website
* **Edit form** - allows editing a form
* **Trashed forms** - list of forms that are marked as deleted (but not yet deleted permanently)
* **Form settings** - settings for a specific form
* **Global settings** - settings shared between all forms
* **Admin bar** - a collection of buttons and indicators displayed on the top of the admin area
* **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
* **Form picker block** - block that allows selecting a form that will be displayed 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.
This page lists all created forms, which can be used in pages, posts, etc.
Also, it contains multiple useful features to help manage the forms.

* Form type filter - filter your listing page by the form type
* Delete - delete one or more forms
* Sync - sync one or more forms with the external integration and update the form fields
* Duplicate - duplicate one or more forms
* Trashed - see all the trashed forms
* Create - add a form
* Locations - see all the locations where a form is displayed
* Setting - edit the form settings
* Edit form - edit the form
* Warnings - see all the warnings related to the form
* Multi-language - see all the languages that are used on the form (if you using a multi-language plugin)

![Forms listing screen](/img/forms/listing.webp)

### Locations

Details about forms locations can be found [here](features/locations).
Shows a list of all the places on the website that a selected form is used.

More details are available [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).
Opens a Gutenberg editor where you can modify and configure the form fields within a form.

More details are available [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.
Trashed forms screen shows a list of forms that are marked as deleted.
A form that is marked as deleted will not be shown in the frontend, nor in the list of forms in the Form picker.

In the list of trashed forms, a form can be either restored or permanently deleted by clicking on the respective button.

All trashed forms will not show on the frontend and you will not be able to select it on forms picker.
Please note that the "Permanently delete" action is not reversible!

![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.
Every form has a settings page where its behaviour can be defined. The changes here will not affect other forms.

Access it by clicking on `Settings` in 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 define settings that are shared between all forms. Access it by clicking on `Global settings` in the main WordPress sidebar.

Note that in some cases specific form settings can override global settings, e.g. validation messages.

![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.
The dashboards gives you an overview of the currently active features and enables activating and deactivating of them.

More details can be found [here](features/dashboard).

![Dashboard screen](/img/forms/dashboard.webp)

## Admin top bar
## Admin 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.
Admin bar is a toolbar displayed on the top of the WordPress admin interface. It is shown only when logged in.

You can find all you forms, settings, global settings, some troubleshooting tools and etc. on this bar.
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.

![Admin top bar screen](/img/forms/admin-top-bar.webp)
![Admin bar](/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.
The quick menu bar allows easy access to form editing and form settings.
It is shown besides a form, in the frontend view, only when logged in.

![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.
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.

![Form picker screen](/img/forms/form-picker.webp)

Expand Down
5 changes: 3 additions & 2 deletions website/forms/features/dashboard.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ 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).
The dashboards gives you an overview of the currently active features and enables activating and deactivating of them.

More details can be found [here](features/dashboard).

![Dashboard screen](/img/forms/dashboard.webp)
2 changes: 1 addition & 1 deletion website/forms/features/locations.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

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

0 comments on commit 0e1d5c7

Please sign in to comment.