diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index de06913b4..8f5125a63 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -110,8 +110,8 @@ module.exports = { indexName: 'infinum_eightshift', startUrls: [ 'https://eightshift.com', - 'https://eightshift.com/docs', - 'https://eightshift.com/forms', + 'https://eightshift.com/docs/welcome', + 'https://eightshift.com/forms/welcome', ], contextualSearch: false, }, diff --git a/website/forms/features/variations.md b/website/forms/features/variations.md new file mode 100644 index 000000000..01e0f5838 --- /dev/null +++ b/website/forms/features/variations.md @@ -0,0 +1,6 @@ +--- +id: variations +title: Variations +--- + +*Details coming soon* diff --git a/website/forms/integrations/corvus.md b/website/forms/integrations/corvus.md new file mode 100644 index 000000000..9de51b594 --- /dev/null +++ b/website/forms/integrations/corvus.md @@ -0,0 +1,25 @@ +--- +id: corvus +title: Corvus +--- + +Corvus Pay enables card payments and payments from account to account in web shops. Corvus Pay is the first FinTech company in Croatia to have received a license from the Croatian National Bank for payment initiation service within the PSD2 framework of the European Union. + +### Website + +* [Visit website](https://www.corvuspay.com/) + +### API Version + +* Not defined + +### API Documentation + +You need to login to your account to access the documentation. + +* [Documentation](https://cps.corvuspay.com/documentation/) + +### Integration type + +* Form builder **not** provided by the service. +* The form is created using our forms fields and connected to Corvus custom fields using form settings. diff --git a/website/forms/integrations/paycek.md b/website/forms/integrations/paycek.md new file mode 100644 index 000000000..23f0c8f39 --- /dev/null +++ b/website/forms/integrations/paycek.md @@ -0,0 +1,26 @@ +--- +id: paycek +title: Paycek +--- + +PayCek is an electronic payment service processing cryptocurrency payments, intended for all entities making the payment (merchants, caterers, webshops, fiscal cash registers, polyclinics, hoteliers, etc.), with EUR paid to the account. + +### Website + +* [Visit website](https://paycek.io/) + +### API Version + +* Not defined + +### API Documentation + +You need to login to your account to access the documentation. + +* [Documentation](https://paycek.io/processing/profile/integration/) + +### Integration type + +* Form builder **not** provided by the service. +* The form is created using our forms fields and connected to Paycek custom fields using form settings. + diff --git a/website/forms/integrations/talentlyft.md b/website/forms/integrations/talentlyft.md new file mode 100644 index 000000000..f96d4c900 --- /dev/null +++ b/website/forms/integrations/talentlyft.md @@ -0,0 +1,37 @@ +--- +id: talentlyft +title: Talentlyft +--- + +Talentlyft is an talent acquisition platform that enables you to attract and nurture the right people who fit your organization so you can hire faster and more cost-effectively. + +### Website + +* [Visit website](https://www.talentlyft.com/) + +### API Version + +* V2 + +### API Documentation + +* [Documentation](https://developers.talentlyft.com/) + +### Integration type + +* Form builder provided by the service. + +### Supported fields: +* text +* address +* email +* phone +* file +* textarea +* select +* decimal +* checkbox +* radio +* yesNo +* url +* date diff --git a/website/forms/javascript/events/available-events.mdx b/website/forms/javascript/events/available-events.mdx index 2c957151d..69872de00 100644 --- a/website/forms/javascript/events/available-events.mdx +++ b/website/forms/javascript/events/available-events.mdx @@ -12,122 +12,216 @@ This way you can be sure that everything is set and ready to be used. Additional List of all events can be found [here](https://github.com/infinum/eightshift-forms/blob/develop/src/Blocks/manifest.json). ::: +:::tip +All events are set on the window element. +::: + ### esFormsBeforeFormSubmit Triggered before form is submitted to the API-Rest endpoint. -:::tip -This event is set on the form element. -::: +```js +window.addEventListener('esFormsBeforeFormSubmit', (event) => { + console.log(event.detail); +}); +``` ### esFormsAfterFormSubmit Triggered after form is submitted to the API-Rest endpoint but before the response is processed. -:::tip -This event is set on the form element. -::: +```js +window.addEventListener('esFormsAfterFormSubmit', (event) => { + console.log(event.detail); +}); +``` ### esFormsAfterFormSubmitSuccess Triggered after form is submitted to the API-Rest endpoint and the response is processed with success. -:::tip -This event is set on the form element. -::: +```js +window.addEventListener('esFormsAfterFormSubmitSuccess', (event) => { + console.log(event.detail); +}); +``` ### esFormsAfterFormSubmitError Triggered after form is submitted to the API-Rest endpoint and the response is processed with general error. -:::tip -This event is set on the form element. -::: +```js +window.addEventListener('esFormsAfterFormSubmitError', (event) => { + console.log(event.detail); +}); +``` ### esFormsAfterFormSubmitErrorValidation Triggered after form is submitted to the API-Rest endpoint and the response is processed with validation error. -:::tip -This event is set on the form element. -::: +```js +window.addEventListener('esFormsAfterFormSubmitErrorValidation', (event) => { + console.log(event.detail); +}); +``` ### esFormsAfterFormSubmitEnd Triggered after form is submitted to the API-Rest endpoint and the response is fully processed and the form is ready for another submit. -:::tip -This event is set on the form element. -::: +```js +window.addEventListener('esFormsAfterFormSubmitEnd', (event) => { + console.log(event.detail); +}); +``` ### esFormsAfterGtmDataPush Triggered after GTM dataLAyer is pushed. This happens after form is submitted to the API-Rest endpoint and the response is processed with success. -:::tip -This event is set on the form element. -::: +```js +window.addEventListener('esFormsAfterGtmDataPush', (event) => { + console.log(event.detail); +}); +``` ### esFormsAfterFormSubmitReset Triggered after form is submitted to the API-Rest endpoint and the response is processed with success after which the form is reset to its original state. -:::tip -This event is set on the form element. -::: +```js +window.addEventListener('esFormsAfterFormSubmitReset', (event) => { + console.log(event.detail); +}); +``` ### esFormsAfterFormSubmitSuccessBeforeRedirect Triggered after form is submitted to the API-Rest endpoint and the response is processed with success right before redirect action triggers. -:::tip -This event is set on the form element. -::: +```js +window.addEventListener('esFormsAfterFormSubmitSuccessBeforeRedirect', (event) => { + console.log(event.detail); +}); +``` ### esFormsJsFormLoaded Triggered when all JavaScript on the form is loaded and form is ready to be used. -:::tip -This event is set on the window element. -::: +```js +window.addEventListener('esFormsJsFormLoaded', (event) => { + console.log(event.detail); +}); +``` ### esFormsManualInitLoaded -Triggered when manual initialization option is used from the forms global settings and the form is ready to be maunually initialized. +Triggered when manual initialization option is used from the forms global settings and the form is ready to be manually initialized. -:::tip -This event is set on the window element. -::: +```js +window.addEventListener('esFormsManualInitLoaded', (event) => { + console.log(event.detail); +}); +``` ### esFormsAfterCaptchaInit Triggered after captcha score is calculated and returned via REST-API. Only used if captcha is used on every page load. -:::tip -This event is set on the window element. -::: +```js +window.addEventListener('esFormsAfterCaptchaInit', (event) => { + console.log(event.detail); +}); +``` ### esFormsGoToNextStep Triggered after multi-step/multi-flow form is used and the next step is loaded. -:::tip -This event is set on the form element. -::: +```js +window.addEventListener('esFormsGoToNextStep', (event) => { + console.log(event.detail); +}); +``` ### esFormsGoToPrevStep Triggered after multi-step/multi-flow form is used and the previous step is loaded. -:::tip -This event is set on the form element. -::: +```js +window.addEventListener('esFormsGoToPrevStep', (event) => { + console.log(event.detail); +}); +``` -### esFormsEnrichmentPrefill +### esFormsResetSteps -Triggered after enrichment data is pre-filled from `localStorage`. +Triggered after multi-step/multi-flow form reset to the first step. -:::tip -This event is set on the form element. -::: +```js +window.addEventListener('esFormsResetSteps', (event) => { + console.log(event.detail); +}); +``` + +### esFormsBeforeEnrichmentUrlPrefill + +Triggered before URL enrichment prefill is used to prefill the form fields. + +```js +window.addEventListener('esFormsBeforeEnrichmentUrlPrefill', (event) => { + console.log(event.detail); +}); +``` + +### esFormsAfterEnrichmentUrlPrefill + +Triggered after URL enrichment prefill is used to prefill the form fields. + +```js +window.addEventListener('esFormsAfterEnrichmentUrlPrefill', (event) => { + console.log(event.detail); +}); +``` + +### esFormsBeforeEnrichmentLocalstoragePrefill + +Triggered before LocalStorage enrichment prefill is used to prefill the form fields. + +```js +window.addEventListener('esFormsBeforeEnrichmentLocalstoragePrefill', (event) => { + console.log(event.detail); +}); +``` + +### esFormsAfterEnrichmentLocalstoragePrefill + +Triggered after LocalStorage enrichment prefill is used to prefill the form fields. + +```js +window.addEventListener('esFormsAfterEnrichmentLocalstoragePrefill', (event) => { + console.log(event.detail); +}); +``` + +### esFormsOnFieldChange + +Triggered every time any field value is changed. + +```js +window.addEventListener('esFormsOnFieldChange', (event) => { + console.log(event.detail); +}); +``` + +### esFormsAfterResultsOutput + +Triggered after the results are outputted to the screen. + +```js +window.addEventListener('esFormsAfterResultsOutput', (event) => { + console.log(event.detail); +}); +``` diff --git a/website/forms/javascript/events/how-to-use.md b/website/forms/javascript/events/how-to-use.md index 506493595..d31ad9a62 100644 --- a/website/forms/javascript/events/how-to-use.md +++ b/website/forms/javascript/events/how-to-use.md @@ -6,77 +6,52 @@ title: How to use? ### esFormsAfterCaptchaInit In this example the event is hooked to the `window` object and in event details you have: -* `esForms` - object. -* `formId` - not available because this is a global event. -* `additional` - object from the API response. -```js -window.addEventListener('esFormsAfterCaptchaInit', ({detail}) => { - const { - additional: { - status, - }, - } = detail; - - if (status === 'success') { - const score = data?.response?.score?.toString(); - - if (score) { - // Do some actions with the score. - - window.dataLayer.push({ - event: 'recaptcha', - recaptchaScore: score, - }); - } - } -}); -``` - -### esFormsJsFormLoaded - -In this example the event is hooked to the `form` element and in event details you have: -* `esForms` - object. -* `formId` - form Id this event is a part of. +- `esForms` - object. +- `formId` - not available because this is a global event. +- `additional` - object from the API response. ```js import domReady from '@wordpress/dom-ready'; domReady(() => { - const element = document.querySelector('.js-es-block-form'); - - if (!element) { - return; - } - - element?.addEventListener('esFormsJsFormLoaded', ({detail}) => { + window.addEventListener('esFormsAfterCaptchaInit', ({ detail }) => { const { - formId, - esForms, + additional: { + status, + }, } = detail; - // Do some actions with the form. + if (status === 'success') { + const score = data?.response?.score?.toString(); + + if (score) { + // Do some actions with the score. + + window.dataLayer.push({ + event: 'recaptcha', + recaptchaScore: score, + }); + } + } }); }); ``` -### esFormsAfterFormSubmitReset +### esFormsJsFormLoaded + +In this example the event is hooked to the `window` element and in event details you have: -In this example the event is hooked to the `form` element and in event details you have: -* `esForms` - object. -* `formId` - form Id this event is a part of. -* `additional` - object from the API response. +- `esForms` - object. +- `formId` - form Id this event is a part of. ```js -const { store } = window.esForms.store; +import domReady from '@wordpress/dom-ready'; + +domReady(() => { + window.addEventListener('esFormsJsFormLoaded', ({ detail }) => { + const { formId, esForms } = detail; -[...document.querySelectorAll(store.getStateSelector('form'))].forEach((form) => { - form.addEventListener('esFormsAfterFormSubmitReset', ({detail}) => { - const { - formId, - esForms, - additional - } = detail; // Do some actions with the form. }); }); diff --git a/website/forms/php/filters/admin/top-bar-menu.md b/website/forms/php/filters/admin/top-bar-menu.md new file mode 100644 index 000000000..154444b2c --- /dev/null +++ b/website/forms/php/filters/admin/top-bar-menu.md @@ -0,0 +1,30 @@ +--- +id: top-bar-menu +title: Top bar menu +--- + +Add additional items to the top bar menu under the Add-on parent. + +```php +add_filter('es_forms_admin_top_bar_menu_items', 'getTopBarMenuItems', 10, 2); + +/** + * Add additional items to the top bar menu under the Add-on parent + * + * @param array $menuItems Menu items from internal db. + * @param string $menuType Menu type. + * + * @return array + */ +function getTopBarMenuItems(array $output, string $addonsPrefix): array +{ + return [ + [ + 'id' => 'item-id', + 'parent' => $addonsPrefix, + 'title' => __('Item title', 'text-domain'), + 'href' => 'https://example.com', + ], + ]; +} +``` diff --git a/website/forms/php/filters/block/country/custom-order.md b/website/forms/php/filters/block/country/custom-order.md new file mode 100644 index 000000000..d4dda452e --- /dev/null +++ b/website/forms/php/filters/block/country/custom-order.md @@ -0,0 +1,31 @@ +--- +id: custom-order +title: Custom order +--- + +This will filter will allow you to change the original order of the default or custom countries list by providing the list key and the order of the countries you want to display. + +You don't need to provide order for all countries, only the ones you want to change the order and the rest will be displayed in the default order. + +```php +add_filter('es_forms_block_country_custom_order', 'getBlockCountryCustomOrder'); + +/** + * Change default countries order. + * + * This filter provides you with the ability to change the default countries order. + * + * @param array $output Output. + * + * @return array + */ +public function getBlockCountryCustomOrder(array $output): array +{ + return [ + 'default' => [ + 'hr', + 'de', + ], + ]; +} +``` diff --git a/website/forms/php/filters/block/dynamic/additional-content.mdx b/website/forms/php/filters/block/dynamic/additional-content.mdx new file mode 100644 index 000000000..ad3c1f2d1 --- /dev/null +++ b/website/forms/php/filters/block/dynamic/additional-content.mdx @@ -0,0 +1,8 @@ +--- +id: additional-content +title: Additional content +--- + +import { AdditionalContentFilter } from './../../../../../src/docs/filters'; + + diff --git a/website/forms/php/filters/block/dynamic/data-output.md b/website/forms/php/filters/block/dynamic/data-output.md new file mode 100644 index 000000000..8e11a4336 --- /dev/null +++ b/website/forms/php/filters/block/dynamic/data-output.md @@ -0,0 +1,6 @@ +--- +id: data-output +title: Data output +--- + +*Details coming soon* diff --git a/website/forms/php/filters/block/file/info-additional-content.md b/website/forms/php/filters/block/file/info-additional-content.md new file mode 100644 index 000000000..2bb7d176a --- /dev/null +++ b/website/forms/php/filters/block/file/info-additional-content.md @@ -0,0 +1,23 @@ +--- +id: info-additional-content +title: Info additional content +--- + +This filter will allow you to change the additional content of the info component of the file block. By default, it contains the `infoText` and `removeButton`. You can provide your own content to be displayed in the info component. + +```php +\add_filter('es_forms_block_file_info_additional_content', [$this, 'getBlockFileInfoAdditionalContent']); + +/** + * Change details of info component of the file block. + * + * @param string $output The current output. + * @param array $attributes The attributes. + * + * @return string + */ +public function getBlockFileInfoAdditionalContent(string $output, array $attributes): string +{ + return \esc_html__('Info Text', 'text-domain'); +} +``` diff --git a/website/forms/php/filters/block/form/component-show-form.md b/website/forms/php/filters/block/form/component-show-form.md new file mode 100644 index 000000000..e6ebf8375 --- /dev/null +++ b/website/forms/php/filters/block/form/component-show-form.md @@ -0,0 +1,6 @@ +--- +id: component-show-form +title: Component show form +--- + +*Details coming soon* diff --git a/website/forms/php/filters/block/form/custom-class-selector.md b/website/forms/php/filters/block/form/custom-class-selector.md new file mode 100644 index 000000000..2d7932120 --- /dev/null +++ b/website/forms/php/filters/block/form/custom-class-selector.md @@ -0,0 +1,6 @@ +--- +id: custom-class-selector +title: Custom class selector +--- + +*Details coming soon* diff --git a/website/forms/php/filters/block/form/phone-sync.md b/website/forms/php/filters/block/form/phone-sync.md deleted file mode 100644 index a13d4c942..000000000 --- a/website/forms/php/filters/block/form/phone-sync.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -id: phone-sync -title: Phone sync ---- - -By default if you change the value on the phone field the country field (if present) will be updated automatically. If you want to disable this feature you can use this filter or use the form global/local settings. This filter will override global settings for phone sync. - -```php -\add_filter('es_forms_block_form_phone_sync', [$this, 'getFormPhoneSync'], 10, 2); - -/** - * Set phone sync settings. - * - * This filter will override global settings for phone sync. - * - * @param string $formType Type of form used like greenhouse, hubspot, etc. - * @param string $formId Form ID. - * - * @return bool - */ -public function getFormPhoneSync(string $formType, string $formId): bool -{ - if ($formType === 'hubspot') { - return true; - } - - return false; -} -``` diff --git a/website/forms/php/filters/block/form/pre-response-addon-data.md b/website/forms/php/filters/block/form/pre-response-addon-data.md deleted file mode 100644 index 4dbfae8b9..000000000 --- a/website/forms/php/filters/block/form/pre-response-addon-data.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: pre-response-addon-data -title: Pre-Response add-on Data ---- - -Allows adding custom data to the API response when the form is submitted. - -```php -\add_filter('es_forms_block_form_pre_response_addon_data', [$this, 'getPreResponseAddonData'], 10, 2); - -/** - * Set additional data to API response for addon data. - * - * @param array $output Output data. - * @param array $formDetails Data passed from the `getFormDetailsApi` function. - * - * @return array - */ -public function getPreResponseAddonData(array $output, string $formDetails): array -{ - $output['addonData'] = [ - 'key' => 'value', - ]; - - return $output; -} -``` diff --git a/website/forms/php/filters/block/form/pre-response-success-redirect-data.md b/website/forms/php/filters/block/form/pre-response-success-redirect-data.md deleted file mode 100644 index 9b16f6da3..000000000 --- a/website/forms/php/filters/block/form/pre-response-success-redirect-data.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: pre-response-success-redirect-data -title: Pre-Response Success Redirect Data ---- - -Allows adding data to the API response key, which is used when passing data to the success redirect URL. - -```php -\add_filter('es_forms_block_form_pre_response_success_redirect_data', [$this, 'getPreResponseSuccessRedirectData'], 10, 2); - -/** - * Set additional data to API response for success redirect. - * - * @param array $output Output data. - * @param array $formDetails Data passed from the `getFormDetailsApi` function. - * - * @return array - */ -public function getPreResponseSuccessRedirectData(array $output, string $formDetails): array -{ - $output['successData'] = [ - 'key' => 'value', - ]; - - return $output; -} -``` diff --git a/website/forms/php/filters/block/form/result-output-items.md b/website/forms/php/filters/block/form/result-output-items.md deleted file mode 100644 index ee586ca78..000000000 --- a/website/forms/php/filters/block/form/result-output-items.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: result-output-items -title: Result output items ---- - -Allows modifying _Form result output parts_ using an API to change which block is shown on the frontend, based on the user input. - -Used by the `result-output-item` block. - -```php -add_filter('es_forms_block_form_result_output_items', 'getFormResultOutputItems', 10, 3); - -/** - * Populate Result output items in the API response data used in 'result-output-item' block. - * - * @param array $output Output data. - * @param array $formDetails Data passed from the 'getFormDetailsApi' function. - * @param string $formId Form ID. - * - * @return array - */ -function getFormResultOutputItems(array $output, array $formDetails, string $formId): array -{ - $output['testKeys'] = 'testValue'; - - return $output; -} -``` - - diff --git a/website/forms/php/filters/block/form/result-output-parts.md b/website/forms/php/filters/block/form/result-output-parts.md deleted file mode 100644 index de2cb2a03..000000000 --- a/website/forms/php/filters/block/form/result-output-parts.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: result-output-parts -title: Result output parts ---- - -Allows modifying _Form result output parts_ using an API to change which shortcode is output on the frontend, based on the user input. - -Used by the `esFormsROIP` shortcode. - -```php -add_filter('es_forms_block_form_result_output_parts', 'getFormResultOutputParts', 10, 3); - -/** - * Populate result output parts in the API response data used in the 'esFormsROIP' shortcode. - * - * @param array $output Output data. - * @param array $formDetails Data passed from the 'getFormDetailsApi' function. - * @param string $formId Form ID. - * - * @return array - */ -function getFormResultOutputParts(array $output, array $formDetails, string $formId): array -{ - $output['testKeys'] = 'testValue'; - - return $output; -} -``` - - diff --git a/website/forms/php/filters/block/form/success-redirect-variation-options.md b/website/forms/php/filters/block/form/success-redirect-variation-options.md deleted file mode 100644 index b68c64a5c..000000000 --- a/website/forms/php/filters/block/form/success-redirect-variation-options.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: success-redirect-variation-options -title: Success redirect variation options ---- - -While you can create variations list from the forms global setting, by using this filter you can provide additional variations which are fixed and can't be changed by the user. - -Filter returns an array of arrays. The first value is the variation value and the second value is the variation label. - -```php -\add_filter('es_forms_block_form_success_redirect_variation_options', [$this, 'getBlockFormSuccessRedirectVariationOptions']); - -/** - * Set success redirect variation options value. - * - * This filter will override settings for success redirect variation options. - * - * @return array - */ -public function getBlockFormSuccessRedirectVariationOptions(): array -{ - return [ - [ - 'test1', - \esc_html__('label1', ''), - ], - [ - 'test2', - \esc_html__('label2', ''), - ], - ]; -} -``` diff --git a/website/forms/php/filters/block/form/success-redirect-variation.md b/website/forms/php/filters/block/form/success-redirect-variation.md deleted file mode 100644 index 7130dab41..000000000 --- a/website/forms/php/filters/block/form/success-redirect-variation.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: success-redirect-variation -title: Success redirect variation ---- - -Success variations is an option that will add additional GET parameter to the success redirect URL. With this parameter you can customize the success page for each form type. First you need to create variations list in the forms global settings and then you can select the variation for each form. - -This filter allows you to override the success redirect variation and have it set fixed for all or some of your forms. With the `$formType` parameter you can customize the variation for each form type. - -```php -\add_filter('es_forms_block_form_success_redirect_variation', [$this, 'getBlockFormSuccessRedirectVariation'], 10, 2); - -/** - * Set success redirect variation value. - * - * This filter will override settings for success redirect variation. - * - * @param string $formType Type of form used like greenhouse, hubspot, etc. - * @param string $formId Form ID. - * - * @return string - */ -public function getBlockFormSuccessRedirectVariation(string $formType, string $formId): string -{ - return ''; -} -``` diff --git a/website/forms/php/filters/block/form/variation.md b/website/forms/php/filters/block/form/variation.md new file mode 100644 index 000000000..0d28050cb --- /dev/null +++ b/website/forms/php/filters/block/form/variation.md @@ -0,0 +1,6 @@ +--- +id: variation +title: Variation +--- + +*Details coming soon* diff --git a/website/forms/php/filters/block/forms/use-custom-result-output-feature.md b/website/forms/php/filters/block/forms/use-custom-result-output-feature.md new file mode 100644 index 000000000..bd4f13841 --- /dev/null +++ b/website/forms/php/filters/block/forms/use-custom-result-output-feature.md @@ -0,0 +1,22 @@ +--- +id: use-custom-result-output-feature +title: Use custom result output feature +--- + +With this filter you can enable or disable the custom result output feature based on your needs. + +```php +\add_filter('es_forms_block_forms_use_custom_result_output_feature', 'useCustomResultOutputFeature'); + +/** + * Use custom result output feature + * + * @param bool $output + * + * @return bool + */ +public function useCustomResultOutputFeature(bool $output): bool +{ + return true; +} +``` diff --git a/website/forms/php/filters/block/rating/star-icon.md b/website/forms/php/filters/block/rating/star-icon.md new file mode 100644 index 000000000..424c03d34 --- /dev/null +++ b/website/forms/php/filters/block/rating/star-icon.md @@ -0,0 +1,23 @@ +--- +id: star-icon +title: Star icon +--- + +Change the default star icon for the rating block with your own SVG icon or component. + +```php +\add_filter('es_forms_block_rating_star_icon', 'getBlockRatingStarIcon', 10, 2); + +/** + * Change the star icon for the rating block. + * + * @param string $currentIcon + * @param array $attributes + * + * @return string + */ +public function getBlockRatingStarIcon(string $currentIcon, array $attributes): string +{ + return $currentIcon; +} +``` diff --git a/website/forms/php/filters/blocks/tailwind-selectors.md b/website/forms/php/filters/blocks/tailwind-selectors.md new file mode 100644 index 000000000..ea8b56621 --- /dev/null +++ b/website/forms/php/filters/blocks/tailwind-selectors.md @@ -0,0 +1,273 @@ +--- +id: tailwind-selectors +title: Tailwind selectors +--- + +Since version 5.0.7 Eightshift forms supports Tailwind CSS selectors. This means that you can use Tailwind CSS classes to style your forms. + +To provide your own Tailwind CSS classes, you can use this filter with the correct key-value pair. + +```php +\add_filter('es_forms_blocks_tailwind_selectors', 'getBlockFormsTailwindSelectors'); + +public function getBlockFormsTailwindSelectors(): array +{ + return [ + 'forms' => [ + 'base' => '', + ], + 'form' => [ + 'base' => '', + 'parts' => [ + 'fields' => '', + ], + ], + 'form-edit-actions' => [ + 'base' => '', + 'parts' => [ + 'link' => '', + ], + ], + 'loader' => [ + 'base' => '', + ], + 'global-msg' => [ + 'base' => '', + ], + 'field' => [ + 'base' => '', + 'parts' => [ + 'inner' => '', + 'label' => '', + 'label-inner' => '', + 'before-content' => '', + 'content' => '', + 'content-wrap' => '', + 'after-content' => '', + 'help' => '', + 'error' => '', + ], + ], + 'input' => [ + 'base' => '', + 'parts' => [ + 'field' => '', + 'field-inner' => '', + 'field-label' => '', + 'field-label-inner' => '', + 'field-before-content' => '', + 'field-content' => '', + 'field-content-wrap' => '', + 'field-after-content' => '', + 'field-suffix-content' => '', + 'field-help' => '', + 'field-error' => '', + ], + ], + 'range' => [ + 'base' => '', + 'parts' => [ + 'min' => '', + 'max' => '', + 'current' => '', + 'field' => '', + 'field-inner' => '', + 'field-label' => '', + 'field-label-inner' => '', + 'field-before-content' => '', + 'field-content' => '', + 'field-content-wrap' => '', + 'field-after-content' => '', + 'field-suffix-content' => '', + 'field-help' => '', + 'field-error' => '', + ], + ], + 'rating' => [ + 'base' => '', + 'parts' => [ + 'input' => '', + 'star' => '', + 'field' => '', + 'field-inner' => '', + 'field-label' => '', + 'field-label-inner' => '', + 'field-before-content' => '', + 'field-content' => '', + 'field-content-wrap' => '', + 'field-after-content' => '', + 'field-suffix-content' => '', + 'field-help' => '', + 'field-error' => '', + ], + ], + 'radios' => [ + 'parts' => [ + 'field' => '', + 'field-inner' => '', + 'field-label' => '', + 'field-label-inner' => '', + 'field-before-content' => '', + 'field-content' => '', + 'field-content-wrap' => '', + 'field-after-content' => '', + 'field-suffix-content' => '', + 'field-help' => '', + 'field-error' => '', + ], + ], + 'radio' => [ + 'base' => '', + 'parts' => [ + 'input' => '', + 'content' => '', + 'label' => '', + 'label-icon' => '', + 'label-inner' => '', + ], + ], + 'checkboxes' => [ + 'parts' => [ + 'field' => '', + 'field-inner' => '', + 'field-label' => '', + 'field-label-inner' => '', + 'field-before-content' => '', + 'field-content' => '', + 'field-content-wrap' => '', + 'field-after-content' => '', + 'field-suffix-content' => '', + 'field-help' => '', + 'field-error' => '', + ], + ], + 'checkbox' => [ + 'base' => '', + 'parts' => [ + 'input' => '', + 'content' => '', + 'label' => '', + 'label-icon' => '', + 'label-inner' => '', + 'help' => '', + ], + ], + 'file' => [ + 'base' => '', + 'parts' => [ + 'button' => '', + 'custom-wrap' => '', + 'info' => '', + 'field' => '', + 'field-inner' => '', + 'field-label' => '', + 'field-label-inner' => '', + 'field-before-content' => '', + 'field-content' => '', + 'field-content-wrap' => '', + 'field-after-content' => '', + 'field-suffix-content' => '', + 'field-help' => '', + 'field-error' => '', + ], + ], + 'phone' => [ + 'base' => '', + 'parts' => [ + 'field' => '', + 'field-inner' => '', + 'field-label' => '', + 'field-label-inner' => '', + 'field-before-content' => '', + 'field-content' => '', + 'field-content-wrap' => '', + 'field-after-content' => '', + 'field-suffix-content' => '', + 'field-help' => '', + 'field-error' => '', + ], + ], + 'textarea' => [ + 'base' => '', + 'parts' => [ + 'field' => '', + 'field-inner' => '', + 'field-label' => '', + 'field-label-inner' => '', + 'field-before-content' => '', + 'field-content' => '', + 'field-content-wrap' => '', + 'field-after-content' => '', + 'field-suffix-content' => '', + 'field-help' => '', + 'field-error' => '', + ], + ], + 'date' => [ + 'base' => '', + 'parts' => [ + 'field' => '', + 'field-inner' => '', + 'field-label' => '', + 'field-label-inner' => '', + 'field-before-content' => '', + 'field-content' => '', + 'field-content-wrap' => '', + 'field-after-content' => '', + 'field-suffix-content' => '', + 'field-help' => '', + 'field-error' => '', + ], + ], + 'submit' => [ + 'base' => '', + 'parts' => [ + 'inner' => '', + 'field' => '', + 'field-inner' => '', + 'field-label' => '', + 'field-label-inner' => '', + 'field-before-content' => '', + 'field-content' => '', + 'field-content-wrap' => '', + 'field-after-content' => '', + 'field-suffix-content' => '', + 'field-help' => '', + 'field-error' => '', + ], + ], + 'step' => [ + 'base' => '', + 'parts' => [ + 'debug-details' => '', + 'inner' => '', + 'navigation' => '', + 'navigation-inner' => '', + 'navigation-prev' => '', + 'navigation-next' => '', + ], + ], + 'step-navigation-prev' => [ + 'base' => '', + 'parts' => [ + 'inner' => '', + ], + ], + 'step-navigation-next' => [ + 'base' => '', + 'parts' => [ + 'inner' => '', + ], + ], + 'progress-bar' => [ + 'base' => '', + 'parts' => [ + 'item' => '', + 'item-inner' => '', + 'multiflow' => '', + 'multistep' => '', + ], + ], + ]; +} +``` diff --git a/website/forms/php/filters/encryption/secret-iv-key.md b/website/forms/php/filters/encryption/secret-iv-key.md new file mode 100644 index 000000000..deb78d5c8 --- /dev/null +++ b/website/forms/php/filters/encryption/secret-iv-key.md @@ -0,0 +1,20 @@ +--- +id: secret-iv-key +title: Secret iv key +--- + +Encrypting uses `\wp_salt('SECURE_AUTH_KEY')` from WordPress to encrypt the data. If you want to use your own secret key, you can use the provided filter. + +```php +\add_filter('es_forms_encryption_secret_iv_key', 'getEncryptionSecretIvKey'); + +/** + * Get the encryption secret IV key. + * + * @return string + */ +public function getEncryptionSecretIvKey(): string +{ + return ''; +} +``` diff --git a/website/forms/php/filters/encryption/secret-key.md b/website/forms/php/filters/encryption/secret-key.md new file mode 100644 index 000000000..684519306 --- /dev/null +++ b/website/forms/php/filters/encryption/secret-key.md @@ -0,0 +1,22 @@ +--- +id: secret-key +title: Secret key +--- + + +Encrypting uses `wp_salt()` from WordPress to encrypt the data. If you want to use your own secret key, you can use the provided filter. + +```php +\add_filter('es_forms_encryption_secret_key', 'getEncryptionSecretKey'); + +/** + * Get the encryption secret key. + * + * @return string + */ +public function getEncryptionSecretKey(): string +{ + return ''; +} +``` + diff --git a/website/forms/php/filters/integrations/corvus.mdx b/website/forms/php/filters/integrations/corvus.mdx new file mode 100644 index 000000000..7e7084ff3 --- /dev/null +++ b/website/forms/php/filters/integrations/corvus.mdx @@ -0,0 +1,6 @@ +--- +id: corvus +title: Corvus +--- + +*Details coming soon* diff --git a/website/forms/php/filters/integrations/paycek.mdx b/website/forms/php/filters/integrations/paycek.mdx new file mode 100644 index 000000000..ac54b494d --- /dev/null +++ b/website/forms/php/filters/integrations/paycek.mdx @@ -0,0 +1,6 @@ +--- +id: paycek +title: Paycek +--- + +*Details coming soon* diff --git a/website/forms/php/filters/integrations/talentlyft.mdx b/website/forms/php/filters/integrations/talentlyft.mdx new file mode 100644 index 000000000..f915ce56a --- /dev/null +++ b/website/forms/php/filters/integrations/talentlyft.mdx @@ -0,0 +1,6 @@ +--- +id: talentlyft +title: Talentlyft +--- + +*Details coming soon* diff --git a/website/forms/php/filters/scripts/dependency-captcha.md b/website/forms/php/filters/scripts/dependency-captcha.md new file mode 100644 index 000000000..8bc77bce8 --- /dev/null +++ b/website/forms/php/filters/scripts/dependency-captcha.md @@ -0,0 +1,28 @@ +--- +id: dependency-captcha +title: Dependency captcha +--- + + +Allows changing the order in which the captcha scripts are loaded on the frontend. This filter is useful when you want to load the captcha scripts earlier or later than the default order. + +:::caution +We highly discourage changing the order of the captcha scripts. This can cause issues with the captcha functionality. +::: + +```php +\add_filter('es_forms_scripts_dependency_blocks_frontend', [$this, 'getScriptsDependency']); + +/** + * Load add-on scripts before the Forms scripts. + * + * @return array + */ +public function getScriptsDependency(): array +{ + return [ + '', + ]; +} +``` + diff --git a/website/forms/php/filters/scripts/dependency-theme.md b/website/forms/php/filters/scripts/dependency-theme.md deleted file mode 100644 index b85f75ffe..000000000 --- a/website/forms/php/filters/scripts/dependency-theme.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -id: dependency-theme -title: Dependency theme ---- - -Allows changing the order in which the theme area scripts are loaded. Useful when creating a Forms add-on plugin, and your script needs to be loaded before the Forms scripts (e.g. for adding custom event listeners). - -```php -\add_filter('es_forms_scripts_dependency_theme', [$this, 'getScriptsDependency']); - -/** - * Load add-on scripts before Forms scripts. - * - * @return array - */ -public function getScriptsDependency(): array -{ - return [ - '', - ]; -} -``` diff --git a/website/forms/php/global-variables/integrations/corvus.md b/website/forms/php/global-variables/integrations/corvus.md new file mode 100644 index 000000000..8cc6e6341 --- /dev/null +++ b/website/forms/php/global-variables/integrations/corvus.md @@ -0,0 +1,12 @@ +--- +id: corvus +title: Corvus +--- + +### ES_API_KEY_CORVUS_`` + +This variable will set the Corvus store id integration API key. + +```php +define('ES_API_KEY_CORVUS_', ''); +``` diff --git a/website/forms/php/global-variables/integrations/paycek.md b/website/forms/php/global-variables/integrations/paycek.md new file mode 100644 index 000000000..b3cf20103 --- /dev/null +++ b/website/forms/php/global-variables/integrations/paycek.md @@ -0,0 +1,20 @@ +--- +id: paycek +title: Paycek +--- + +### ES_API_KEY_PAYCEK + +This variable will set the Paycek integration API key. + +```php +define('ES_API_KEY_PAYCEK', ''); +``` + +### ES_PROFILE_KEY_PAYCEK + +This variable will set the Paycek integration profile key. + +```php +define('ES_PROFILE_KEY_PAYCEK', ''); +``` diff --git a/website/forms/php/global-variables/integrations/talentlyft.md b/website/forms/php/global-variables/integrations/talentlyft.md new file mode 100644 index 000000000..893875e58 --- /dev/null +++ b/website/forms/php/global-variables/integrations/talentlyft.md @@ -0,0 +1,12 @@ +--- +id: talentlyft +title: Talentlyft +--- + +### ES_API_KEY_TALENTLYFT + +This variable will set the Talentlyft integration API key. + +```php +define('ES_API_KEY_TALENTLYFT', ''); +``` diff --git a/website/forms/php/helpers.md b/website/forms/php/helpers.md index c9ecf95d1..abb118b0c 100644 --- a/website/forms/php/helpers.md +++ b/website/forms/php/helpers.md @@ -5,80 +5,4 @@ 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. -All helpers can be found [here](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. - - Form identification by name (instead of the default "by ID"), can be useful if switching environments when the form ID could change. - -```php -if (\function_exists('esFormsGetFormIdByName')) { - echo esFormsGetFormIdByName(''); -} -``` - -### esFormsDecryptor - -This helper provides decrypt and encrypt methods for variations set in the Form settings, passed to the "Thank you" page after form submission. - -```php -if (\function_exists('esFormsDecryptor')) { - $variation = isset($_GET['es-variation']) ? \esFormsDecryptor(\sanitize_text_field(\wp_unslash($_GET['es-variation']))) : ''; -} -``` - -### esFormsGeolocationCountriesList - -This method generates a list of countries available in the geolocation API and country fields. - -```php -if (\function_exists('esFormsGeolocationCountriesList')) { - $countriesList = esFormsGeolocationCountriesList(); -} -``` - -### esFormsGetSelectOptionsArrayFromString - -This helper parses the block grammar output (that the Gutenberg editor generates) for block options, making it easy to use them in your projects. - -```php -if (\function_exists('esFormsGetSelectOptionsArrayFromString')) { - $select = esFormsGetSelectOptionsArrayFromString(''); -} -``` - -### esFormsGetComponentsRender - -This helper allows you to access the Eightshift Forms component `render` method, enabling you to utilize all Forms components in your projects. If you already have a style set for the selected component, you can use this helper to render it with all the necessary data and styling applied. - -A list of all components can be found [here](https://github.com/infinum/eightshift-forms/tree/develop/src/Blocks/components). - -```php -if (\function_exists('esFormsGetComponentsRender')) { - $render = esFormsGetComponentsRender('', '[]'); -} -``` - -### esFormRenderForm - -If you want to output a form in a custom template or block, you can use this helper to do so. - -Please note that not all functionalities are available, and certain options might not be available. - -```php -if (\function_exists('esFormRenderForm')) { - echo esFormRenderForm('', '[]'); -} -``` - -### esFormGetEntry - -If you need to retrieve form entry data, you can use this helper by providing entry unique ID. - -```php -if (\function_exists('esFormGetEntry')) { - $entry = esFormGetEntry(''); -} -``` +All helpers can be found [here](https://github.com/infinum/eightshift-forms/blob/main/src/Helpers/publicHelper.php). diff --git a/website/forms/php/shortcodes.md b/website/forms/php/shortcodes.md index 63ba3fcdd..1ad59975a 100644 --- a/website/forms/php/shortcodes.md +++ b/website/forms/php/shortcodes.md @@ -38,6 +38,21 @@ The `esFormsROIP` (_Result output item part_) shortcode allows showing certain c [esFormsROIP name=""]Default content[/esFormsROIP] ``` +## esFormsROISF + +The `esFormsROISF` shortcode will output button that can be used to restore/show form after the form is submitted and the result is shown. This works only if the form is set to be hidden after submission. + +**Available usage:** +* Result output custom post type + +**Available attributes:** +* none + +**Example usage:** +```php +[esFormsROISF]Show form[/esFormsROISF] +``` + ## esFormsRangeCurrent The `esFormsRangeCurrent` shortcode allows showing the current value of the range input. diff --git a/website/sidebars-forms.js b/website/sidebars-forms.js index 158204534..ad213bc8c 100644 --- a/website/sidebars-forms.js +++ b/website/sidebars-forms.js @@ -14,6 +14,7 @@ module.exports = { 'features/enrichment', 'features/geolocation', 'features/validation', + 'features/variations', 'features/multisteps-forms', 'features/spam-prevention', 'features/success-redirect', @@ -45,6 +46,7 @@ module.exports = { 'integrations/airtable', 'integrations/calculator', 'integrations/clearbit', + 'integrations/corvus', 'integrations/goodbits', 'integrations/greenhouse', 'integrations/hubspot', @@ -53,8 +55,10 @@ module.exports = { 'integrations/mailer', 'integrations/mailerlite', 'integrations/moments', - 'integrations/workable', + 'integrations/paycek', 'integrations/pipedrive', + 'integrations/talentlyft', + 'integrations/workable', ], }, 'known-issues', @@ -79,6 +83,7 @@ module.exports = { 'php/global-variables/integrations/active-campaign', 'php/global-variables/integrations/airtable', 'php/global-variables/integrations/clearbit', + 'php/global-variables/integrations/corvus', 'php/global-variables/integrations/goodbits', 'php/global-variables/integrations/greenhouse', 'php/global-variables/integrations/hubspot', @@ -86,7 +91,9 @@ module.exports = { 'php/global-variables/integrations/mailchimp', 'php/global-variables/integrations/mailerlite', 'php/global-variables/integrations/moments', + 'php/global-variables/integrations/paycek', 'php/global-variables/integrations/workable', + 'php/global-variables/integrations/talentlyft', 'php/global-variables/integrations/pipedrive', ], }, @@ -107,6 +114,7 @@ module.exports = { 'label': 'Forms', 'items': [ 'php/filters/block/forms/style-options', + 'php/filters/block/forms/use-custom-result-output-feature', ], }, { @@ -116,19 +124,15 @@ module.exports = { 'php/filters/block/form/redirect-timeout', 'php/filters/block/form/hide-global-msg-timeout', 'php/filters/block/form/success-redirect-url', - 'php/filters/block/form/success-redirect-variation', - 'php/filters/block/form/success-redirect-variation-options', + 'php/filters/block/form/variation', 'php/filters/block/form/tracking-event-name', 'php/filters/block/form/tracking-additional-data', 'php/filters/block/form/data-type-selector', - 'php/filters/block/form/phone-sync', 'php/filters/block/form/global-msg-headings', 'php/filters/block/form/additional-content', - 'php/filters/block/form/pre-response-addon-data', - 'php/filters/block/form/pre-response-success-redirect-data', 'php/filters/block/form/additional-hidden-fields', - 'php/filters/block/form/result-output-items', - 'php/filters/block/form/result-output-parts', + 'php/filters/block/form/custom-class-selector', + 'php/filters/block/form/component-show-form', ], }, { @@ -173,8 +177,9 @@ module.exports = { 'type': 'category', 'label': 'File', 'items': [ - 'php/filters/block/file/preview-remove-label', 'php/filters/block/file/additional-content', + 'php/filters/block/file/info-additional-content', + 'php/filters/block/file/preview-remove-label', ], }, { @@ -202,8 +207,9 @@ module.exports = { 'type': 'category', 'label': 'Country', 'items': [ - 'php/filters/block/country/alternative-data-set', 'php/filters/block/country/additional-content', + 'php/filters/block/country/alternative-data-set', + 'php/filters/block/country/custom-order', ], }, { @@ -234,6 +240,15 @@ module.exports = { 'label': 'Rating', 'items': [ 'php/filters/block/rating/additional-content', + 'php/filters/block/rating/star-icon', + ], + }, + { + 'type': 'category', + 'label': 'Dynamic', + 'items': [ + 'php/filters/block/dynamic/additional-content', + 'php/filters/block/dynamic/data-output', ], }, ], @@ -245,6 +260,7 @@ module.exports = { 'php/filters/blocks/allowed-blocks', 'php/filters/blocks/additional-blocks', 'php/filters/blocks/media-breakpoints', + 'php/filters/blocks/tailwind-selectors', ], }, { @@ -260,7 +276,7 @@ module.exports = { 'label': 'Scripts', 'items': [ 'php/filters/scripts/dependency-admin', - 'php/filters/scripts/dependency-theme', + 'php/filters/scripts/dependency-captcha', 'php/filters/scripts/dependency-blocks-editor', 'php/filters/scripts/dependency-blocks-frontend', 'php/filters/scripts/routes-public', @@ -271,9 +287,9 @@ module.exports = { 'type': 'category', 'label': 'Geolocation', 'items': [ + 'php/filters/geolocation/countries', 'php/filters/geolocation/db-location', 'php/filters/geolocation/phar-location', - 'php/filters/geolocation/countries', ], }, { @@ -284,6 +300,7 @@ module.exports = { 'php/filters/integrations/airtable', 'php/filters/integrations/calculator', 'php/filters/integrations/clearbit', + 'php/filters/integrations/corvus', 'php/filters/integrations/goodbits', 'php/filters/integrations/greenhouse', 'php/filters/integrations/hubspot', @@ -292,8 +309,10 @@ module.exports = { 'php/filters/integrations/mailer', 'php/filters/integrations/mailerlite', 'php/filters/integrations/moments', - 'php/filters/integrations/workable', + 'php/filters/integrations/paycek', 'php/filters/integrations/pipedrive', + 'php/filters/integrations/talentlyft', + 'php/filters/integrations/workable', ], }, { @@ -317,10 +336,19 @@ module.exports = { 'php/filters/validation/force-mimetype-from-fs', ], }, + { + 'type': 'category', + 'label': 'Encryption', + 'items': [ + 'php/filters/encryption/secret-key', + 'php/filters/encryption/secret-iv-key', + ], + }, { 'type': 'category', 'label': 'Admin', 'items': [ + 'php/filters/admin/top-bar-menu', 'php/filters/admin/settings-data', ], }, diff --git a/website/src/docs/filters.jsx b/website/src/docs/filters.jsx index f0e2817f9..67488cbf3 100644 --- a/website/src/docs/filters.jsx +++ b/website/src/docs/filters.jsx @@ -39,9 +39,17 @@ export function AdditionalContentFilter({ filter }) { {reformatCode(` - add_filter('es_forms_block_${filter}_additional_content', function(): string { + \add_filter('es_forms_block_${filter}_additional_content', 'getAdditionalContent'); + + /** + * Adds custom content before the field element's closing tag. + * + * @return string + */ + function getAdditionalContent(): string + { return ''; - }) + } `)} @@ -58,7 +66,7 @@ function DataFilter ({ filter }) { {reformatCode(` - add_filter('es_forms_integrations_${filter}_data', 'getIntegrationFilterData', 10, 2); + \add_filter('es_forms_integrations_${filter}_data', 'getIntegrationFilterData', 10, 2); /** * Manipulate form fields data before it is sent to the Block Editor. @@ -116,7 +124,7 @@ function OrderFilter ({ filter }) { {reformatCode(` - add_filter('es_forms_integrations_${filter}_order', 'getIntegrationOrder'); + \add_filter('es_forms_integrations_${filter}_order', 'getIntegrationOrder'); /** * Forces form field order for the provided fields. For other fields, Block editor order is used. @@ -145,7 +153,7 @@ function PrePostIdFilter ({ filter }) { {reformatCode(` - add_filter('es_forms_integrations_${filter}_pre_post_id', 'getIntegrationPrePostId', 10, 3); + \add_filter('es_forms_integrations_${filter}_pre_post_id', 'getIntegrationPrePostId', 10, 3); /** * Modifies integration item ID. @@ -187,7 +195,7 @@ function PrePostParamsFilter ({ filter }) { {reformatCode(` - add_filter('es_forms_integrations_${filter}_pre_post_params', 'getIntegrationPrePostParams', 10, 2); + \add_filter('es_forms_integrations_${filter}_pre_post_params', 'getIntegrationPrePostParams', 10, 2); /** * Modifies form field data before it's sent to ${text}.